当你编写以用户为中心的应用程序时,总需要某种形式的数据集,起码来说,你需要从一个数据源如关系数据库或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模板
标识定义控件的主要布局的根模板。它包含一个占位符对象,例如表行 (tr)、div 或 span 元素。此元素将由 ItemTemplate 模板或 GroupTemplate 模板中定义的内容替换。使用 LayoutTemplate 属性可以为 ListView 控件的根容器定义自定义用户界面 (UI)。LayoutTemplate 模板是 ListView 控件所必需的。LayoutTemplate 内容必须包含一个占位符控件,例如由 ItemTemplate 模板定义的项表行 (tr) 元素。占位符控件必须将 runat 属性 (Attribute) 设置为“server”,将 ID 属性 (Attribute) 设置为 ItemPlaceholderID 或 GroupPlaceholderID 属性 (Property) 的值(具体取决于 ListView 控件是否使用组)。
例如:
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项。