ListView 的华彩呈现：用 ASP 打造视觉盛宴的列表视图-编程学习网

控件概览

ListView 控件是一种用于显示数据集合的服务器端控件。它提供灵活的配置选项，包括数据源绑定、布局、分页、筛选和分拣功能。与其他数据绑定控件类似，ListView 可与各种数据源（例如 SQL Server、XML 文件和对象集合）配合使用。

创建基本 ListView

创建 ListView 控件非常简单。只需将其拖放到 ASPX 页面，然后将数据源绑定到 DataSouceID 属性。以下代码示例演示了如何绑定 ListView 到 SQL Server 数据库表：

<asp:ListView ID="MyListView" runat="server" DataSourceID="SqlDataSource1">
    <LayoutTemplate>
        <ul>
            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
        </ul>
    </LayoutTemplate>
    <ItemTemplate>
        <li><%# Eval("Name") %></li>
    </ItemTemplate>
</asp:ListView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="..." SelectCommand="SELECT * FROM Customers" />

自定義外觀

ListView 的强大功能之一在於其高度可定制的外观。可以使用 LayoutTemplate 和 ItemTemplate 属性来控制列表的整体布局和单个项目的外观。布局模板用于定义容器元素的结构，而项目模板用于指定各个项目的呈现方式。

以下示例展示了如何使用 CSS 样式自定义 ListView 的外观：

<asp:ListView ID="MyListView" runat="server" DataSourceID="SqlDataSource1">
    <LayoutTemplate>
        <ul class="list-group">
            <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
        </ul>
    </LayoutTemplate>
    <ItemTemplate>
        <li class="list-group-item"><%# Eval("Name") %></li>
    </ItemTemplate>
</asp:ListView>

.list-group {
    list-style-type: none;
    padding: 0;
}

.list-group-item {
    padding: 10px;
    margin-bottom: -1px;
    background-color: #fff;
}

動態數據操作

ListView 不僅可以用於顯示數據，還可以支持動態數據操作。例如，可以使用 InsertItemPlaceholder 和 EditItemTemplate 属性來添加對插入和編輯操作的支持。

以下示例演示了如何啟用 ListView 的插入功能：

<asp:ListView ID="MyListView" runat="server" DataSourceID="SqlDataSource1">
    <InsertItemTemplate>
        <input type="text" id="txtName" runat="server" />
        <asp:Button ID="btnAdd" runat="server" Text="Add" />
    </InsertItemTemplate>
</asp:ListView>

注意：上述代碼假設 SqlDataSource1 已配置為支持插入操作。

排序、分頁和過濾

ListView 還提供內置的排序、分頁和過濾功能。通過設置 AllowSorting、AllowPaging 和 AllowFiltering 屬性，可以啟用這些功能。此外，可以使用 SortExpression、PageSize 和 FilterExpression 屬性來指定排序表達式、頁面大小和過濾器表達式。

以下示例展示了如何啟用 ListView 的排序功能：

<asp:ListView ID="MyListView" runat="server" DataSourceID="SqlDataSource1" AllowSorting="true">
    <SortExpression>Name</SortExpression>
    <ItemTemplate>
        <li><%# Eval("Name") %></li>
    </ItemTemplate>
</asp:ListView>