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" })%> &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#userlun