ASP.NET MVC之AJAX

     本文的例子基于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，实现了ASP.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 id="UsersForm">
   5 Choose User:<%= Html.DropDownList("Users", new SelectList(ViewData.Model.Users, "ID", "UserName"), new { id = "userName" })%>  <input type="button" id="btnSearchLunch" value="Show All" />
   6</form>
   7<!--<%} %>-->
   8<br />
   9<p id="userlunchlist">
  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官网和中文社区。
  
  
  
  在来看一下Controller中的对应的Action方法：
  
  
   1 public void SearchUserAjax()
   2 {
   3 string uerid = Request["name"];
   4
   5 List<UserLunchList> lunchs = (
   6 from userlunch in repository.UserLunchLists.ToList()
   7 where userlunch.UserID == int.Parse(uerid)
   8 select userlunch
   9 ).ToList();
  10 StringBuilder sb = new StringBuilder();
  11 sb.Append("<table id='LunchList' style='display:none'><tr><th>User</th><th>Time</th><th>Price</th></tr>");
  12 foreach (UserLunchList lunch in lunchs)
  13 {
  14 sb.Append("<tr><td>" + lunch.User.UserName + "</td><td>" + lunch.Time.ToShortDateString() + "</td><td>" + lunch.Cost + "</td></tr>");
  15 }
  16 sb.Append("</table>");
  17 Response.ContentType = "text/HTML";
  18 Response.Write(sb.ToString());
  19 }
  
  
  说穿了很简单，就是把想要的数据直接写到Response中就可以了，这里为了方便起见，就是写好了Table的格式。有一个地方需要注意的就是这个语句
  
  Response.ContentType = "text/HTML" 很重要，它告知JavaScript以何种格式来处理Response中的数据。
  
  
  
  核心内容就这么简单，呵呵。
  
  如果觉得写JavaScript代码烦的话，可以使用extension方法，自定一个HTML.Form或者其它的控件。
  
  Sample Code
  
  http://www.cnblogs.com/Files/jun1st/AjaxInMVC.rar