ASP.NET MVC 之 AJAX

2012 年 12 月 5 日9840

  本文的例子基于Asp.Net MVC Preview 3,并采用了jQuery完成客户端的JavaScript功能。

  之前的两篇文章粗粗的对Asp.Net MVC做了介绍。这里强烈推荐一个网站,有兴趣的朋友可以看这里。这是Rob Conery的个人网站,他采用了Asp.Net MVC做了一个Demo, 不仅在codeplex上提供了这个项目的源代码,还提供了15个视频,这些视频的内容包括从项目的构思、到设计、再到实现和重构的一个完整的过程。

  ASP.NET Web Form下的AJAX

  在传统的Asp.Net下,如果不使用Asp.Net Ajax或者如Ajax.Net此类第三方的框架,就需要一个空白的页面,并且在此页面的Page_Load方法中完成所有的服务器端的操作,通过Response将数据传回客户端,提交给JavaScript来处理。各人认为,这种方法的一个不好的地方就是一个页面只能完成一项功能,即使这个功能再简单。

  ASP.NET MVC下的AJAX

  在Asp.Net MVC中,每一个Request都被route到一个Controller下的Action来处理,即一个Controller Class的一个方法。因此,如果在Action方法中完成业务逻辑,并把需要回传的数据写回到Response中,在客户端再由JavaScript来处理这些回传的数据,相信也能实现AJAX。基于这个想法,做了一个小小的Demo,实现了国服.net mvc下的ajax

  为了方便起见,客户端JavaScript的功能就通过jQuery来实现了。

  页面文件Html Code:

1<h2>Lunch Tracker List</h2>
2<hr />
3<!--<% using( Html.Form<LunchController>( lc => lc.Search(), FormMethod.Post )) { %>-->
4<form>
5 Choose User:<%= Html.DropDownList("Users", new SelectList(ViewData.Model.Users, "ID", "UserName"), new { id = "userName" })%> <input type="button" value="Show All" />
6</form>
7<!--<%} %>-->
8<br />
9<p>
10
11</p>
12<script type="text/javascript">
13 $(document).ready(
14 function()
15 {
16 $("#btnSearchLunch").click(function()
17 {
18 var userName = $("#userName").val();
19 $.get("/Lunch/SearchUserAjax", { name:userName }, function(data)
20 {
21 $("p#userlunchlist").empty();
22 $("p#userlunchlist").append(data);
23 $("p#userlunchlist table").show("slow");
24 });
25 });
26 }
27 );
28</script>

  其中的$(document).ready(…..)是jQuery下的JavaScript实现,有兴趣的朋友可以看看jQuery官网和中文社区。

本文导航:

·ASP.NET Web Form下的AJAX

·Controller中的对应的Action方法

0 0