软件开发培训班 >> 编程开发 >> ASPNET


浅谈ASP.NET MVC框架

　　本文标签：ASP.NET MVC框架

　　服务器端的实现原理并不复杂，不过作为解决方案的另一个关键部分，如何在客户端触发一个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中）：

  1. ＜%foreach(varcategoryinthis.ProductCategories)  
  2. {%＞  
  3. ＜li＞  
  4. ＜%=Html.ActionLink＜ProductsController＞(  
  5. c=＞c.List(category,1),  
  6. category,  
  7. new{onclick="mvcAjax.get(this,event)"})%＞  
  8. ＜/li＞＜%  
  9. }%＞ 

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

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

  1. ＜formmethod="post" 
  2. action="＜%=Url.Action("Update",new{id=this.Product.ProductID})%＞" 
  3. onsubmit="mvcAjax.submit(this,event);"＞  
  4.  
  5. ＜table＞  
  6. ＜tr＞  
  7. ＜td＞Name:＜/td＞  
  8. ＜td＞＜%=Html.TextBox("Name",this.Product.Name)%＞＜/td＞  
  9. ＜/tr＞  
  10. ...  
  11. ＜/table＞  
  12.  
  13. ＜inputtype="submit"value="Save"/＞  
  14. ＜/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方法时完全可以在前后自由地加入额外操作或者条件判断  。这就不会像使用UpdatePanel时，如果需要使用JavaScript提交一个AJAX更新，还需要借助不登大雅之堂的trick  。

　　也正因为如此，Nikhil提出的解决方案非常不错，它能够和前台开发人员的自定义逻辑进行灵活地结合  。此外，通过阅读ASP.NET MVC框架0416 Build的代码，我发现在新版本的ASP.NET MVC中似乎将会内置这种AJAX解决方案了——不过这也的确符合微软的一贯做法，不是吗？

　　这个AJAX解决方案原型的使用方式和工作原理已经描述完了，如果您对其具体实现感兴趣，或者想亲自尝试一下，可以下载文章末尾的附件  。附件中的解决方案包含三个项目，MvcAjax为提供MvcAjaxPanel的项目，而MvcWebApp是一个普通的ASP.NET MVC示例程序，而MvcAjaxWebApp自然就是添加AJAX效果之后的结果了  。在示例中，我还在Master Page中定义的菜单（即页面左侧的菜单）里显示了一块当前时间，这是为了体现MvcAjaxPanel的“一次提交，多处更新”的特点  。

　　不过需要强调的是，这仅仅是个原型  。或者说这只是一种实现上尝试，在很多细节方面并没有作太多追求  。如果要成为一个完善的AJAX解决方案，还需要作大量的改进  。例如：

　　提供一些客户端的hook供前台开发人员使用（如提交前、接受后、或者处理一个提交还没有返回，客户端就发起另一个请求的情况等等）  。

　　更强大的功能，更好的开发体验（如客户端触发机制）

　　异常处理

　　支持脚本

　　支持跳转（Redirection）

　　此外，作为面向ASP.NET MVC特有的AJAX解决方案，也有一些额外的问题需要考虑  。最典型的问题之一就是在使用ASP.NET MVC时很少使用模板控件，而更多的使用页面中的循环，那么如何让MvcAjaxPanel在循环内容生效？我也产生过一些想法，但是如果要真正确定下来最终的实现方式，很多东西还需要进一步思考  。如果您对于这个AJAX解决方案有什么建议或其他任何想法，也请尽快告诉我  。

　　最后再说一件有趣的事情：在我实现了这个原型之后的某一天，忽然意识到这个控件似乎不光可以为ASP.NET MVC框架使用，也能够用于普通的WebForms应用程序  。这真是一个令人意外的发现  。