MVC4 AJAX的简单实用方法

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

　　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" })%> &nbsp;<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或者其它的控件。