ListView控件学习系列1-了解ListView控件

 

目录： 

ListView控件学习系列1-了解ListView控件

ListView控件学习系列2-编辑ListView

ListView控件学习系列3-ListView选择，排序，分页

ListView使用技巧

 

源码下载

 

作者：方明

 

当你编写以用户为中心的应用程序时，总需要某种形式的数据集，起码来说，你需要从一个数据源如关系数据库或XML文件检索数据，在显示给用户之前先要进行格式化，尽管ASP.NET之前的版本就提供了以数据为中心的显示控件如GridView，但GridView的输出仍然是限制在一个table组件中的，而且这些控件缺乏专业Web开发人员需要的可自定义和可扩展特性，有时候你想要完全控制由数据绑定控件产生的HTML标记的外观，这正是ListView控件的优势，ListView控件不是使用额外的标记来封装它的输出内容，而是靠你指定的精确的HTML描述，使用ListView控件内置的模板就可以指定精确的标记，它提供了非常优秀的自定义和扩展特性，使用这些特性，你可以以任何格式显示数据，使用模板和样式，同时用最少的代码执行CURD（创建、读取、更新、删除）操作。

我们先看一下ListView支持的模板

模板	用途
AlternatingItemTemplate 交替项目模板	用不同的标记显示交替的项目，便于查看者区别连续不断的项目
EditItemTemplate 编辑项目模板	控制编辑时的项目显示
EmptyDataTemplate 空数据模板	控制ListView数据源返回空数据时的显示
EmptyItemTemplate 空项目模板	控制空项目的显示
GroupSeparatorTemplate 组分隔模板	控制项目组内容的显示
GroupTemplate 组模板	为内容指定一个容器对象，如一个表行、div或span组件
InsertItemTemplate 插入项目模板	用户插入项目时为其指定内容
ItemSeparatorTemplate 项目分隔模板	控制项目之间内容的显示
ItemTemplate 项目模板	控制项目内容的显示
LayoutTemplate 布局模板	指定定义容器对象的根组件，如一个table、div或span组件，它们包装ItemTemplate或GroupTemplate定义的内容。
SelectedItemTemplate 已选择项目模板	指定当前选中的项目内容的显示

最关键的两个模板是LayoutTemplate和ItemTemplate，正如名字暗示的那样，LayoutTemplate为ListView控件指定了总的标记，而ItemTemplate指定的标记用于显示每个绑定的记录
一、LayoutTemplate和ItemTemplate模板
标识定义控件的主要布局的根模板。它包含一个占位符对象，例如表行 (tr)、div 或 span 元素。此元素将由 ItemTemplate 模板或 GroupTemplate 模板中定义的内容替换。使用 LayoutTemplate 属性可以为 ListView 控件的根容器定义自定义用户界面 (UI)。LayoutTemplate 模板是 ListView 控件所必需的。LayoutTemplate 内容必须包含一个占位符控件，例如由 ItemTemplate 模板定义的项表行 (tr) 元素。占位符控件必须将 runat 属性 (Attribute) 设置为“server”，将 ID 属性 (Attribute) 设置为 ItemPlaceholderID 或 GroupPlaceholderID 属性 (Property) 的值（具体取决于 ListView 控件是否使用组）。
例如：
前端代码：

 

<asp:ListView ID="ListView1" runat="server">
        <ItemTemplate>
            <tr>
                <td runat="server" style="">
                    <asp:Label ID="idLabel" runat="server" Text='<%# Eval("name") %>' />
                    <br />
                </td>
                <td>
                    <asp:Label ID="xLabel" runat="server" Text='<%# Eval("Age") %>' />
                    <br />
                </td>
            </tr>
        </ItemTemplate>
        <LayoutTemplate>
            <table runat="server" border="0" style="">
                <tr runat="server" id="itemPlaceholder" />
            </table>
        </LayoutTemplate>
    </asp:ListView>

 

后台代码：

 

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Employee e1 = new Employee { Name = "lfm1", Age = 30 };
        Employee e2 = new Employee { Name = "lfm2", Age = 30 };
        Employee e3 = new Employee { Name = "lfm3", Age = 30};
        Employee e4 = new Employee { Name = "lfm4", Age = 30};
        Employee e5 = new Employee { Name = "lfm5", Age = 30};
        Employee e6 = new Employee { Name = "lfm6", Age = 30 };
        Employee[] employees = { e1,e2,e3,e4,e5,e6};
        ListView1.DataSource = employees;
        ListView1.DataBind();
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        
    }
}
class Employee
{
    public string Name { get; set; }
    public int Age { get; set; }
    public int Sex { get; set; }
}

 

浏览器中得到的代码为：

 

<table border="0" style="">
        <tr>
            <td style="">
                <span id="ListView1_ctrl0_idLabel">lfm1</span>
                <br />
            </td>
            <td>
                <span id="ListView1_ctrl0_xLabel">30</span>
                <br />
            </td>
        </tr>
        <tr>
            <td style="">
                <span id="ListView1_ctrl1_idLabel">lfm2</span>
                <br />
            </td>
            <td>
                <span id="ListView1_ctrl1_xLabel">30</span>
                <br />
            </td>
        </tr>
        <tr>
            <td style="">
                <span id="ListView1_ctrl2_idLabel">lfm3</span>
                <br />
            </td>
            <td>
                <span id="ListView1_ctrl2_xLabel">30</span>
                <br />
            </td>
        </tr>
        <tr>
            <td style="">
                <span id="ListView1_ctrl3_idLabel">lfm4</span>
                <br />
            </td>
            <td>
                <span id="ListView1_ctrl3_xLabel">30</span>
                <br />
            </td>
        </tr>
        <tr>
            <td style="">
                <span id="ListView1_ctrl4_idLabel">lfm5</span>
                <br />
            </td>
            <td>
                <span id="ListView1_ctrl4_xLabel">30</span>
                <br />
            </td>
        </tr>
        <tr>
            <td style="">
                <span id="ListView1_ctrl5_idLabel">lfm6</span>
                <br />
            </td>
            <td>
                <span id="ListView1_ctrl5_xLabel">30</span>
                <br />
            </td>
        </tr>
    </table>

 

这里要注意LayoutTemplate中的<tr runat="server" id="itemPlaceholder" />即为占位符，它将在绑定时被ItemTemplate中的内容替换掉

二、分组的应用

前端代码:

 

<asp:ListView ID="ListView1" runat="server" GroupItemCount="4">
            <LayoutTemplate>
                <table id="groupPlaceholderContainer" runat="server" border="1">
                    <tr id="groupPlaceholder" runat="server">
                    </tr>
                </table>
            </LayoutTemplate>
            <GroupTemplate>
                <tr id="itemPlaceholderContainer" runat="server">
                    <td id="itemPlaceholder" runat="server">
                    </td>
                </tr>
            </GroupTemplate>
            <ItemTemplate>
                <td>
                    <%#Eval("ID") %>
                    <%# Eval("name") %>
                    <%# Eval("age") %>
                </td>
            </ItemTemplate>
        </asp:ListView>

 

通过itemPlaceholderContainer知道这是一段要被替换的元素，而且是根据tr进行行替换。然后再配合LayoutTemplate形成分组。我们是如何来定义每行的列数的呢？只需要在ListView里添加一个属性定义<asp:ListView ID="ListView1" runat="server" GroupItemCount="4">我们这里设置GroupItemCount属性的值为4，也就代表我们的每个Group里面包含的4项。