8.7 数据绑定控件(ListView)
ListView控件是ASP.NET 3.5中新增的数据绑定控件,ListView控件是介于GridView控件和Repeater之间的另一种数据绑定控件,相对于GridView来说,它有着更为丰富的布局手段,开发人员可以在ListView控件的模板内写任何HTML标记或者控件。相比于GridView和Repeater控件而言,ListView支持的模板如下所示:
1)AlternatingItemTemplate:交替项目模板,用不同的标记显示交替的项目,便于查看者区别连续不断的项目。
2)EditItemTemplate:编辑项目模板,控制编辑时的项目显示。
3)EmptyDataTemplate:空数据模板,控制ListView数据源返回空数据时的显示。
4)EmptyItemTemplate:空项目模板,控制空项目的显示。
5)GroupSeparatorTemplate:组分隔模板,控制项目组内容的显示。
6)GroupTemplate:组模板,为内容指定一个容器对象,如一个表行、div或span组件。
7)InsertItemTemplate:插入项目模板,用户插入项目时为其指定内容。
8)ItemSeparatorTemplate:项目分隔模板,控制项目之间内容的显示。
9)ItemTemplate项目模板:控制项目内容的显示。
10)LayoutTemplate:布局模板,指定定义容器对象的根组件,如一个table、div或span组件,它们包装ItemTemplate或GroupTemplate定义的内容。
11)SelectedItemTemplate:已选择项目模板,指定当前选中的项目内容的显示。
其中最为常用的控件包括LayoutTemplate和ItemTemplate,LayoutTemplate为ListView控件指定了总的标记,而ItemTemplate指定的标记用于显示每个绑定的记录,用来编写HTML样式。ListView控件能够自动套用HTML格式,如其他控件一样,可以选择默认模板,单击【配置ListView】连接进行格式套用,如图8-52所示。
图8-52 配置ListView
开发人员能够选择相应的布局并选择相应的样式来确定ListView控件的界面,开发人员还可以通过选择【启用编辑】、【启用插入】等选项简化开发。
注意:当需要执行相应的数据操作时,数据源控件的高级选项都应该勾选。
当选择相应的布局方案和样式后,系统生成的ListView控件的HTML代码如下所示。
上述代码定义了ListView控件,系统默认创建了相应的模板,开发人员能够编辑相应的模板样式来为不同的编辑模式显示不同的用户界面。同时,用户可以无需代码实现就能够实现删除,更新以及添加等操作,运行结果如图8-53所示。
图8-53 ListView控件
LayoutTemplate和ItemTemplate是标识定义控件的主要布局的根模板。通常情况下,它包含一个占位符对象,例如表行tr或div元素。此元素将由ItemTemplate模板或GroupTemplate模板中定义的内容替换。
如果需要定义自定义用户界面,则必须使用LayoutTemplate模板可以作为ListView控件的父容器。
LayoutTemplate模板是ListView控件所必需的。相同的是,LayoutTemplate内容也需要包含一个占位符控件。占位符控件必须将包含runat=“server”属性,并且将ID属性设置为ItemPlaceholderID或 GroupPlaceholderID属性的值,示例代码如下所示。
ListView控件的事件和FormView控件的事件基本相同,同样可以为ListView控件执行更新、删除或添加等事件编写相应的代码。当执行更新前、更新时都可以触发相应的事件,示例代码如下所示。
当运行后,则会触发ItemUpdated事件,运行结果如图8-54所示。
图8-54 ItemUpdated事件
ListView控件不仅能够支持FormView控件的事件,而ListView控件具有更多的布局手段。ListView控件能为开发人员在开发中提供极大的遍历,当如果需要进行相应的数据操作,又需要快捷的显式数据和添加数据时,ListView控件是极佳的选择。
1)AlternatingItemTemplate:交替项目模板,用不同的标记显示交替的项目,便于查看者区别连续不断的项目。
2)EditItemTemplate:编辑项目模板,控制编辑时的项目显示。
3)EmptyDataTemplate:空数据模板,控制ListView数据源返回空数据时的显示。
4)EmptyItemTemplate:空项目模板,控制空项目的显示。
5)GroupSeparatorTemplate:组分隔模板,控制项目组内容的显示。
6)GroupTemplate:组模板,为内容指定一个容器对象,如一个表行、div或span组件。
7)InsertItemTemplate:插入项目模板,用户插入项目时为其指定内容。
8)ItemSeparatorTemplate:项目分隔模板,控制项目之间内容的显示。
9)ItemTemplate项目模板:控制项目内容的显示。
10)LayoutTemplate:布局模板,指定定义容器对象的根组件,如一个table、div或span组件,它们包装ItemTemplate或GroupTemplate定义的内容。
11)SelectedItemTemplate:已选择项目模板,指定当前选中的项目内容的显示。
其中最为常用的控件包括LayoutTemplate和ItemTemplate,LayoutTemplate为ListView控件指定了总的标记,而ItemTemplate指定的标记用于显示每个绑定的记录,用来编写HTML样式。ListView控件能够自动套用HTML格式,如其他控件一样,可以选择默认模板,单击【配置ListView】连接进行格式套用,如图8-52所示。
图8-52 配置ListView
开发人员能够选择相应的布局并选择相应的样式来确定ListView控件的界面,开发人员还可以通过选择【启用编辑】、【启用插入】等选项简化开发。
注意:当需要执行相应的数据操作时,数据源控件的高级选项都应该勾选。
当选择相应的布局方案和样式后,系统生成的ListView控件的HTML代码如下所示。
+展开
-HTML
<asp:ListView ID="ListView1" runat="server" DataKeyNames="ID"
DataSourceID="SqlDataSource1" InsertItemPosition="LastItem">
<AlternatingItemTemplate>
<li style="background-color: #FFF8DC;">ID:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
<br >
TITLE:
<asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>' />
<br >
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
</li>
</AlternatingItemTemplate>
<LayoutTemplate>
<ul ID="itemPlaceholderContainer" runat="server"
style="font-family: Verdana, Arial, Helvetica, sans-serif;">
<li ID="itemPlaceholder" runat="server" />
</ul>
<div style="text-align: center;background-color: #CCCCCC;font-family: Verdana, Arial,
Helvetica, sans-serif;color: #000000;">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
ShowLastPageButton="True" />
</Fields>
</asp:DataPager>
</div>
</LayoutTemplate>
<InsertItemTemplate>
<li style="">TITLE:
<asp:TextBox ID="TITLETextBox" runat="server" Text='<%# Bind("TITLE") %>' />
<br >
<asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
</li>
</InsertItemTemplate>
<SelectedItemTemplate>
<li style="background-color: #008A8C;font-weight: bold;color: #FFFFFF;">ID:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
<br >
TITLE:
<asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>' />
<br >
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
</li>
</SelectedItemTemplate>
<EmptyDataTemplate>
未返回数据。
</EmptyDataTemplate>
<EditItemTemplate>
<li style="background-color: #008A8C;color: #FFFFFF;">ID:
<asp:Label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' />
<br >
TITLE:
<asp:TextBox ID="TITLETextBox" runat="server" Text='<%# Bind("TITLE") %>' />
<br >
<asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />
</li>
</EditItemTemplate>
<ItemTemplate>
<li style="background-color: #DCDCDC;color: #000000;">ID:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
<br >
TITLE:
<asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>' />
<br >
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
</li>
</ItemTemplate>
<ItemSeparatorTemplate>
<br >
</ItemSeparatorTemplate>
</asp:ListView>
DataSourceID="SqlDataSource1" InsertItemPosition="LastItem">
<AlternatingItemTemplate>
<li style="background-color: #FFF8DC;">ID:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
<br >
TITLE:
<asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>' />
<br >
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
</li>
</AlternatingItemTemplate>
<LayoutTemplate>
<ul ID="itemPlaceholderContainer" runat="server"
style="font-family: Verdana, Arial, Helvetica, sans-serif;">
<li ID="itemPlaceholder" runat="server" />
</ul>
<div style="text-align: center;background-color: #CCCCCC;font-family: Verdana, Arial,
Helvetica, sans-serif;color: #000000;">
<asp:DataPager ID="DataPager1" runat="server">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
ShowLastPageButton="True" />
</Fields>
</asp:DataPager>
</div>
</LayoutTemplate>
<InsertItemTemplate>
<li style="">TITLE:
<asp:TextBox ID="TITLETextBox" runat="server" Text='<%# Bind("TITLE") %>' />
<br >
<asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
</li>
</InsertItemTemplate>
<SelectedItemTemplate>
<li style="background-color: #008A8C;font-weight: bold;color: #FFFFFF;">ID:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
<br >
TITLE:
<asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>' />
<br >
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
</li>
</SelectedItemTemplate>
<EmptyDataTemplate>
未返回数据。
</EmptyDataTemplate>
<EditItemTemplate>
<li style="background-color: #008A8C;color: #FFFFFF;">ID:
<asp:Label ID="IDLabel1" runat="server" Text='<%# Eval("ID") %>' />
<br >
TITLE:
<asp:TextBox ID="TITLETextBox" runat="server" Text='<%# Bind("TITLE") %>' />
<br >
<asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="更新" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="取消" />
</li>
</EditItemTemplate>
<ItemTemplate>
<li style="background-color: #DCDCDC;color: #000000;">ID:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' />
<br >
TITLE:
<asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>' />
<br >
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" />
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
</li>
</ItemTemplate>
<ItemSeparatorTemplate>
<br >
</ItemSeparatorTemplate>
</asp:ListView>
上述代码定义了ListView控件,系统默认创建了相应的模板,开发人员能够编辑相应的模板样式来为不同的编辑模式显示不同的用户界面。同时,用户可以无需代码实现就能够实现删除,更新以及添加等操作,运行结果如图8-53所示。
图8-53 ListView控件
LayoutTemplate和ItemTemplate是标识定义控件的主要布局的根模板。通常情况下,它包含一个占位符对象,例如表行tr或div元素。此元素将由ItemTemplate模板或GroupTemplate模板中定义的内容替换。
如果需要定义自定义用户界面,则必须使用LayoutTemplate模板可以作为ListView控件的父容器。
LayoutTemplate模板是ListView控件所必需的。相同的是,LayoutTemplate内容也需要包含一个占位符控件。占位符控件必须将包含runat=“server”属性,并且将ID属性设置为ItemPlaceholderID或 GroupPlaceholderID属性的值,示例代码如下所示。
+展开
-HTML
<ItemTemplate>
<td runat="server" style="background-color:#DCDCDC;color: #000000;">
ID:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /><br >
TITLE:
<asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>' /><br >
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" /><br >
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" /><br >
</td>
</ItemTemplate>
<td runat="server" style="background-color:#DCDCDC;color: #000000;">
ID:
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /><br >
TITLE:
<asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>' /><br >
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" /><br >
<asp:Button ID="EditButton" runat="server" CommandName="Edit" Text="编辑" /><br >
</td>
</ItemTemplate>
ListView控件的事件和FormView控件的事件基本相同,同样可以为ListView控件执行更新、删除或添加等事件编写相应的代码。当执行更新前、更新时都可以触发相应的事件,示例代码如下所示。
+展开
-C#
protected void ListView1_ItemUpdated(object sender, ListViewUpdatedEventArgs e)
{
Label1.Text = "更新已经发生"; //触发更新事件
}
{
Label1.Text = "更新已经发生"; //触发更新事件
}
当运行后,则会触发ItemUpdated事件,运行结果如图8-54所示。
图8-54 ItemUpdated事件
ListView控件不仅能够支持FormView控件的事件,而ListView控件具有更多的布局手段。ListView控件能为开发人员在开发中提供极大的遍历,当如果需要进行相应的数据操作,又需要快捷的显式数据和添加数据时,ListView控件是极佳的选择。
加支付宝好友偷能量挖...