ASP.NET 2.0 數據教程（三十五）：單頁面 Repeater 與 DataList 實作主從報表

返回 ASP.NET 2.0 數據教程目錄

導言

前一章 跨頁面的主/從報表 學習使用兩個頁面分別顯示主從資訊。「主」頁用 Repeater 顯示分類，每個分類名稱為連結至「從」頁的超連結。「從」頁用雙欄 DataList 顯示所選分類下的產品。

本章將在單一頁面實作：左側顯示分類清單，分類名稱以 LinkButton 呈現；點擊觸發回傳，右側以雙欄 DataList 顯示相關產品。左側 Repeater 除名稱外，還顯示該分類關聯產品總數（見圖 1）。

圖 1：分類的名稱與產品總數顯示在左側

第一步：在頁面左側顯示 Repeater

本章左側顯示分類，右側顯示關聯產品。Web 頁面配置可用標準 HTML 元素或 CSS 定位。迄今皆使用 CSS。在 母版頁與站點導航 中使用絕對定位建立導航，指定導航列與內容間距。CSS 同樣可調整兩元素相對位置。

開啟 DataListRepeaterFiltering 資料夾下的 CategoriesAndProducts.aspx，加入 Repeater 與 DataList，ID 分別設為 Categories 與 CategoryProducts。切換至原始碼檢視，將它們分別置於 <div> 元素中：Repeater 後加 </div>，DataList 前加 <div>。程式碼應如下：

<div>
  <asp:Repeater ID="Categories" runat="server">
  </asp:Repeater>
</div>
<div>
  <asp:DataList ID="CategoryProducts" runat="server">
  </asp:DataList>
</div>