Asp.Net控件:学习ListView控件(1)-了解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 控件是否使用组)。
例如:

前端代码:

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>

后台代码:

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项。

 

发表评论

您的电子邮箱地址不会被公开。