首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> .NET 網頁程式設計 >> ASP.NET 基礎 >> 關於ASP.NET

ASP.NET ListView 控件學習系列(一):認識模板化架構與資料繫結基礎

     編輯:關於ASP.NET

ASP.NET 3.5 引入 ListView,以完全模板化設計取代 GridView 固定表格結構,給予開發者對 HTML 輸出的完全控制權,支援 CRUD、分頁、群組、排序等豐富功能。

ListView 核心模板總覽

模板用途必要性
LayoutTemplate根容器(ul、table、div),含 itemPlaceholder必要
ItemTemplate單筆資料呈現必要
AlternatingItemTemplate交替列樣式選用
EditItemTemplate編輯模式呈現啟用編輯時必要
InsertItemTemplate新增模式呈現啟用插入時必要
SelectedItemTemplate選中狀態呈現啟用選擇時必要
EmptyDataTemplate無資料時顯示選用
GroupTemplate / GroupSeparatorTemplate群組容器與分隔群組顯示時
ItemSeparatorTemplate項目間分隔選用

最小可用範例

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
  <LayoutTemplate>
    <table>
      <tr runat="server" id="itemPlaceholder"></tr>
    </table>
  </LayoutTemplate>
  <ItemTemplate>
    <tr>
      <td><%# Eval("ProductName") %></td>
      <td><%# Eval("UnitPrice", "{0:C}") %></td>
    </tr>
  </ItemTemplate>
</asp:ListView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="..."
    SelectCommand="SELECT ProductName, UnitPrice FROM Products" />

關鍵機制:itemPlaceholder

LayoutTemplate 中的 <tr runat="server" id="itemPlaceholder"> 是固定命名占位符,ListView 將每筆資料渲染的 ItemTemplate 內容插入此位置。容器標籤可為 table、ul、ol、div 任意結構。

與 GridView 比較

特性GridViewListView
HTML 結構固定 table/tr/td完全自訂
CSS 友善度低(類名固定、結構死板)高(任意 class、data-*、語意標籤)
CRUD 內建有(但彈性低)有(模板化、彈性高)
分頁內建 PagerSettings外掛 DataPager(更靈活)
群組顯示不支援支援 GroupTemplate

適用場景建議

  • 需語意化 HTML、RWD、SEO 友善的資料列表
  • 卡片式佈局、瀑布流、時間軸等非表格視覺設計
  • 需群組顯示(如分類下商品分組)
  • 漸進式遷移:GridView → ListView 可保留資料邏輯,僅重寫前端模板
  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved