惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Engineering at Meta
Engineering at Meta
G
Google Developers Blog
WordPress大学
WordPress大学
M
MIT News - Artificial intelligence
D
DataBreaches.Net
云风的 BLOG
云风的 BLOG
爱范儿
爱范儿
Microsoft Security Blog
Microsoft Security Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Blog — PlanetScale
Blog — PlanetScale
T
Tailwind CSS Blog
S
SegmentFault 最新的问题
阮一峰的网络日志
阮一峰的网络日志
博客园 - 三生石上(FineUI控件)
酷 壳 – CoolShell
酷 壳 – CoolShell
Recent Announcements
Recent Announcements
T
The Blog of Author Tim Ferriss
I
InfoQ
MyScale Blog
MyScale Blog
V
V2EX
B
Blog
罗磊的独立博客
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More

博客园 - Jun1st

Application之间共享Master Page ASP.NET AJAX 4的Client-Side Template和DataView ASP.NET AJAX 4的Client-Side Template和DataView 体验ASP.NET4之ClientID 体验ASP.NET 4之URL Routing 使用Extension Methods来使IDataReader更加方便 Custom WCF Configuration File USE HttpRuntime.Cache OVER HttpContext.Current.Cache Make Asynchronous Calls from Page IIS and VS Embedded Local Web Server Integrate jQuery with ASP.NET Data Controls Tech-Ed 2008 上海 ASP.NET MVC的分页和导航 LINQ and Pipeline Pattern Why Would a .Net Programmer Learn Ruby On Rails(翻译) Asp.Net MVC---Walkthrough Asp.Net MVC 入门篇——Overview Asp.Net 2.0之SqlCacheDependency Security Basics and ASP.NET Support(翻译)
ASP.NET MVC之AJAX
Jun1st · 2008-07-02 · via 博客园 - Jun1st

2008-07-02 00:31  Jun1st  阅读(3436)  评论()    收藏  举报

本文的例子基于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

其中的$(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