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来实现了。
页面文件:
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> |
在来看一下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或者其它的控件。