浅谈ASP.NET MVC框架

浅谈ASP.NET MVC框架2010-12-20服务器端的实现原理并不复杂，不过作为解决方案的另一个关键部分，如何在客户端触发一个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＞