ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
2012-02-01 02:30
411 查看
======================================================
注：本文源代码点此下载
======================================================
asp.net mvc案例教程(基于asp.net mvc beta)——第五篇:mvc整合ajax
2008-11-03 22:48
by
t2噬菌体,
29499
visits,
收藏,
编辑
摘要
本文将从完成“输入数据验证”这个功能出发,逐渐展开asp.net mvc与ajax结合的方法。首先,本文将使用asp.net mvc提供的同步方式完成数据验证。而后,将分别结合asp.net ajax和jquery将这个功能重构成异步形式。
数据验证
在上一篇文章中,我们完成了发布公告的功能。但是从健壮性角度看,这个功能并不完善,因为一般情况下,我们输入的数据要符合一定的约束条件,例如,在我们的例子中,我们至少不能将空字符串作为标题或内容吧。下面,我们来为程序加入数据验证功能,
asp.net mvc中提供了良好的数据验证实现支持,下面我们来看实现过程。首先,我们要修改一下release.aspx视图,修改后的视图如下。
release.aspx:
1
@
page language="c#" autoeventwireup="true" codebehind="release.aspx.cs" inherits="mvcdemo.views.announce.release" %>
2
@
import namespace="mvcdemo.models.entities" %>
3
4
doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"]]>
>
5
6
html xmlns="http://www.w3.org/1999/xhtml" >
7
head runat="server">
8
title>title>
9
head>
10
body>
11
selectlist categories = viewdata["categories"] as selectlist; %>
12
div>
13
h1>mvc公告发布系统——发布公告h1>
14
html.beginform("dorelease","announce",formmethod.post); %>
15
dl>
16
dt>标题:dt>
17
dd>= html.textbox("title") %>dd>
18
dd>= html.validationmessage("titlevalidator") %>dd>
19
dt>分类:dt>
20
dd>= html.dropdownlist("category",categories) %>dd>
21
dd>dd>
22
dt>内容:dt>
23
dd>= html.textarea("content") %>dd>
24
dd>= html.validationmessage("contentvalidator") %>dd>
25
dl>
26
input type="submit" value="发布" />
27
html.endform(); %>
28
div>
29
body>
30
html>
可以看到,并没有什么大的变动,只是多了两个html.validationmessage方法。可以这样理解,这个方法相当于产生一个span标签,而这个span就是要显示错误信息的地方。这个方法接收一个参数,用来指明其在controller中的名字。如果你对这个迷惑,不要紧,接下来看完controller的代码,你就什么都清楚了。
announcecontroller.cs:
1
using system;
2
using system.collections.generic;
3
using system.linq;
4
using system.web;
5
using system.web.mvc;
6
using system.web.mvc.ajax;
7
using mvcdemo.models;
8
using mvcdemo.models.interfaces;
9
using mvcdemo.models.entities;
10
11
namespace mvcdemo.controllers
12
{
13
public class announcecontroller : controller
14
{
15
public actionresult release()
16
{
17
icategoryservice cserv = servicebuilder.buildcategoryservice();
18
listcategoryinfo> categories = cserv.getall();
19
viewdata["categories"] = new selectlist(categories, "id", "name");
20
return view("release");
21
}
22
23
public actionresult dorelease()
24
{
25
if (string.isnullorempty(request.form["title"]) || string.isnullorempty(request.form["content"]))
26
{
27
if (string.isnullorempty(request.form["title"]))
28
{
29
viewdata.modelstate.addmodelerror("titlevalidator","公告标题不能为空!");
30
}
31
if (string.isnullorempty(request.form["content"]))
32
{
33
viewdata.modelstate.addmodelerror("contentvalidator", "公告内容不能为空!");
34
}
35
36
return release();
37
}
38
39
announceinfo announce = new announceinfo()
40
{
41
id = 1,
42
title = request.form["title"],
43
category = int32.parse(request.form["category"]),
44
content = request.form["content"],
45
};
46
47
iannounceservice aserv = servicebuilder.buildannounceservice();
48
aserv.release(announce);
49
50
viewdata["announce"] = announce;
51
return view("releasesucceed");
52
}
53
}
54
}
可以看到,我们的dorelease这个action方法多了不少东西。我们看多了什么:当从表单传递过来的标题或内容为空时,我们做了一定处理。注意,这个viewdata.modelstate.addmodelerror方法,它就是往我们刚才说的由html.validationmessage生成的span里加入错误信息的方法,它可以有两个参数,第一个指明哪个span,这个参数html.validationmessage中的参数是对应的。第二个参数就是要显示的信息。
相信结合视图和控制器,已经很好理解了。最后,如果标题或内容有空值的话,我们不再调用业务逻辑组件处理了,而是调用了release这个action。为什么我们不用redirect呢?因为我们要保持viewdata中的数据,刚才我们的错误信息可都放在里面的,而使用了redirect,viewdata的信息就传不过去了。
现在,我们再来发布公告。我们故意什么都不填,提交,看结果:
没有问题,我们的程序成功对标题和内容进行了完整性检测(这里就是均不能为空),在验证不通过时,返回了发布公告视图并正确显示了错误提示信息。
也许你有一个疑问,为什么第一次请求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:
1
@
page language="c#" autoeventwireup="true" codebehind="release.aspx.cs" inherits="mvcdemo.views.announce.release" %>
2
@
import namespace="mvcdemo.models.entities" %>
3
4
doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
5
6
html xmlns="http://www.w3.org/1999/xhtml" >
7
head runat="server">
8
title>title>
9
script
type="text/javascript" src="~/scripts/microsoftajax.debug.js") %>
">
10
标签:
asp.net, mvc,
asp.net mvc, 例子,
案例, net
绿色通道:好文要顶关注我收藏该文与我联系
categories:
[03]asp.net mvc
tags:
asp.net,
mvc,
asp.net mvc, 例子,
案例, net
add your comment
58 条回复
2201557
#1楼 astar
2008-11-03 23:00
回复 引用 查看
#2楼 小狼壮壮
2008-11-03 23:33
好文,拜读。
感谢楼主,好老师。
回复 引用 查看
#3楼 有容乃大
2008-11-04 09:39
这个验证(html.validationmessage)不能在客户端触发吧。感觉asp.net mvc比传统的asp.net麻烦不少,就以验证来说,传统方式只需拉一个验证控件(输入正则式)就能完成客户端和服务器端的双重验证,而这里这种验证方式真有些恶心。
本人一直关注asp.net mvc,看了不少文章,也不知道是到底对这种模式感兴趣还是在找一个让自己喜欢asp.net mvc的理由,困惑中,望大家指点!
-----------------------------------------
http://www.cnblogs.com/mrhgw/archive/2008/10/09/1307247.html
回复 引用 查看
#4楼 ohsam[未注册用户]2008-11-04 10:22
没有看到ajax的应用啊 ??
回复 引用
#5楼 cat chen
2008-11-04 10:41
封装为一个mvc的helper函数啊,这才符合mvc思维方式,rails就是这样做的。你现在相当于把jquery从mvc那里割裂开来用。
回复 引用 查看
#6楼 erererererer[未注册用户]2008-11-04 12:56
感觉没多大用途,,这种入门的文章实在是...
多弄些原理性的文章才有意思哦。
回复 引用
#7楼 龙龙ago[未注册用户]2008-11-04 16:19
服务器验证非空的这个地方,无法保持上一次的表单状态,要再做些处理,相对webform麻烦了些
正确得控制器这边代码要多两个东西
public actionresult dorelease()
{
if (string.isnullorempty(request.form["title"]) || string.isnullorempty(request.form["content"]))
{
if (string.isnullorempty(request.form["title"]))
{
viewdata.modelstate.addmodelerror("titlevalidator", "公告标题不能为空!");
}
else
{
viewdata["title"] = request.form["title"].tostring();
}
if (string.isnullorempty(request.form["content"]))
{
viewdata.modelstate.addmodelerror("contentvalidator", "公告内容不能为空!");
}
else
{
viewdata["content"] = request.form["content"].tostring();
}
return release();
}
在release.aspx这边要
mvc公告发布系统——发布公告
标题:
分类:
内容:
这样才能保持好上次的表单状态
回复 引用
#8楼[楼主] t2噬菌体
2008-11-04 19:42
@龙龙ago
原来如此。学习了!谢谢!
回复 引用 查看
#9楼[楼主] t2噬菌体
2008-11-04 19:44
@ohsam
其实在本文中我们并没有使用到ajax,而仅仅是整合了javascirpt,但是这已经足够了,因为ajax无非就是在这些javascript里包含了异步后台调用。
回复 引用 查看
#10楼[楼主] t2噬菌体
2008-11-04 19:46
@cat chen
我也是这么想的,不过后来发现这样做有些困难,似乎为了符合mvc付出的代价太大了。所以目前我还是使用分割开javascript的方式。不过微软目前正在封装这部分,目前版本中的ajaxhelper还不够强大。希望在正式版中可以看到功能强大的ajaxhelper
回复 引用 查看
#11楼 microbar2[未注册用户]2009-01-22 14:55
求救:怎么弄都运行不了!
未能从程序集“system.web.routing, version=3.5.0.0, culture=neutral, publickeytoken=31bf3856ad364e35”中加载类型“system.web.routing.stoproutinghandler”。
说明: 执行当前 web 请求期间,出现未处理的异常。请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息。
异常详细信息: system.typeloadexception: 未能从程序集“system.web.routing, version=3.5.0.0, culture=neutral, publickeytoken=31bf3856ad364e35”中加载类型“system.web.routing.stoproutinghandler”。
源错误:
行 15:public static void registerroutes(routecollection routes)
行 16:{
行 17:routes.ignoreroute("{resource}.axd/{*pathinfo}");
行 18:
行 19:routes.maproute(
源文件: e:\project\2008\mvc\mvcdemo\mvcdemo\global.asax.cs行: 17
回复 引用
#12楼[楼主] t2噬菌体
2009-01-24 21:20
@microbar2
你有没有安装asp.net mvc扩展包?
回复 引用 查看
#13楼 飞飞双双
2009-02-09 16:48
@有容乃大
在实际开发中考虑到页面布局和用户体验 验证表单一般都是用js,如果需要读取服务器数据进行验证则使用webservice或ajax
个人感觉在webforms下使用ajax比较费劲(用其它轻量级的js框架或者自己写),原因在于不可避免的要使用服务器控件,而服务器控件的id在客户端将发生变化!
mvc抛弃服务器控件,抛弃页面生存周期,抛弃事件驱动,看似费力,却更加触及web底层。架构设计时更容易实现低耦合,高聚合的原则,希望微软可以陆续提供更多的helper,相信可以吸引到更多的web程序员
回复 引用 查看
#14楼 青格儿[未注册用户]2009-02-24 11:48
asp.net mvc扩展包?这个是什么?我装了rc
那还用不用装asp.net mvc扩展包?
回复 引用
#15楼[楼主] t2噬菌体
2009-02-24 12:48
@青格儿
你装了asp.net mvc rc就可以了^_^
回复 引用 查看
#16楼 sunk
2009-03-31 00:52
一个疑问dorelease()的开始部分,判断为空为什么要进行两次判断呢?
回复 引用 查看
#17楼[楼主] t2噬菌体
2009-03-31 15:05
@sunk
外层的判断,是决定是否进入错误处理逻辑。内层的判断,是细化判断到底是title为空还是content为空。
回复 引用 查看
#18楼 shuihanyu2009-04-22 10:31
楼主,我发现一个问题呀,就是你第一次什么都不填,故意让它显示不能为空的消息,然后,再填写内容,点提交的时候,没有反应。
小菜鸟请问有什么解决办法吗?
回复 引用
#19楼 john liu
2009-05-10 22:22
@有容乃大
兄弟,就会拉控件的方式才是恶心呢。如果你对某一文本框要多个验证,同时要求,不为空,符合某一正则表达式,甚至再要求ajax方式验证。验证控件就很难完成任务。而且,如果页面上的表单元素比较多,而每个元素要需要不止一个验证,那你的页面需要多少验证控件。
回复 引用 查看
#20楼 john liu
2009-05-10 22:26
楼主的jquery水平有待提高啊,取value值直接用$("#title").val()就可以了啊。赋值直接用$("#titlevalidator").html("标题不能为空!")就可以了吧。
回复 引用 查看
#21楼 lvhejin[未注册用户]2009-05-12 15:16
顶一下
回复 引用
#22楼[楼主] t2噬菌体
2009-05-12 18:31
@john liu
呵呵,我不怎么会jquery,没大用过。
回复 引用 查看
#23楼 assuka[未注册用户]2009-05-22 11:29
照着你的列子写,到“使用asp.net ajax实现客户端数据验证”
这步的时候,调试出现问题
microsoftajax.debug.js中2935行
microsoft jscript 运行时错误: sys.argumentnullexception: value cannot be null.
parameter name: element
不知道是为什么。
回复 引用
#24楼 assuka[未注册用户]2009-05-22 14:49
@assuka
帮助楼主回答我自己。
因为在>的release页面里面
上没有id = "submit"。
所以到本篇的时候,我沿用了上一次的页面,修改时候没有加上id属性,导致调试失败。
回复 引用
#25楼 husteric[未注册用户]2009-06-11 13:28
谢谢博主,受益匪浅啊,是asp.net mvc的入门好教程
回复 引用
#26楼 寻影追梦
2009-07-01 14:10
支持,经常光顾
回复 引用 查看
#27楼 用爱用心追梦
2009-07-13 13:53
我来了!!!
回复 引用 查看
#28楼 kevin.zeng[未注册用户]2009-08-27 11:30
@龙龙ago
貌似也不能保存~试过了还是空的~不知道为什么!
回复 引用
#29楼 随风178
2009-09-23 19:04
看不懂的东西好
回复 引用 查看
#30楼 邀月
2009-10-15 13:14
不错!
回复 引用 查看
#31楼 ( ⊙ o ⊙ )[未注册用户]2009-11-05 10:53
这个jquery写的那么麻烦,不是有更简单的写法吗
回复 引用
#32楼 321111123333[未注册用户]2009-11-11 17:33
这个算ajax?????
回复 引用
#33楼[楼主] ericzhang(t2噬菌体)
2009-11-11 19:56
引用321111123333:这个算ajax?????
请注意文章中的一句话:“其实在本文中我们并没有使用到ajax,而仅仅是整合了javascirpt,但是这已经足够了,因为ajax无非就是在这些javascript里包含了异步后台调用。
”
回复 引用 查看
#34楼 cmj[未注册用户]2009-11-20 11:02
修改一下文章题目吧,确实没有用ajax,仅仅就是客户端的简单javascript验证,题目有点误导。
回复 引用
#35楼 bdnet
2009-12-03 16:39
是用博主的microsoftajax验证方式在ie下通过
但在firefox下测试,验证没通过也被提交了
firefox版本3.5.5
回复 引用 查看
#36楼 莫慌
2009-12-05 16:40
引用飞飞双双:@有容乃大
在实际开发中考虑到页面布局和用户体验 验证表单一般都是用js,如果需要读取服务器数据进行验证则使用webservice或ajax
个人感觉在webforms下使用ajax比较费劲(用其它轻量级的js框架或者自己写),原因在于不可避免的要使用服务器控件,而服务器控件的id在客户端将发生变化!
mvc抛弃服务器控件,抛弃页面生存周期,抛弃事件驱动,看似费力,却更加触及web底层。架构设计时更容易实现低耦合,高聚合的原则,希望微软可以陆续提供更多的helper,相信可以吸引到更多的web程序员
抛弃服务器控件未必就是好事。在这个例子中,为了在提交到服务器端验证且通不过时保存原来的状态,需要查询数据库(release(),得到categroys),这就增加了数据库的查询次数,而webform的服务器控件就不会有这个问题,除非这里完全用ajax。
回复 引用 查看
#37楼 itliyi
2009-12-08 21:34
请教楼主我不输入怎么都提交过去了?
服务端是 客户端也是
回复 引用 查看
#38楼 廖勇军
2009-12-23 10:46
没看到ajax啊
回复 引用 查看
#39楼 aisoon99
2010-01-04 16:08
"为什么我们不用redirect呢?因为我们要保持viewdata中的数据,刚才我们的错误信息可都放在里面的,而使用了redirect,viewdata的信息就传不过去了"-----好像使用tempdata就能保存一次数据到新的页面
回复 引用 查看
#40楼 进步的小菜
2010-04-16 15:17
学习了,感谢楼主
回复 引用 查看
#41楼 飞碟工作室
2010-05-26 15:53
教程还可以..
入门的好文章..
回复 引用 查看
#42楼 新猪猪
2010-06-21 16:46
楼主的jquery可以再简化一点,呵呵。
if($("#title").val() == "") {
$("#titlevalidator").html("标题不能为空!");
}
回复 引用 查看
#43楼 青山yoyo
2010-08-30 17:38
学习
回复 引用 查看
#44楼 牧马
2010-11-02 19:51
客户端验证弄不出来,我用的是mvc2,有影响吗?
回复 引用 查看
#45楼 staid
2010-11-26 17:30
jquery验证里面的
$("#submit").click
应该是 $("#按钮id").click,其他的挺好的。
希望继续把该系列写下去
回复 引用 查看
#46楼 stone1314
2011-03-28 23:25
学习~
回复 引用 查看
#47楼 ^懒洋洋^
2011-05-13 15:57
刷新评论列表刷新页面返回页首
发表评论
昵称:
[登录]
[注册]
主页:
邮箱:(仅博主可见)
验证码:看不清。
换一个
评论内容:
记住我的昵称和主页
-->
登录注册
[使用ctrl+enter键快速提交评论]
0
1325840
enbvet3uilm=
首页博问闪存新闻园子招聘知识库
最新it新闻:
·android平台12月广告浏览份额51.6% 超越ios
·测试版ios源代码显示ipad 3或将支持siri
·斯蒂芬·霍金的新电脑
·京东商城2.95亿竞得北京商业地一块
·美报业巨头合作facebook谷歌 传媒重视网络网络
»
更多新闻...
最新知识库文章:
·javascript 面向对象编程
·持续集成之“everything is code”
·持续集成之“软件自我识别”
·持续集成之戏说check-in dance
·什么是闭包。
我的理解
»
更多知识库文章...
china-pub 2011秋季教材巡展
china-pub 计算机绝版图书按需印刷服务
======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定
这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/
注：本文源代码点此下载
======================================================
asp.net mvc案例教程(基于asp.net mvc beta)——第五篇:mvc整合ajax
2008-11-03 22:48
by
t2噬菌体,
29499
visits,
收藏,
编辑
摘要
本文将从完成“输入数据验证”这个功能出发,逐渐展开asp.net mvc与ajax结合的方法。首先,本文将使用asp.net mvc提供的同步方式完成数据验证。而后,将分别结合asp.net ajax和jquery将这个功能重构成异步形式。
数据验证
在上一篇文章中,我们完成了发布公告的功能。但是从健壮性角度看,这个功能并不完善,因为一般情况下,我们输入的数据要符合一定的约束条件,例如,在我们的例子中,我们至少不能将空字符串作为标题或内容吧。下面,我们来为程序加入数据验证功能,
asp.net mvc中提供了良好的数据验证实现支持,下面我们来看实现过程。首先,我们要修改一下release.aspx视图,修改后的视图如下。
release.aspx:
1
@
page language="c#" autoeventwireup="true" codebehind="release.aspx.cs" inherits="mvcdemo.views.announce.release" %>
2
@
import namespace="mvcdemo.models.entities" %>
3
4
doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"]]>
>
5
6
html xmlns="http://www.w3.org/1999/xhtml" >
7
head runat="server">
8
title>title>
9
head>
10
body>
11
selectlist categories = viewdata["categories"] as selectlist; %>
12
div>
13
h1>mvc公告发布系统——发布公告h1>
14
html.beginform("dorelease","announce",formmethod.post); %>
15
dl>
16
dt>标题:dt>
17
dd>= html.textbox("title") %>dd>
18
dd>= html.validationmessage("titlevalidator") %>dd>
19
dt>分类:dt>
20
dd>= html.dropdownlist("category",categories) %>dd>
21
dd>dd>
22
dt>内容:dt>
23
dd>= html.textarea("content") %>dd>
24
dd>= html.validationmessage("contentvalidator") %>dd>
25
dl>
26
input type="submit" value="发布" />
27
html.endform(); %>
28
div>
29
body>
30
html>
可以看到,并没有什么大的变动,只是多了两个html.validationmessage方法。可以这样理解,这个方法相当于产生一个span标签,而这个span就是要显示错误信息的地方。这个方法接收一个参数,用来指明其在controller中的名字。如果你对这个迷惑,不要紧,接下来看完controller的代码,你就什么都清楚了。
announcecontroller.cs:
1
using system;
2
using system.collections.generic;
3
using system.linq;
4
using system.web;
5
using system.web.mvc;
6
using system.web.mvc.ajax;
7
using mvcdemo.models;
8
using mvcdemo.models.interfaces;
9
using mvcdemo.models.entities;
10
11
namespace mvcdemo.controllers
12
{
13
public class announcecontroller : controller
14
{
15
public actionresult release()
16
{
17
icategoryservice cserv = servicebuilder.buildcategoryservice();
18
listcategoryinfo> categories = cserv.getall();
19
viewdata["categories"] = new selectlist(categories, "id", "name");
20
return view("release");
21
}
22
23
public actionresult dorelease()
24
{
25
if (string.isnullorempty(request.form["title"]) || string.isnullorempty(request.form["content"]))
26
{
27
if (string.isnullorempty(request.form["title"]))
28
{
29
viewdata.modelstate.addmodelerror("titlevalidator","公告标题不能为空!");
30
}
31
if (string.isnullorempty(request.form["content"]))
32
{
33
viewdata.modelstate.addmodelerror("contentvalidator", "公告内容不能为空!");
34
}
35
36
return release();
37
}
38
39
announceinfo announce = new announceinfo()
40
{
41
id = 1,
42
title = request.form["title"],
43
category = int32.parse(request.form["category"]),
44
content = request.form["content"],
45
};
46
47
iannounceservice aserv = servicebuilder.buildannounceservice();
48
aserv.release(announce);
49
50
viewdata["announce"] = announce;
51
return view("releasesucceed");
52
}
53
}
54
}
可以看到,我们的dorelease这个action方法多了不少东西。我们看多了什么:当从表单传递过来的标题或内容为空时,我们做了一定处理。注意,这个viewdata.modelstate.addmodelerror方法,它就是往我们刚才说的由html.validationmessage生成的span里加入错误信息的方法,它可以有两个参数,第一个指明哪个span,这个参数html.validationmessage中的参数是对应的。第二个参数就是要显示的信息。
相信结合视图和控制器,已经很好理解了。最后,如果标题或内容有空值的话,我们不再调用业务逻辑组件处理了,而是调用了release这个action。为什么我们不用redirect呢?因为我们要保持viewdata中的数据,刚才我们的错误信息可都放在里面的,而使用了redirect,viewdata的信息就传不过去了。
现在,我们再来发布公告。我们故意什么都不填,提交,看结果:
没有问题,我们的程序成功对标题和内容进行了完整性检测(这里就是均不能为空),在验证不通过时,返回了发布公告视图并正确显示了错误提示信息。
也许你有一个疑问,为什么第一次请求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:
1
@
page language="c#" autoeventwireup="true" codebehind="release.aspx.cs" inherits="mvcdemo.views.announce.release" %>
2
@
import namespace="mvcdemo.models.entities" %>
3
4
doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
5
6
html xmlns="http://www.w3.org/1999/xhtml" >
7
head runat="server">
8
title>title>
9
script
type="text/javascript" src="~/scripts/microsoftajax.debug.js") %>
">
10
标签:
asp.net, mvc,
asp.net mvc, 例子,
案例, net
绿色通道:好文要顶关注我收藏该文与我联系
categories:
[03]asp.net mvc
tags:
asp.net,
mvc,
asp.net mvc, 例子,
案例, net
add your comment
58 条回复
2201557
#1楼 astar
2008-11-03 23:00
回复 引用 查看
#2楼 小狼壮壮
2008-11-03 23:33
好文,拜读。
感谢楼主,好老师。
回复 引用 查看
#3楼 有容乃大
2008-11-04 09:39
这个验证(html.validationmessage)不能在客户端触发吧。感觉asp.net mvc比传统的asp.net麻烦不少,就以验证来说,传统方式只需拉一个验证控件(输入正则式)就能完成客户端和服务器端的双重验证,而这里这种验证方式真有些恶心。
本人一直关注asp.net mvc,看了不少文章,也不知道是到底对这种模式感兴趣还是在找一个让自己喜欢asp.net mvc的理由,困惑中,望大家指点!
-----------------------------------------
http://www.cnblogs.com/mrhgw/archive/2008/10/09/1307247.html
回复 引用 查看
#4楼 ohsam[未注册用户]2008-11-04 10:22
没有看到ajax的应用啊 ??
回复 引用
#5楼 cat chen
2008-11-04 10:41
封装为一个mvc的helper函数啊,这才符合mvc思维方式,rails就是这样做的。你现在相当于把jquery从mvc那里割裂开来用。
回复 引用 查看
#6楼 erererererer[未注册用户]2008-11-04 12:56
感觉没多大用途,,这种入门的文章实在是...
多弄些原理性的文章才有意思哦。
回复 引用
#7楼 龙龙ago[未注册用户]2008-11-04 16:19
服务器验证非空的这个地方,无法保持上一次的表单状态,要再做些处理,相对webform麻烦了些
正确得控制器这边代码要多两个东西
public actionresult dorelease()
{
if (string.isnullorempty(request.form["title"]) || string.isnullorempty(request.form["content"]))
{
if (string.isnullorempty(request.form["title"]))
{
viewdata.modelstate.addmodelerror("titlevalidator", "公告标题不能为空!");
}
else
{
viewdata["title"] = request.form["title"].tostring();
}
if (string.isnullorempty(request.form["content"]))
{
viewdata.modelstate.addmodelerror("contentvalidator", "公告内容不能为空!");
}
else
{
viewdata["content"] = request.form["content"].tostring();
}
return release();
}
在release.aspx这边要
mvc公告发布系统——发布公告
标题:
分类:
内容:
这样才能保持好上次的表单状态
回复 引用
#8楼[楼主] t2噬菌体
2008-11-04 19:42
@龙龙ago
原来如此。学习了!谢谢!
回复 引用 查看
#9楼[楼主] t2噬菌体
2008-11-04 19:44
@ohsam
其实在本文中我们并没有使用到ajax,而仅仅是整合了javascirpt,但是这已经足够了,因为ajax无非就是在这些javascript里包含了异步后台调用。
回复 引用 查看
#10楼[楼主] t2噬菌体
2008-11-04 19:46
@cat chen
我也是这么想的,不过后来发现这样做有些困难,似乎为了符合mvc付出的代价太大了。所以目前我还是使用分割开javascript的方式。不过微软目前正在封装这部分,目前版本中的ajaxhelper还不够强大。希望在正式版中可以看到功能强大的ajaxhelper
回复 引用 查看
#11楼 microbar2[未注册用户]2009-01-22 14:55
求救:怎么弄都运行不了!
未能从程序集“system.web.routing, version=3.5.0.0, culture=neutral, publickeytoken=31bf3856ad364e35”中加载类型“system.web.routing.stoproutinghandler”。
说明: 执行当前 web 请求期间,出现未处理的异常。请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息。
异常详细信息: system.typeloadexception: 未能从程序集“system.web.routing, version=3.5.0.0, culture=neutral, publickeytoken=31bf3856ad364e35”中加载类型“system.web.routing.stoproutinghandler”。
源错误:
行 15:public static void registerroutes(routecollection routes)
行 16:{
行 17:routes.ignoreroute("{resource}.axd/{*pathinfo}");
行 18:
行 19:routes.maproute(
源文件: e:\project\2008\mvc\mvcdemo\mvcdemo\global.asax.cs行: 17
回复 引用
#12楼[楼主] t2噬菌体
2009-01-24 21:20
@microbar2
你有没有安装asp.net mvc扩展包?
回复 引用 查看
#13楼 飞飞双双
2009-02-09 16:48
@有容乃大
在实际开发中考虑到页面布局和用户体验 验证表单一般都是用js,如果需要读取服务器数据进行验证则使用webservice或ajax
个人感觉在webforms下使用ajax比较费劲(用其它轻量级的js框架或者自己写),原因在于不可避免的要使用服务器控件,而服务器控件的id在客户端将发生变化!
mvc抛弃服务器控件,抛弃页面生存周期,抛弃事件驱动,看似费力,却更加触及web底层。架构设计时更容易实现低耦合,高聚合的原则,希望微软可以陆续提供更多的helper,相信可以吸引到更多的web程序员
回复 引用 查看
#14楼 青格儿[未注册用户]2009-02-24 11:48
asp.net mvc扩展包?这个是什么?我装了rc
那还用不用装asp.net mvc扩展包?
回复 引用
#15楼[楼主] t2噬菌体
2009-02-24 12:48
@青格儿
你装了asp.net mvc rc就可以了^_^
回复 引用 查看
#16楼 sunk
2009-03-31 00:52
一个疑问dorelease()的开始部分,判断为空为什么要进行两次判断呢?
回复 引用 查看
#17楼[楼主] t2噬菌体
2009-03-31 15:05
@sunk
外层的判断,是决定是否进入错误处理逻辑。内层的判断,是细化判断到底是title为空还是content为空。
回复 引用 查看
#18楼 shuihanyu2009-04-22 10:31
楼主,我发现一个问题呀,就是你第一次什么都不填,故意让它显示不能为空的消息,然后,再填写内容,点提交的时候,没有反应。
小菜鸟请问有什么解决办法吗?
回复 引用
#19楼 john liu
2009-05-10 22:22
@有容乃大
兄弟,就会拉控件的方式才是恶心呢。如果你对某一文本框要多个验证,同时要求,不为空,符合某一正则表达式,甚至再要求ajax方式验证。验证控件就很难完成任务。而且,如果页面上的表单元素比较多,而每个元素要需要不止一个验证,那你的页面需要多少验证控件。
回复 引用 查看
#20楼 john liu
2009-05-10 22:26
楼主的jquery水平有待提高啊,取value值直接用$("#title").val()就可以了啊。赋值直接用$("#titlevalidator").html("标题不能为空!")就可以了吧。
回复 引用 查看
#21楼 lvhejin[未注册用户]2009-05-12 15:16
顶一下
回复 引用
#22楼[楼主] t2噬菌体
2009-05-12 18:31
@john liu
呵呵,我不怎么会jquery,没大用过。
回复 引用 查看
#23楼 assuka[未注册用户]2009-05-22 11:29
照着你的列子写,到“使用asp.net ajax实现客户端数据验证”
这步的时候,调试出现问题
microsoftajax.debug.js中2935行
microsoft jscript 运行时错误: sys.argumentnullexception: value cannot be null.
parameter name: element
不知道是为什么。
回复 引用
#24楼 assuka[未注册用户]2009-05-22 14:49
@assuka
帮助楼主回答我自己。
因为在>的release页面里面
上没有id = "submit"。
所以到本篇的时候,我沿用了上一次的页面,修改时候没有加上id属性,导致调试失败。
回复 引用
#25楼 husteric[未注册用户]2009-06-11 13:28
谢谢博主,受益匪浅啊,是asp.net mvc的入门好教程
回复 引用
#26楼 寻影追梦
2009-07-01 14:10
支持,经常光顾
回复 引用 查看
#27楼 用爱用心追梦
2009-07-13 13:53
我来了!!!
回复 引用 查看
#28楼 kevin.zeng[未注册用户]2009-08-27 11:30
@龙龙ago
貌似也不能保存~试过了还是空的~不知道为什么!
回复 引用
#29楼 随风178
2009-09-23 19:04
看不懂的东西好
回复 引用 查看
#30楼 邀月
2009-10-15 13:14
不错!
回复 引用 查看
#31楼 ( ⊙ o ⊙ )[未注册用户]2009-11-05 10:53
这个jquery写的那么麻烦,不是有更简单的写法吗
回复 引用
#32楼 321111123333[未注册用户]2009-11-11 17:33
这个算ajax?????
回复 引用
#33楼[楼主] ericzhang(t2噬菌体)
2009-11-11 19:56
引用321111123333:这个算ajax?????
请注意文章中的一句话:“其实在本文中我们并没有使用到ajax,而仅仅是整合了javascirpt,但是这已经足够了,因为ajax无非就是在这些javascript里包含了异步后台调用。
”
回复 引用 查看
#34楼 cmj[未注册用户]2009-11-20 11:02
修改一下文章题目吧,确实没有用ajax,仅仅就是客户端的简单javascript验证,题目有点误导。
回复 引用
#35楼 bdnet
2009-12-03 16:39
是用博主的microsoftajax验证方式在ie下通过
但在firefox下测试,验证没通过也被提交了
firefox版本3.5.5
回复 引用 查看
#36楼 莫慌
2009-12-05 16:40
引用飞飞双双:@有容乃大
在实际开发中考虑到页面布局和用户体验 验证表单一般都是用js,如果需要读取服务器数据进行验证则使用webservice或ajax
个人感觉在webforms下使用ajax比较费劲(用其它轻量级的js框架或者自己写),原因在于不可避免的要使用服务器控件,而服务器控件的id在客户端将发生变化!
mvc抛弃服务器控件,抛弃页面生存周期,抛弃事件驱动,看似费力,却更加触及web底层。架构设计时更容易实现低耦合,高聚合的原则,希望微软可以陆续提供更多的helper,相信可以吸引到更多的web程序员
抛弃服务器控件未必就是好事。在这个例子中,为了在提交到服务器端验证且通不过时保存原来的状态,需要查询数据库(release(),得到categroys),这就增加了数据库的查询次数,而webform的服务器控件就不会有这个问题,除非这里完全用ajax。
回复 引用 查看
#37楼 itliyi
2009-12-08 21:34
请教楼主我不输入怎么都提交过去了?
服务端是 客户端也是
回复 引用 查看
#38楼 廖勇军
2009-12-23 10:46
没看到ajax啊
回复 引用 查看
#39楼 aisoon99
2010-01-04 16:08
"为什么我们不用redirect呢?因为我们要保持viewdata中的数据,刚才我们的错误信息可都放在里面的,而使用了redirect,viewdata的信息就传不过去了"-----好像使用tempdata就能保存一次数据到新的页面
回复 引用 查看
#40楼 进步的小菜
2010-04-16 15:17
学习了,感谢楼主
回复 引用 查看
#41楼 飞碟工作室
2010-05-26 15:53
教程还可以..
入门的好文章..
回复 引用 查看
#42楼 新猪猪
2010-06-21 16:46
楼主的jquery可以再简化一点,呵呵。
if($("#title").val() == "") {
$("#titlevalidator").html("标题不能为空!");
}
回复 引用 查看
#43楼 青山yoyo
2010-08-30 17:38
学习
回复 引用 查看
#44楼 牧马
2010-11-02 19:51
客户端验证弄不出来,我用的是mvc2,有影响吗?
回复 引用 查看
#45楼 staid
2010-11-26 17:30
jquery验证里面的
$("#submit").click
应该是 $("#按钮id").click,其他的挺好的。
希望继续把该系列写下去
回复 引用 查看
#46楼 stone1314
2011-03-28 23:25
学习~
回复 引用 查看
#47楼 ^懒洋洋^
2011-05-13 15:57
刷新评论列表刷新页面返回页首
发表评论
昵称:
[登录]
[注册]
主页:
邮箱:(仅博主可见)
验证码:看不清。
换一个
评论内容:
记住我的昵称和主页
-->
登录注册
[使用ctrl+enter键快速提交评论]
0
1325840
enbvet3uilm=
首页博问闪存新闻园子招聘知识库
最新it新闻:
·android平台12月广告浏览份额51.6% 超越ios
·测试版ios源代码显示ipad 3或将支持siri
·斯蒂芬·霍金的新电脑
·京东商城2.95亿竞得北京商业地一块
·美报业巨头合作facebook谷歌 传媒重视网络网络
»
更多新闻...
最新知识库文章:
·javascript 面向对象编程
·持续集成之“everything is code”
·持续集成之“软件自我识别”
·持续集成之戏说check-in dance
·什么是闭包。
我的理解
»
更多知识库文章...
china-pub 2011秋季教材巡展
china-pub 计算机绝版图书按需印刷服务
======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定
这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第四篇：传递表单数据
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第四篇：传递表单数据
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第四篇：传递表单数据
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第三篇：ASP.NET MVC全局观
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第四篇：传递表单数据
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第七篇：闲话ASP.NET MVC
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第七篇：闲话ASP.NET MVC
- ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第七篇：闲话ASP.NET MVC