浅谈ASP.NET MVC框架

开发 后端
本文介绍ASP.NET MVC框架,面向ASP.NET MVC特有的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中):

  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应用程序。这真是一个令人意外的发现。

【编辑推荐】

  1. ASP.NET的AsyncState参数
  2. ASP.NET MVC执行异步Action
  3. 概述ASP.NET MVC框架
  4. ASP.NET MVC中使用UpdataModel方法
  5. ASP.NET MVC的Action方法
责任编辑:佚名 来源: IT专家网
相关推荐

2009-07-23 15:44:39

ASP.NET MVC

2009-07-24 13:20:44

MVC框架ASP.NET

2009-07-22 10:09:59

ASP.NET MVC

2009-07-20 10:53:59

ASP.NET MVC

2009-12-07 09:23:05

ASP.NET MVC

2009-07-22 13:08:55

拯救UpdatePanASP.NET MVC

2009-07-22 10:34:37

ActionInvokASP.NET MVC

2010-06-23 15:44:03

ASP.NET MVC

2009-07-20 12:42:04

MvcContrib.ASP.NET MVC

2014-06-30 09:22:38

ASP.NETBootstrap

2009-03-13 10:58:48

ASP.NetMVC框架编程

2009-07-20 12:59:53

ASP.NET MVCASP.NET框架的功

2011-01-28 09:45:29

ASP.NET MVC

2009-12-21 10:05:10

ASP.NET MVC

2009-07-31 12:43:59

ASP.NET MVC

2009-07-20 15:51:40

FubuMVC核心框架ASP.NET MVC

2009-06-01 10:23:31

asp.net mvcasp.net mvc.net mvc框架

2009-07-24 10:55:00

asp.net mvc

2009-07-24 10:52:42

ASP.NET ISA

2009-07-22 16:11:43

ASP.NET AJA
点赞
收藏

51CTO技术栈公众号