[翻译] AJAX Panels with ASP.NET MVC

AJAX Panels with ASP.NET MVC

原文地址：http://www.singingeels.com/Articles/AJAX_Panels_with_ASPNET_MVC.aspx

原著作者：Timothy Khouri

翻译：Anders Liu

摘要：ASP.NET MVC Preview 4带来了一些AJAX支持，能够适应MVC设计模式的本质。这篇文章向你展示了在ASP.NET MVC中使用“延迟加载AJAX面板”是如何使其变得不可思议的简单。

ASP.NET MVC Preview 4带来了一些AJAX支持，能够适应MVC设计模式的本质。这篇文章向你展示了在ASP.NET MVC中使用“延迟加载AJAX面板”是如何使其变得不可思议的简单。

首先，“ASP.NET AJAX”的问题

由于“Web Froms”（传统的ASP.NET）是基于同时包含了表现层和后台代码的“页面”的，所以ASP.NET AJAX并没有像它本应该的那样光芒四射。很多步入AJAX领域的ASP.NET开发者只是向页面中随意地放置一些“UpdatePanel”来使其“看上去”支持AJAX。实际上，这只是防止了页面的“闪烁”，而页面还是进行了完整的回发，并且要经历整个页面的生存周期。

这并不是说这些问题是ASP.NET AJAX的责任，而是由是否需要使用完全的AJAX的不同心态造成的。公平地讲，有比UpdatePanel控件更好的ASP.NET AJAX选择。包括：

• Page Methods——直接调用位于后台代码中（服务器上）的方法。
• Web Services——调用位于应用程序的Web Services中的方法。

这两种选择比使用UpdatePanel“好”在无需重新加载整个页面，只需向客户端呈现一部分HTML即可。但它们“坏”在你需要使用JavaScript实现所有的表现逻辑（不用别人说也知道这是很恐怖的）。

MVC AJAX给你转机

如果你能得到和使用UpdatePanel一样的ASP.NET呈现能力，并且所有的代码都能分离开，性能也和访问Web Services一样，你会不吃惊吗？来吧，一起感谢MVC设计模式的本质吧——还要感谢ASP.NET MVC——你能！

我们来看一下现实世界中创建“延迟加载”AJAX面板的问题。假设我们有一个Web应用程序，用于向客户端发布一些巨大的报表。如果我们不使用AJAX，每个报表都会增加页面的整体加载时间。因此，我们将异步地请求每个报表（使用AJAX），是的页面自身能够立即加载，而每个报表都会在运行完毕后显示出来。

我们将向页面中添加4个“报表”。每个报表都要运行3到5秒。因此如果我们使用传统的Web Forms，这个页面将要加载12到20秒。但由于有了MVC，我们可以将加载时间降低到5秒，并且页面看上去仍然很漂亮。

注意

有很重要的一点需要注意。上面提到的性能收益会受到一些因素的限制。你必须考虑到服务器要处理所有这些请求，这会使最终的结果有所下降。另外，很多浏览器只允许2个并发的下载，因此对于上面的例子，你节省的时间会降低约50%。

使用Ajax.Form方法

MVC Preview 4在“this.Ajax”字段中为所有MVC页面和MVC用户控件添加了一些方法。“Ajax.Form”方法和“Html.Form”方法类似，但它会添加一些JavaScript来帮助确保可以异步地发送请求。另外，这里还能为应该返回的结果定义一个HTML元素。

例如，如果你想POST诸如“发送邮件”这样的操作，并希望服务器能将“Your email has been sent”这样的文字放在一个ID是“resultDiv”的<div>内，你需要这样做：

<div id="resultDiv"></div> <% using (Ajax.Form("SendMail", new AjaxOptions { UpdateTargetId = "resultDiv" })) { %> <!-- Your form elements here... --> <% } %>

上面的代码会生成下面的<form>标签：

<form action="/Home/SendMail" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, { insertionMode: 0, updateTargetId: 'resultDiv' }); return false;"> <!-- Your form elements here... --> </form>

和我们前面提到的一样，这非常像“Html.Form”方法生成的form，但你也能清楚地看到“onsubmit”方法被替换为使用AJAX来发送请求，而且你也能看到“resultDiv”参数被传递到服务器了。

服务器会和平常一样接收这个请求，它也会和平常一样发送请求的数据。这个魔术发生在ASP.NET MVC内部。从服务器传回的响应将会放在我们的<div>中，页面的其他部分不会改变。

这是真的，非常简单的AJAX。然而，还必须向你指出一个问题，该表单只在用户明确地点击了提交按钮（<input type="submit">）“提交”该表单时，它才会与服务器联系。为了解决这个问题，我们需要添加一行JavaScript使其能够自动提交表单，异步地请求报表。我还对“Form”方法进行了些微改动，添加了一个HTML ID属性，以便我能在JavaScript中访问它。

现在我们新的代码看起来是下面这样：

<div id="resultDiv"></div> <% using (Ajax.Form("ReportOne", null, new AjaxOptions { UpdateTargetId = "resultOne" }, new { id="reportFormOne" })) { } %> <script type="text/javascript"> $get("reportFormOne").onsubmit(); </script>

提示

如果我直接调用“Sys.Mvc.AsyncForm.handleSubmit”方法，上面的代码还能更简单些。但我选择让MVC为我创建表单，然后通过JavaScript访问它，因此如果JavaScript方法将来发生了变化，我依然能够使用。

看看结果吧！

使用上面的方法，再加上我从Internet上弄来的“loading gif”，我们就有了这样一个页面，它可以动态地（并且是异步地）加载报表，并在可用的时候立即显示给用户。下面是最终结果的一些截图：

这里是上面的项目的源代码。记住，该项目是在ASP.NET MVC Preview 4下编写和编译的，你下载的时候可能已经过时了（译注：真希望它赶紧过时）：

此处下载源代码：SingingEels_MVC_Asyncronous_AJAX_Panels.zip。