ASP.NET AJAX 4.0 Preview 3(Part 2

在上一篇文章裡，我們說到了如何使用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代碼了。