[MVC]ASP.NET MVC之AJAX

baacloud免费翻墙vpn注册使用

本文的例子基于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来实现了。

页面文件:


 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<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

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏