快速业务通道

ASP.NET MVC案例教程(基于ASP.NET MVC beta)—第五篇:MVC整合Ajax

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-05-20
ValidationMessage生成的了,而是普通的span。

下面我 们在Scripts目录下新建MicrosoftAjaxValidate.js文件。

MicrosoftAjaxValidate.js:

1Sys.Application.add_init (onPageInit);
2
3function onPageInit() {
4  $addHandler($get("Submit"), "click", validate);
5}
6
7function validate() {
8  if ($get("Title").value == "" || $get ("Content").value == "") {
9    if ($get("Title").value == "") {
10       $get("TitleValidator").innerHTML = "标题不能为空!";
11    }
12    if ($get ("Content").value == "") {
13      $get("ContentValidator").innerHTML = "内容不 能为空!";
14    }
15
16    return false;
17  }
18
19  return true;
20}

关于这段代码我不多说了,对ASP.NET AJAX有兴趣的可以参看《ASP.NET AJAX客户端编程之旅》系列文章。

现在运行, 将标题和内容留空,提交。OK!效果和刚才很像,只不过这次是在客户端验证了,并没有提交到服务器端。

整合JQuery

下面我 们再使用JQuery实现这个功能。

其实看懂上面的实现后,我想你已经想到怎么整合JQuery了,无非也是引入相应库和js文件,然后使用 JQuery编写验证代码。修改后的Release.aspx就没必要看了,无非是引入Scripts目录下的JQuery库,然后再引入一个自定义验证js文件,我们 姑且叫JQueryValidate.js吧。

下面在Scripts目录下新建JQueryValidate.js,代码如下。

JQueryValidate.js:

1$(document).ready(function(){
2  $("#Submit").click(function() {
3    if ($("#Title").attr("value") == "" || $("#Content").attr ("value") == "") {
4      if ($("#Title").attr("value") == "") {
5        $("#TitleValidator").attr("innerHTML", "标题不能为空!");
6       }
7      if ($("#Content").attr("value") == "") {
8         $("#ContentValidator").attr("innerHTML", "内容不能为空!");
9      }
10
11       return false;
12    }
13
14    return true;
15  }
16  );
17}
18);

小结

从本文可以看出,在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这样优秀的框架。

这篇文章先到这里,下一篇中我们讨论一下拦截器 的使用。^_^

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号