事实证明Ajax的世界更需要ASP.NET MVC
2011-02-08 12:43
435 查看
/article/4583816.html
真正走进ASP.NET MVC的世界,才知道它的精彩。
“抛弃WebService,在.NET4中用 jQuery 调用 WCF”——原来抛弃WebService之后,还可以用jQuery调用ASP.NET MVC的Controller。
“Ajax为主的应用不需要ASP.NET MVC”,原来Ajax的世界更需要ASP.NET MVC。
曾经天真的想法,在实践中证明了它的天真,但在从天真到事实的过程中,得到的是成长。
下面就谈谈我是如何认识到这个的。相比于结论,其中的过程更重要。
还是以之前文章中的博客园站内短消息功能(显示当前用户短消息列表)为例,开始用的是jQuery插件Templates进行列表数据绑定,后来遇到了两个问题:
1) 在绑定时需要根据条件判断生成不同的元素,比如用户发过来的短消息,发件人显示为链接,如果是系统通知,则显示为文本。Templates对这样的操作处理起来不是很方便;
2) 绑定后的数据无法在服务端重用。有时从搜索引擎友好或者用户体验的角度,在页面第一次加载时,不用ajax,在页面加载后点击刷新或分页链接时,才使用ajax。这样就要在服务端与客户端分别维护数据绑定操作。
也就是说原来服务端返回的是实体类对象列表,现在要返回的是将数据与Html组装起来的字符串。
1. 开始我们考虑的是一种丑陋的方法,用StringBuilder进行字符串拼接生成数据绑定结果,服务器端WCF服务中的代码如下:
显然这种方法易出错,维护性差。
2. 接着我们考虑了第二种方法(参考自Render User Control as String Template),通过Web User Control生成字符串。WCF服务中的代码如下:
由于MsgListControl.ascx的类型是动态编译生成的,所以无法通过强制类型转换将control转换为MsgListControl类型,然后传递数据给它。
这里需要通过一个另外的IRenderable<T>接口来实现数据的绑定,MsgListControl实现了这个接口,代码如下:
在WCF服务中通过调用接口中的PopulateData方法进行数据的绑定。
这个方法增加了额外的接口,显得有些复杂。
3. 后来我们想到了ASP.NET MVC,虽然不熟悉,但要尝试一下,看能否更好地解决这个问题。
于是,上ASP.NET MVC 3,用Razor,咱们也MVC一把。
应用场景:在现有的VS2010 Web Site项目中应用ASP.NET MVC 3。MsgController收到请求后,由Inbox(一个Action)将包含短消息列表的整个页面视图返回给客户端;当用户点击页面的刷新或者分页链接时,通过Ajax发起POST请求以获取短消息列表,MsgController收到请求后,由List(一个Action)将短消息列表的视图返回给客户端。
期望的效果:短消息列表视图能重用,Inbox与List使用的是同一个视图。
一开始遇到了两个小问题:
a) MapRoute配置之后,访问出现"HTTP Error 404.0 - Not Found"错误。原因是访问的网址没有文件名,未走ASP.NET管线。解决方法是在web.config的system.webServer中加上以下的配置:
b) 继续访问,出现“The resource cannot be found.”错误。解决方法:由于用的是Web Site项目,要将Controllers文件夹移至App_Code。
然后进入MVC相关代码编写,先从Ajax调用部分开始。
Controller的代码如下:
需要注意的就一个地方:[HttpPost],既然是Ajax调用,当然要响应POST请求。
View的代码(MsgList.cshtml)如下:
比在.ascx中写起来方便多了。
客户端js调用代码如下:
需要注意的是两个地方(因为服务器端Controller返回的不是json格式的数据):
a) dataType不要用json,用jQuery默认的就行,如果指定的话,就用plain/text;
b) 返回数据就在data中,不要通过data.d获取。
这样,用ASP.NET MVC就轻松搞定Ajax调用,比之前的WCF, StringBuider, .ascx都要方便。
原来在ASP.NET MVC中使用Ajax如此方便,完全可以取代以前用的WCF中转站。
解决了Ajax的问题,接着处理整个页面的显示。
在页面的View中直接重用刚才Ajax所用的View就行了,示例代码如下:
View(Inbox.cshtml):
Control:
搞定!真的很方便!想要的解决方案就是它--ASP.NET MVC!
在这里为我的错误观点“Ajax为主的应用不需要ASP.NET MVC”向大家道歉!请大家谅解!
好好学习,不进则退!
真正走进ASP.NET MVC的世界,才知道它的精彩。
“抛弃WebService,在.NET4中用 jQuery 调用 WCF”——原来抛弃WebService之后,还可以用jQuery调用ASP.NET MVC的Controller。
“Ajax为主的应用不需要ASP.NET MVC”,原来Ajax的世界更需要ASP.NET MVC。
曾经天真的想法,在实践中证明了它的天真,但在从天真到事实的过程中,得到的是成长。
下面就谈谈我是如何认识到这个的。相比于结论,其中的过程更重要。
还是以之前文章中的博客园站内短消息功能(显示当前用户短消息列表)为例,开始用的是jQuery插件Templates进行列表数据绑定,后来遇到了两个问题:
1) 在绑定时需要根据条件判断生成不同的元素,比如用户发过来的短消息,发件人显示为链接,如果是系统通知,则显示为文本。Templates对这样的操作处理起来不是很方便;
2) 绑定后的数据无法在服务端重用。有时从搜索引擎友好或者用户体验的角度,在页面第一次加载时,不用ajax,在页面加载后点击刷新或分页链接时,才使用ajax。这样就要在服务端与客户端分别维护数据绑定操作。
也就是说原来服务端返回的是实体类对象列表,现在要返回的是将数据与Html组装起来的字符串。
1. 开始我们考虑的是一种丑陋的方法,用StringBuilder进行字符串拼接生成数据绑定结果,服务器端WCF服务中的代码如下:
显然这种方法易出错,维护性差。
2. 接着我们考虑了第二种方法(参考自Render User Control as String Template),通过Web User Control生成字符串。WCF服务中的代码如下:
Page page = new Page(); Control control = page.LoadControl("~/Controls/MsgListControl.ascx"); ((IRenderable<List<SiteMsg>>)control).PopulateData(siteMsgList); StringBuilder sb = new StringBuilder(); using (StringWriter sw = new StringWriter(sb)) { using (HtmlTextWriter htw = new HtmlTextWriter(sw)) { control.RenderControl(htw); return sb.ToString(); } }
由于MsgListControl.ascx的类型是动态编译生成的,所以无法通过强制类型转换将control转换为MsgListControl类型,然后传递数据给它。
这里需要通过一个另外的IRenderable<T>接口来实现数据的绑定,MsgListControl实现了这个接口,代码如下:
public partial class MsgListControl : UserControl, IRenderable<List<SiteMsg>> { public void PopulateData(List<SiteMsg> siteMsgList) { rptMsgList.DataSource = siteMsgList; rptMsgList.DataBind(); } } public interface IRenderable<T> { void PopulateData(T data); }
在WCF服务中通过调用接口中的PopulateData方法进行数据的绑定。
这个方法增加了额外的接口,显得有些复杂。
3. 后来我们想到了ASP.NET MVC,虽然不熟悉,但要尝试一下,看能否更好地解决这个问题。
于是,上ASP.NET MVC 3,用Razor,咱们也MVC一把。
应用场景:在现有的VS2010 Web Site项目中应用ASP.NET MVC 3。MsgController收到请求后,由Inbox(一个Action)将包含短消息列表的整个页面视图返回给客户端;当用户点击页面的刷新或者分页链接时,通过Ajax发起POST请求以获取短消息列表,MsgController收到请求后,由List(一个Action)将短消息列表的视图返回给客户端。
期望的效果:短消息列表视图能重用,Inbox与List使用的是同一个视图。
一开始遇到了两个小问题:
a) MapRoute配置之后,访问出现"HTTP Error 404.0 - Not Found"错误。原因是访问的网址没有文件名,未走ASP.NET管线。解决方法是在web.config的system.webServer中加上以下的配置:
<validation validateIntegratedModeConfiguration="false" /> <modules runAllManagedModulesForAllRequests="true" />
b) 继续访问,出现“The resource cannot be found.”错误。解决方法:由于用的是Web Site项目,要将Controllers文件夹移至App_Code。
然后进入MVC相关代码编写,先从Ajax调用部分开始。
Controller的代码如下:
public class MsgController : Controller { [HttpPost] public ActionResult List(SiteMsgQuery msgQuery) { List<SiteMsg> siteMsgList = GetInboxMsgList(msgQuery); return View("MsgList", siteMsgList); } }
需要注意的就一个地方:[HttpPost],既然是Ajax调用,当然要响应POST请求。
View的代码(MsgList.cshtml)如下:
@using CNBlogs.UcHome.ExternalService.MsgWcfService @model List<SiteMsg> @foreach(SiteMsg msg in Model){ <div class="msg_item"> <div class="msg_sender">@msg.SenderName</div> <div class="msg_title"><a href='/msg/item/@msg.id/'>@msg.Subject</a></div> <div class="msg_sendtime">@msg.SendTime.ToString("yyyy-MM-dd HH:mm")</div> </div> }
比在.ascx中写起来方便多了。
客户端js调用代码如下:
function GetMsgList(pageIndex, pageSize) { var msgQuery = {} msgQuery.PageIndex = pageIndex; msgQuery.PageSize = pageSize; $.ajaxSettings.dataType = 'plain/text';//不要用json $.ajaxSettings.url = '/msg/list'; $.ajaxSettings.data = '{"msgQuery":' + JSON.stringify(msgQuery) + '}'; $.ajaxSettings.success = function (data) { $("#msg_list").html(data); }; $.ajax(); }
需要注意的是两个地方(因为服务器端Controller返回的不是json格式的数据):
a) dataType不要用json,用jQuery默认的就行,如果指定的话,就用plain/text;
b) 返回数据就在data中,不要通过data.d获取。
这样,用ASP.NET MVC就轻松搞定Ajax调用,比之前的WCF, StringBuider, .ascx都要方便。
原来在ASP.NET MVC中使用Ajax如此方便,完全可以取代以前用的WCF中转站。
解决了Ajax的问题,接着处理整个页面的显示。
在页面的View中直接重用刚才Ajax所用的View就行了,示例代码如下:
View(Inbox.cshtml):
<!DOCTYPE html> <html> <head> <title></title> </head> <body> @Html.Partial("MsgList") </body> </html>
Control:
public class MsgController : Controller { public ActionResult Inbox() { SiteMsgQuery msgQuery = new SiteMsgQuery() { PageIndex = 1, PageSize = 30 }; List<SiteMsg> siteMsgList = GetInboxMsgList(msgQuery); return View("Inbox", siteMsgList); } }
搞定!真的很方便!想要的解决方案就是它--ASP.NET MVC!
在这里为我的错误观点“Ajax为主的应用不需要ASP.NET MVC”向大家道歉!请大家谅解!
好好学习,不进则退!
相关文章推荐
- 事实证明Ajax的世界更需要ASP.NET MVC
- 实证明Ajax的世界更需要ASP.NET MVC
- asp.net mvc working with ajax
- ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第五篇:MVC整合Ajax
- ASP.NET MVC中使用AJAX(XMLHttpRequest、Microsoft AJAX Library......)
- ASP.NET MVC关于Ajax以及Jquery的无限级联动
- Asp.net mvc 2中使用Ajax的三种方式
- asp.net mvc Ajax.BeginForm不能异步刷新,或转到新页面,或页面还是刷新了,的原因(或解决办法)
- Asp.net Mvc Ajax.BeginForm提交表单
- 关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案
- 关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案
- ASP.NET MVC 4 Ajax上传文件
- Asp.net MVC + JQuery调用Ajax(1)
- Asp.net mvc +Ajax +Extjs+NHibernate 系列之单元测试
- 【Scott推荐】12月8日链接篇: ASP.NET, ASP.NET AJAX, ASP.NET MVC, .NET, VS 2008
- 使用Ajax更新ASP.Net MVC项目中的报表对象
- 使用Ajax更新ASP.Net MVC项目中的报表对象方法
- ASP.NET MVC如何使用Ajax的辅助方法
- ASP.NET MVC如何使用Ajax的辅助方法
- ASP.NET MVC中使用ASP.NET AJAX异步访问WebService