UpdatePanel for ASP.NET MVC的尝试

作者佚名技术来源 NET编程浏览发布时间 2012-05-20

端的数据，并且更新页面中的相应区域。

很明显，MvcAjaxPanel的工作原理与UpdatePanel有颇多相似之处，也做到了一定程度上的透明。而且与Nikhil的解决方案相比，一个非常重要的优势就是可以一次更新页面中的多个区域——其实这也就是UpdatePanel的特性之一。而且这种对Controller透明的做法又有一个天然的特点，那就是能够轻松地在不支持 AJAX的浏览器中使用传统的方式切换页面。

服务器端的实现原理并不复杂，不过作为解决方案的另一个关键部分，如何在客户端触发一个AJAX提交也是一个值得思考的话题。UpdatePanel的方式可谓“全自动”：页面加载时将会把服务器端的Trigger信息输出至客户端，然后在客户端截获form的提交事件，并通过UniqueID或DOM结构等方式来判断这次提交是否该转化为AJAX方式。不过在一个ASP.NET MVC页面中几乎不会出现产生PostBack的元素，相反会有大量的普通链接，它们才是AJAX更新的主要截获目标。

为此我提供了一些 JavaScript代码，截获一个链接原本的目标地址并将其转化为一个AJAX请求。我在这里通过示例中的代码来展示这种使用方式（这个示例源于Brad Abrams提供的 ASP.NET MVC示例，不过我舍弃了Northwind数据库与Entity Framework，取而代之的是XML数据以及自定义的简单Model。此外，我也将其移植到ASP.NET MVC框架的0416 Build中）：

<%　foreach (var category in this.ProductCategories) 　　{ %> 　　　　<li> 　　　　　　<%= Html.ActionLink<ProductsController>( 　　　　　　　　　　c => c.List(category, 1), 　　　　　　　　　　 category, 　　　　　　　　　　new { onclick = "mvcAjax.get (this, event)" })%> 　　　　</li><% 　　} % >

这段代码来自分类列表页。与AJAX改进之前的代码相比，唯一的区别就是额外指定了元素的onclick事件（加粗部分）。在onclick事件执行中，这个链接默认的跳转行为将被取消，取而代之的是一个AJAX请求，请求的目标便是ProductsController中名为List的Action。

我们可以使用上面的方式应对普通链接，那么又该如何将一个客户端from的提交行为也变成AJAX操作呢？以下依旧是示例中的代码：

<form method="post" 　　action="<%= Url.Action ("Update", new { id = this.Product.ProductID }) % >" 　　onsubmit="mvcAjax.submit(this, event);"> 　　<table> 　　　　<tr> 　　　　　　<td>Name:</td> 　　　　　　 <td><%= Html.TextBox("Name", this.Product.Name) % ></td> 　　　　</tr> 　　　　... 　　 </table> 　　<input type="submit" value="Save" /> </form>

在截获了 form的submit事件之后，客户端将会收集该form中的所有input、select等值，组成一个请求的body，并且以HTTP POST的方式发出一个AJAX请求。余下的事情和之前就没有什么区别了。

与UpdatePanel相比，MvcAjaxPanel的客户端截获方式可谓“纯手工”，但是我并不认为这会造成什么问题。ASP.NET MVC强调的就是职责分离，而这种分离并不仅仅体现在代码上，也体现在开发人员的职责上。在开发ASP.NET MVC应用程序时，负责View的是前端开发工程师，对他们来说JavaScript与AJAX可谓是再熟悉不过的技术。在合时的地方手动编写一些 JavaScript调用反而会让他们得到无比的自由性。例如在之前的代码示例中，调用mvcAjax.get或mvcAjax.submit方法时完全可以在前后自由地加入额外操作或者条件判断。这就不会像使用

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: ASP.NET MVC框架下一篇: ArrayList的动态扩展

关于UpdatePanel for ASP.NET MVC的尝试的所有评论

随机推荐