使用ASP.NET Ajax庫的母片-詳細資料檢視

提到資料驅動的網頁時，您往往會想到具有一些交叉相關資料的母片-詳細信 息視圖。母片-詳細資料檢視非常適合呈現一對多的關係，此類別關係在實際中相 當普遍，但 Web 平台不適合這種功能，因為它不具有實現該功能的有效工具集 。

ASP.NET Web Form始終提供強大的資料繫結支援和一組功能強大的資料來源和 資料繫結伺服器控制項。在 Web Form中，伺服器控制項幾乎可以使用網格、列表和 下拉框的任意可能組合并支援多個層級的嵌套，從而能夠出色地呈現資料的層次 結構。

Web Form 伺服器控制項產生的視圖的缺陷並不在於呈現效果，而是靜態這種情 況。

使用者在瀏覽母片-詳細資料檢視時，通常會在母片記錄間切換並深入瞭解感興 趣的記錄的詳細資料。這種互動功能是母片-詳細資料檢視的精華所在。

在典型的 Web Form方案中，每個切入操作都可能觸發回傳。現在，許多回傳 和後續頁面重新載入操作令使用者不滿。

雖然存在替代方案，但也存在瑕疵。這種替代方案主要包括預先載入使用者可能 希望查看的任何可能資料。隨後，可以在標準頁面中下載這些資料，並使用 CSS 樣式對它們進行隱藏。同時，重新編寫使用者操作的任何處理常式，以公開隱藏的 內容，而不是觸發回傳。您可以瞭解，這並非易事。

ASP.NET Ajax 庫與 jQuery 協作提供了一個功能更為強大的工具集，能夠編 寫可非同步回傳且僅在萬不得已時才執行回傳的流暢有效母片-詳細資料檢視。

DataView 控制項的隱藏功能

DataView 用戶端控制項是在 ASP.NET Ajax 庫中構建母片-詳細資料檢視的基 本工具。通過與 ASP.NET Ajax 庫的 sys-attach 功能及即時綁定結合使用，就 功能和布局而言，該控制項提供了前所未有的靈活性。特別是，DataView 控制項可 用於產生母片和詳細資料檢視。

要使用 ASP.NET Ajax 庫布置母片-詳細資料檢視，您需要執行三個基本步驟 。首先，為母片和詳細資料檢視建立標記。其次，將 DataView 控制項的執行個體作為 行為附加到每個視圖。最後，使用即時綁定（或僅使用普通的資料繫結運算式） 向詳細資料檢視的可視布局部分填充新資料。請注意，可以採用代碼聲明和代碼 命令方式完成所有模板、綁定和組件的建立。讓我們來舉一個簡單的樣本，來幫 助您熟悉可用的方法和工具。

構建簡單的母片-詳細資料檢視

以下是母片-詳細資料檢視的簡單布局。它主要由兩個 DIV 標記構成。母片 DIV 包含無序的項目列表，而詳細資料 DIV 包含子表：

<div　id="masterView">
　 <ul　class="sys-template">
　 ...
　 </ul>
</div>
<div　id="detailView">
　 <table>
　　 <tr>
　　　 <td>　...　</td>
　　　 <td>　...　</td>
　　 </tr>
　　 ...
　 </table>
</div>