[MVC]ASP.Net MVC Preview4的AJAX支持

原文地址: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 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>内,你需要这样做:

  1. <div id="resultDiv"></div>  
  2. <% using (Ajax.Form("SendMail", new AjaxOptions { UpdateTargetId = "resultDiv" })) { %>  
  3.    <!– Your form elements here… –>  
  4. <% } %>  

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

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

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

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

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

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

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

提示

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

看看结果吧!

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

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

此处下载源代码:SingingEels_MVC_Asyncronous_AJAX_Panels.zip

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏