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

ListView 控件深度解析:模板驅動、LayoutTemplate、分層菜單構建

     編輯:關於ASP.NET

ListView 核心優勢

  • 完全控制 HTML 輸出,無多餘標籤
  • 內置分頁(DataPager)、排序、編輯、插入、刪除
  • CSS 友好:LayoutTemplate 定義容器,ItemTemplate 定義行
  • 可替代 GridView、DataList、Repeater、FormView 等所有列表控件

基礎表格渲染範例

<asp:ListView ID="lvMovies" runat="server" DataSourceID="dsMovies">
  <LayoutTemplate>
    <table class="movie-grid">
      <thead>
        <tr><th>ID</th><th>標題</th><th>上映日期</th></tr>
      </thead>
      <tbody>
        <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
      </tbody>
    </table>
  </LayoutTemplate>
  
  <ItemTemplate>
    <tr>
      <td><%# Eval("movie_id") %></td>
      <td><%# Eval("title") %></td>
      <td><%# Eval("release_date", "{0:d}") %></td>
    </tr>
  </ItemTemplate>
</asp:ListView>

表格渲染效果

進階:嵌套 ListView 構建分層菜單

<asp:ListView ID="lvMenu" runat="server" DataSourceID="dsMenu">
  <LayoutTemplate>
    <ul class="nav">
      <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
    </ul>
  </LayoutTemplate>
  
  <ItemTemplate>
    <li>
      <a href="<%# Eval('Url') %>"><%# Eval('Name') %></a>
      <!-- 子菜單遞歸嵌套 -->
      <asp:ListView ID="lvSubMenu" runat="server" 
          DataSource='<%# ((MenuItem)Container.DataItem).Children %>'>
        <LayoutTemplate><ul><asp:PlaceHolder ID="itemPlaceholder" runat="server" /></ul></LayoutTemplate>
        <ItemTemplate><li><a href="<%# Eval('Url') %>"><%# Eval('Name') %></a></li></ItemTemplate>
      </asp:ListView>
    </li>
  </ItemTemplate>
</asp:ListView>

擴展:自定義 ListView 支持多模板

public class MultiTemplateListView : ListView {
    protected override void InstantiateItem(TemplateContainer container) {
        var item = (DataItem)container.DataItem;
        string templateName = item.Type switch {
            "Header" => "HeaderTemplate",
            "Footer" => "FooterTemplate",
            "Ad" => "AdTemplate",
            _ => "ItemTemplate"
        };
        var template = (ITemplate)this.GetType().GetProperty(templateName).GetValue(this);
        template.InstantiateIn(container);
    }
}

實現:根據數據項類型動態選擇模板,超越 ItemDataBound 樣式切換的局限。

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved