ASP.NET AJAX 4.0 Preview 3（Part 2 - ASP.NET AJAX Template）

ASP.NET AJAX 4.0 Preview 3（Part 2 - ASP.NET AJAX Template）2011-10-18 博客园 cathsfz在上一篇文章里，我们说到了如何使用ADO.NET Data Service Client Library能够轻松访问到存在服务器端的数据，然而将数据展现出来仍需要人手拼接HTML这点就实在是让人难以接受，所以我们现在就来看看如何利用ASP.NET AJAX Template解决这个问题。文章中所用到的示例代码在文章末尾，参考里面的AspNetAjaxTemplateDemo.aspx。

Sys.UI.DataView

为了解决展示数据的问题，我们需要用到一个全新的客户端控件，那就是Sys.UI.DataView了，简称 DataView。我们会用DataView替换掉上一篇文章中所说到的人手拼接HTML的部分，用于迭代生成一个ul中的li元素，因此看起来是把DataView当作Repeater来用。实际上，DataView的功能类似于ListView加上 DetailsView。

如果你把一个Array绑定到DataView上，它会显示为一个ListView。与ListView的LayoutTemplate相类似的是，它也能够定义控件展示的整体布局，并且仅仅是迭代输出其中的一小部分。例如说，编写一个有 thead的table，并且仅仅是迭代输出thead之后的tr。在这方面，是DataView和ListView完全一致的。唯一不同的是，客户端暂时还没有DataPager这样的控件，所以DataView必须一次性的完整显示整个Array的数据。

如果你把单个Object绑定到DataView上，它就会显示为一个DetailsView。这使得你可以使用两个 DetailsView就做出经典的Master-Details展示模式，和在服务器端分别用ListView和DetailsView做出来的一样。当然，你不能指望DataView能够好像DetailsView那样，自动帮你分析每一个数据项并映射出对应的HTML模板，因此HTML模板还是要你自己手写的，但至少那是在HTML中编写模板，编写时能够享受IDE 带来的各种好处，维护时也更容易看懂自己（或别人）原来写下的HTML。

JavaScript语法

接下来，我们就要把DataView投入到实际应用中去了。首先，我们说一下如何用JavaScript来实例化一个DataView。有编写ASP.NET AJAX客户端代码经验的人对$create应该不会觉得陌生，因为DataView继承自Sys.UI.Control，我们仍然可以用$create来实例化它。不过，在此之前，我们先要把对应的HTML编写好：

<ul id="itemTemplate" class="sysTemplate">
  <li>
    <span class="award">{{ Award }}</span>
    <span class="winner">{{ Winner }}</span>
    <span class="film">{{ Film }}</span>
  </li>
</ul>

然后我们就可以基于itemTemplate这个HTML元素创建控件了：

$create（Sys.UI.DataView, {
    dataSource: new Sys.Data.AdoDataSource（）,
    serviceUri: "WebDataService.svc",
    query: "OscarWinners"
  }, {}, {}, $get（"itemTemplate"））;

现在，页面显示出来的结果和之前我们人手拼接HTML的版本完全一致，不过我们已经不在需要维护嵌入在JavaScript中的HTML代码了。