- 浏览: 618625 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (314)
- 生活 (2)
- c# (37)
- 技术 (3)
- 400电话 (0)
- 400常见问题 (0)
- 400资费 (0)
- html (7)
- css (0)
- 数据库 (7)
- javascript (16)
- php (33)
- asp.net mvc2 (10)
- mysql (9)
- C# 3.0 LinQ (10)
- vs2005或vs2008 (4)
- flash and as3 (7)
- fms (1)
- dedeCMS (11)
- java (33)
- j2me (1)
- swing (1)
- c++ (1)
- jquery easyui (3)
- jquery (5)
- android (29)
- MongoDB (9)
- VtigerCRM (1)
- test (0)
- linux (30)
- nutch (2)
- SqlServer数据库 (2)
- 数据检索 (2)
- java抓取 (11)
- 乐天 (1)
- 淘宝 (1)
- Silverlight4.0 (6)
- sphinx实时索引 (5)
- ecshop (9)
- codeigniter(CI) (3)
- axure6 (1)
- 京东店铺装修教程 (2)
- xpath (1)
- joomla (2)
- bpm (1)
- Bootstrap (2)
- knockout (4)
- ecstore (4)
- css3 (1)
- 微信 (2)
- dede (0)
- soa_edi (1)
- odoo (0)
- web (1)
最新评论
-
骑着蜗牛超F1:
在ie6下报了个stack overflow at line ...
兼容ie6和ie7 的16进制码流在html中显示为图片代码(base64) -
冰之海洋:
好像少了一句代码吧? FloatingFunc.show(th ...
android 一直在最前面的浮动窗口效果 -
yanzhoupuzhang:
连接有问题!
iis7.0官方下载 IIS 7.0(微软Web服务器组件IIS 7.0) 官方(windows 2003,XP,2000) -
whatable:
唉,楼主你都没有搞清楚重量级和轻量级。。。。既然引用了SWT, ...
java swing 内置浏览器打开网页显示flash图表-swt Browser应用 -
yy_owen:
我晕啊,你链接的什么内容额,我要的iis,你链接个视频什么意思 ...
iis7.0官方下载 IIS 7.0(微软Web服务器组件IIS 7.0) 官方(windows 2003,XP,2000)
摘要
本文将从完成“输入数据验证”这个功能出发,逐渐展开ASP.NET MVC与Ajax结合的方法。首先,本文将使用ASP.NET MVC提供的同步方式完成数据验证。而后,将分别结合ASP.NET AJAX和JQuery将这个功能重构成异步形式。
数据验证
在上一篇文章中,我们完成了发布公告的功能。但是从健壮性角度看,这个功能并不完善,因为一般情况下,我们输入的数据要符合一定的约束条件,例如,在我们的例子中,我们至少不能将空字符串作为标题或内容吧。下面,我们来为程序加入数据验证功能,
ASP.NET MVC中提供了良好的数据验证实现支持,下面我们来看实现过程。首先,我们要修改一下Release.aspx视图,修改后的视图如下。
Release.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Release.aspx.cs" Inherits="MVCDemo.Views.Announce.Release" %> <%@ Import Namespace="MVCDemo.Models.Entities" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]]> > <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> </head> <body> <% SelectList categories = ViewData["Categories"] as SelectList; %> <div> <h1>MVC公告发布系统——发布公告</h1> <% Html.BeginForm("DoRelease","Announce",FormMethod.Post); %> <dl> <dt>标题:</dt> <dd><%= Html.TextBox("Title") %></dd> <dd><%= Html.ValidationMessage("TitleValidator") %></dd> <dt>分类:</dt> <dd><%= Html.DropDownList("Category",categories) %></dd> <dd></dd> <dt>内容:</dt> <dd><%= Html.TextArea("Content") %></dd> <dd><%= Html.ValidationMessage("ContentValidator") %></dd> </dl> <input type="submit" value="发布" /> <% Html.EndForm(); %> </div> </body> </html>
可以看到,并没有什么大的变动,只是多了两个Html.ValidationMessage方法。可以这样理解,这个方法相当于产生一个span标签,而
这个span就是要显示错误信息的地方。这个方法接收一个参数,用来指明其在Controller中的名字。如果你对这个迷惑,不要紧,接下来看完
Controller的代码,你就什么都清楚了。
AnnounceController.cs:
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Mvc.Ajax; using MVCDemo.Models; using MVCDemo.Models.Interfaces; using MVCDemo.Models.Entities; namespace MVCDemo.Controllers { public class AnnounceController : Controller { public ActionResult Release() { ICategoryService cServ = ServiceBuilder.BuildCategoryService(); List<CategoryInfo> categories = cServ.GetAll(); ViewData["Categories"] = new SelectList(categories, "ID", "Name"); return View("Release"); } // http://www.my400800.cn public ActionResult DoRelease() { if (String.IsNullOrEmpty(Request.Form["Title"]) || String.IsNullOrEmpty(Request.Form["Content"])) { if (String.IsNullOrEmpty(Request.Form["Title"])) { ViewData.ModelState.AddModelError("TitleValidator","公告标题不能为空!"); } if (String.IsNullOrEmpty(Request.Form["Content"])) { ViewData.ModelState.AddModelError("ContentValidator", "公告内容不能为空!"); } return Release(); } AnnounceInfo announce = new AnnounceInfo() { ID = 1, Title = Request.Form["Title"], Category = Int32.Parse(Request.Form["Category"]), Content = Request.Form["Content"], }; IAnnounceService aServ = ServiceBuilder.BuildAnnounceService(); aServ.Release(announce); ViewData["Announce"] = announce; return View("ReleaseSucceed"); } } }
可以看到,我们的DoRelease这个Action方法多了不少东西。我们看多了什么:当从表单传递过来的标题或内容为空时,我们做了一定处理。注意,
这个ViewData.ModelState.AddModelError方法,它就是往我们刚才说的由Html.ValidationMessage生
成的span里加入错误信息的方法,它可以有两个参数,第一个指明哪个span,这个参数Html.ValidationMessage中的参数是对应
的。第二个参数就是要显示的信息。
相信结合视图和控制器,已经很好理解了。最后,如果标题或内容有空值的话,我们不再调用业务逻辑组件处理了,而是调用了Release这个Action。
为什么我们不用Redirect呢?因为我们要保持ViewData中的数据,刚才我们的错误信息可都放在里面的,而使用了
Redirect,ViewData的信息就传不过去了。
现在,我们再来发布400电话
公告。我们故意什么都不填,提交,看结果:
也许你有一个疑问,为什么第一次请求Release视图时没有显示任何错误信息呢?因为那时ViewData中的ModelError是空的。而 Html.ValidationMessage生成的标签会自动寻找ModelError中同名的错误信息,找不到,当然是空的了。而在提交空信息 时,DoRelease这个Action为ViewData的ModelError添加了内容,于是当再次返回Release视图时,相应信息就显示在我 们指定的位置了。
使用ASP.NET AJAX实现客户端数据验证
上面的代码运行起来没问题,也达到了我们的要求。但是验证标题内容是否为空这种行为在客户端应该就可以完成。当然,为了放置恶意攻击或浏览器将 JavaScript屏蔽的情况,我们应该在后台进行验证,但是我们不能每次都将这种请求发到后台去验证,这太费资源了,毕竟恶意攻击者和 JavaScript被屏蔽的浏览器只是少数。所以,在数据被送到后台前,我们应该先进行一遍验证,这样可以节约很多资源。
下面,我们使用ASP.NET AJAX框架完成客户端的数据验证。
说实话,在ASP.NET MVC中使用ASP.NET AJAX或JQuery实在太方便了,不信你展开Scripts文件夹,看到没,微软已经把这些库放到里面了,所以,我们要做的只是直接引用。看我们修改后的Release.aspx。
Release.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Release.aspx.cs" Inherits="MVCDemo.Views.Announce.Release" %> <%@ Import Namespace="MVCDemo.Models.Entities" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <script type="text/javascript" src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>"></script> <script type="text/javascript" src="<%= Url.Content("~/Scripts/MicrosoftAjaxValidate.js") %>"></script> </head> <body> <% SelectList categories = ViewData["Categories"] as SelectList; %> <div> <h1>MVC公告发布系统——发布公告</h1> <% Html.BeginForm("DoRelease","Announce",FormMethod.Post); %> <dl> <dt>标题:</dt> <dd><%= Html.TextBox("Title") %></dd> <dd><span id="TitleValidator"></span></dd> <dt>分类:</dt> <dd><%= Html.DropDownList("Category",categories) %></dd> <dd></dd> <dt>内容:</dt> <dd><%= Html.TextArea("Content") %></dd> <dd><span id="ContentValidator"></span></dd> </dl> <input id="Submit" type="submit" value="发布" /> <% Html.EndForm(); %> </div> </body> </html>
改动有两处,首先我们在页头引用了两个js文件,第一个是ASP.NET AJAX的库文件,第二个就是我们一会要实现的包含验证代码的js文件了。你可能注意到那个Url.Content了,Url是ViewPage的一个对 象,它最常用的一个方法就是Content,它的功能是返回某个文件的路径。一般情况下,在使用了ASP.NET MVC后,目录结构变得有点诡异,像js、css、图片等与路径(即使是相对路径)引用相关的地方可能会出现问题,但是,只要你在这些地方用 Url.Content生成路径,而不是直接将路径写在页面里,一般就没什么问题了。所以,凡是引用js、css、图片等除,请一定使用 Url.Content生成路径,其参数只有一个,就是文件原始的相对路径。
下一个改动就是显示错误信息的span不再是Html.ValidationMessage生成的了,而是普通的span。
下面我们在Scripts目录下新建MicrosoftAjaxValidate.js文件。
MicrosoftAjaxValidate.js:
function onPageInit() { $addHandler($get( " Submit " ), " click " , validate); } function validate() { if ($get( " Title " ).value == "" || $get( " Content " ).value == "" ) { if ($get( " Title " ).value == "" ) { $get( " TitleValidator " ).innerHTML = " 标题不能为空! " ; } if ($get( " Content " ).value == "" ) { $get( " ContentValidator " ).innerHTML = " 内容不能为空! " ; } return false ; } return true ; }
关于这段代码我不多说了,对ASP.NET AJAX有兴趣的可以参看《ASP.NET AJAX客户端编程之旅》系列文章。
现在运行,将标题和内容留空,提交。OK!效果和刚才很像,只不过这次是在客户端验证了,并没有提交到服务器端。
整合JQuery
下面我们再使用JQuery实现这个功能。
其实看懂上面的实现后,我想你已经想到怎么整合JQuery了,无非也是引入相应库和js文件,然后使用JQuery编写验证代码。修改后的 Release.aspx就没必要看了,无非是引入Scripts目录下的JQuery库,然后再引入一个自定义验证js文件,我们姑且叫 JQueryValidate.js吧。
下面在Scripts目录下新建JQueryValidate.js,代码如下。
JQueryValidate.js:
$(document).ready(function(){ $("#Submit").click(function() { if ($("#Title").attr("value") == "" || $("#Content").attr("value") == "") { if ($("#Title").attr("value") == "") { $("#TitleValidator").attr("innerHTML", "标题不能为空!"); } if ($("#Content").attr("value") == "") { $("#ContentValidator").attr("innerHTML", "内容不能为空!"); } return false; } return true; } ); } );
小结
从本文可以看出,在MVC框架中整合Ajax和普通应用差别不大,唯一就是注意在引用外部js时使用Url.Content方法处理一下相对路径。其实在
本文中我们并没有使用到Ajax,而仅仅是整合了JavaScirpt,但是这已经足够了,因为Ajax无非就是在这些JavaScript里包含了异步
后台调用。
其实,ASP.NET MVC有专门针对ASP.NET
AJAX的扩展,放在MicrosoftMvcAjax.js里。而在ViewPage里有个叫Ajax的AjaxHelper对象,可以实现一些简单的
异步调用。但是这个扩展的功能很有限,有兴趣的可以自己研究一下。我个人还是建议大家自己写JS代码,当然可以使用ASP.NET
AJAX或JQeury这样优秀的框架。
这篇文章先到这里,下一篇中我们讨论一下拦截器的使用。^_^
评论
最近碰到一个mvc的问题,几天了都还没搞定,不知能否赐教!
问题是这样的:
从view往controller里传字符串数据时可以这样写
@Html.ActionLink("Edit View", "Index", "CSAViewSetting", new { viewsetting = "test"}, null)
但现在不是传字符串,而是传一个CSAVary的结构体ViewBag.Vary,如下这样
@Html.ActionLink("Edit View", "Index", "CSAViewSetting", new { vary_viewsetting = ViewBag.Vary}, null)
好像传不过去了,URL的最后是 CSAViewSetting?vary_viewsetting=CSA.Models.CSAVary
只是传了这个结构体的类型,并没有传这个结构体的值。
在这种情况下应该怎么传才好呢?(不能把CSAVary结构体拆开了传)
先谢谢了!
我的邮箱 wwxiong2007@hotmail.com
盼交流!
发表评论
-
ASP.NET MVC 2.0之编辑和删除新闻操作
2010-08-05 14:22 2053本文将介绍的是ASP.NET MVC ... -
asp.net MVC2 利用 Model 模块设定进行数据验证
2010-08-02 09:39 2882本节主要介绍ASP.Net MVC DropDownList绑 ... -
MVC2 Html.DropDownList数据绑定
2010-07-30 17:20 2939一步:新建一个mvc 2 工程 二步:在HomeCon ... -
初探Lambda表达式(o=> o.Length )
2010-07-30 15:09 1754先看一个例子: Expression< ... -
第六篇:拦截器( MVC案例教程(基于ASP.NET MVC beta))
2010-07-30 11:42 2183摘要 本文将 ... -
第四篇:传递表单数据( MVC案例教程(基于ASP.NET MVC beta))
2010-07-30 10:21 3192摘要 本文将完 ... -
第三篇:ASP.NET MVC全局观 ( MVC案例教程(基于ASP.NET MVC beta))
2010-07-30 10:08 3042摘要 本文对ASP ... -
第一篇:基于ASP.NET MVC2 创建第一个简单页面
2010-07-30 09:29 8232前言 ASP.NET MVC作为 ... -
第二篇:基于ASP.NET MVC2 创建第一个简单页面
2010-07-30 09:08 5046摘要 ...
相关推荐
Asp.Net MVC案例教程 Asp.Net MVC案例教程 Asp.Net MVC案例教程 Asp.Net MVC案例教程 Asp.Net MVC案例教程 Asp.Net MVC案例教程
基于ASP.NET MVC框架的学习项目,包含MVC的框架的设计思路,通俗易懂学习MVC框架,需要VS2010及以上版本打开,初学者可以快速理解MVC的构思以及开发。
ASP.net MVC3 中文教程ASP.net MVC3 中文教程ASP.net MVC3 中文教程ASP.net MVC3 中文教程
ASP.NET MVC框架开发系列课程(1):MVC模式与ASP.NET MVC框架概述
基于ASP.NET Ajax框架实现表单验证编程原理
全书论述了ASP.NET开发概述、C#及ADO.NET背景知识、ASP.NET Web窗体的基本控件、数据控件和数据绑定技术、用户控件和自定义控件、ASP.NET内置....NET与Web服务、ASP.NET与XML技术、JavaScript技术、ASP.NET和AJAX等内容...
ASP.NET MVC作为微软官方的.NET平台下MVC解决方案,自诞生起就吸引了众多.NET平台开发人员的眼球。ASP.NET MVC从一开始的设计思路就与Struts不同,它的映射是利用路由配置而非xml,从而大大降低了开发复杂度,并且比...
( ASP.NET MVC2程序开发入门到精通系列课程(10):整合AJAX应用
ASP.NET MVC :MVC页面验证与授权
资源名:基于ASP.NET MVC的三层架构博客网站系统源码 资源类型:程序源代码 源码说明: 使用ASP.NET写的三层架构博客系统 带SEO优化 完整代码 适合学习使用 适合人群:新手及有一定经验的开发人员
本系列文章作为一个ASP.NET MVC的入门教程,将不会长篇大论介绍其中的概念及理论。而是通过案例实践来学习ASP.NET MVC。在这系列文章中我将逐步完成一个“公告发布系统”。我的写作策略是:先动手做,遇到需要解释...
ASP.NET MVC2 技术是微软又一个新的WEB开发技术,也是微软在ASP.NET 平台上有一个产品,这一技术旨在使用MVC架构呈现ASP.NET,给开发者提供更多更好的可定制内容。是广大WEB开发者继ASP.NET WebForm之外的另一好选择...
asp.net MVC4 CMS 完整的源代码,学习和提高asp.net mvc4可以参考一下。
《ASP.NET MVC网站编程案例精解》面向的读者是熟悉Web开发的基本概念和ASENET的Web开发人员,《ASP.NET MVC网站编程案例精解》中的所有示例是用C#语言实现的。 内容提要 ASENETMVC整合了强大的新功能,可以帮助您...
ASP.NET MVC 案例教程 ASP.NET MVC 案例教程 ASP.NET MVC 案例教程
ASP.NET MVC AJAX 文件上传示例代码。 使用 jquery.fileupload + bootstrap 实现,支持多个文件上传。 运行环境:Visual Studio 2012 project, ASP.NET MVC4
全书论述了ASP.NET开发概述、C#及ADO.NET背景知识、ASP.NET Web窗体的基本控件、数据控件和数据绑定技术、用户控件和自定义控件、ASP.NET内置....NET与Web服务、ASP.NET与XML技术、JavaScript技术、ASP.NET和AJAX等内容...
ASP.NET MVC3 AJAX进度条