领先技术：ASP.NET AJAX和客户端模板

领先技术：ASP.NET AJAX和客户端模板2011-12-26 MSDN Dino Esposito对于 ASP.NET AJAX 应用程序开发而言，人们非常乐衷于使用部分呈现，其主要原因在于其固有的简单性 — 对现有页面影响较小，对开发人员的技能要求较低。但是，部分呈现仅仅是一个在执行回发请求的过程中绕过浏览器的小技巧。使用部分呈现的页面并不是真正意义上的 AJAX 页面，因为它们仍然依赖于以前的回发方法。那么究竟什么才算是真正的 AJAX 应用程序？

实际上，真正的 AJAX 应用程序使用 XMLHttpRequest 对象绕过浏览器并与 Web 服务器及任何托管 HTTP 端点建立直接通信。该应用程序能够异步检索必要的数据并单独刷新用户界面的各个块。许多 AJAX 框架都是根据此关键行为设计的，它们包含不同数量的语法修饰、或大或小的功能集以及丰富或简单的用户界面小组件系列。ASP.NET AJAX 就是其中的一种框架。

设计和构建真正的 AJAX 应用程序并非一项容易的任务，如果缺少合适的编程工具，甚至会更加困难。与其他 AJAX 框架相比，ASP.NET AJAX 的优越性体现在它为访问服务器端代码所提供的支持上。从开发人员的角度来看，使用 ASP.NET AJAX 连接到可编写脚本的 Web 或 Windows® Communication Foundation （WCF）服务就像孩子玩游戏一样简单。当您引用 URL 时，框架会为您生成 JavaScript 代理类。这做起来轻松而有效。代理类隐藏 XMLHttpRequest 细节、序列化和反序列化、数据格式以及 HTTP 打包的所有细节。您只需异步调用一个方法，即可获得自身具备属性集的纯数据传输对象（DTO）。

但是，ASP.NET AJAX 并未提供这么有效率且可在浏览器中使用下载数据的机制。当然，这会很快得到改善，但是现在 ASP.NET AJAX 提供的客户端 UI 模型确实不如服务器端服务模型那么丰富。

那么目前如何才能改进 ASP.NET AJAX 纯 Web 应用程序的 UI 模型呢？上个月，我介绍了单页界面（SPI）的概念并提供了几个可用于构建 SPI 页的简单模式。本月，我将讨论客户端模板和数据绑定。

典型的 AJAX 功能

实时检索股市报价的应用程序是说明 AJAX 方法强大功能的典型示例。如今，提供此功能的非 AJAX 网站要么使用中继刷新标记，要么使用基于插件的方法（如 Flash、Silverlight™ 或 ActiveX® 控件）。通常，首先将要显示的股票价值列表绑定到服务器端网格控件上，然后在下一次回发或页面请求过程中将该网格与页面其余部分一同刷新。使用部分呈现可以快速改善此类页面。让我们了解一下如何操作。图 1 中的标记将网格控件封装在一个 UpdatePanel 控件中，Timer 控件会定期刷新该控件。

图 1 实时股市报价页面的 UI

<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional"> <ContentTemplate>  <div style="margin:10px;">   <asp:Label runat="server" ID="Label2" />   <asp:GridView ID="GridView1" runat="server" SkinID="ClassicGrid"    AutoGenerateColumns="false"    OnRowDataBound="GridView1_RowDataBound">    <Columns>     <asp:BoundField DataField="Symbol" HeaderText="SYMBOL" />     <asp:BoundField DataField="Quote" HeaderText="LAST" >      <ItemStyle HorizontalAlign="Right" />     </asp:BoundField>     <asp:BoundField DataField="Change" HeaderText="CHANGE" >      <ItemStyle HorizontalAlign="Right" />     </asp:BoundField>    </Columns>   </asp:GridView>   <small><asp:Label runat="server" ID="Label1" /></small>  </div> </ContentTemplate> <Triggers>  <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </Triggers></asp:UpdatePanel><asp:Timer runat="server" id="Timer1" Enabled="true" Interval="600000" OnTick="Timer1_Tick" />