重复列表控件（Repeater）是一个可重复操作的控件。它能够通过使用模板显示一个数据源的内容， 而且开发人员可以轻松的配置这些模板，Repeater 控件包括如标题和页脚这样的数据，它可以遍历所有 的数据选项并将其应用到模板中。 重复列表控件并不是从 WebControl 派生出来，重复列表控件可以直接操控.

Presentation on theme: "  重复列表控件（Repeater）是一个可重复操作的控件。它能够通过使用模板显示一个数据源的内容， 而且开发人员可以轻松的配置这些模板，Repeater 控件包括如标题和页脚这样的数据，它可以遍历所有 的数据选项并将其应用到模板中。 重复列表控件并不是从 WebControl 派生出来，重复列表控件可以直接操控."— Presentation transcript:

1

2   重复列表控件（Repeater）是一个可重复操作的控件。它能够通过使用模板显示一个数据源的内容， 而且开发人员可以轻松的配置这些模板，Repeater 控件包括如标题和页脚这样的数据，它可以遍历所有 的数据选项并将其应用到模板中。 重复列表控件并不是从 WebControl 派生出来，重复列表控件可以直接操控 HTML 文件或者样式表 来编写模板和控制属性。重复列表控件支持 5 种模板，用来显示相应的界面信息，这 5 种模板的功能如 下所示： AlternatingItemTemplate：指定如何显示其他选项。 ItemTemplate：指定如何显示选项。 HeaderTemplate：建立如何显示标题。 FooterTemplate：建立如何显示页脚。 SeparatorTemplate：指定如何显示不同选项之间的分隔符。

3 在上面5种模板中，惟一需要使用的是 ItemTemplate 模板，其他的模板可以选用。示例代码如下所示。
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <ItemTemplate> <%# Eval("title")%> </ItemTemplate> </asp:Repeater> “<%#%>”符号之间的语句表示数据绑定表达式，可以直接使用数据源控件中查询出来字段。 <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <ItemTemplate> <div style="border-bottom:1px dashed #ccc; padding:5px 5px 5px 5px;"> <%# Eval("title")%> </div> </ItemTemplate> </asp:Repeater> 显示字段有几种方法，其中“<%#Eval(“字段名称”)%>”是最方便的显示字段的方法，能够方便的在模板中嵌入，其他方法还有使用“<%#DataBlinder.Eval(Container.DataItem,“字段名称”)%>”方式来绑定相关的列。示例代码如右所示。

4 上述代码自定义了一个HTML代码，增加了一个DIV标签，该标签设置了CSS属性border-bottom:1px dashed #ccc; padding:5px 5px 5px 5px;。Repeater控件能够自动的重复该模板。当数据库中的数据完毕后， 则不再重复，运行结果如图所示。

5 重复列表控件最常用的事件有 ItemCommand、ItemCreated、ItemDataBound。当创建一个项或者一 个项被绑定到数据源时，将触发 ItemCreated 和 ItemDataBound 事件。当重复列表控件中有按钮被激发 时，会触发 ItemCommand 事件。 在 ItemCommand 中，为了自定义按钮控件相应事件，开发人员必须指定 RepeaterCommandEventArgs 参数获取 CommandArgument、CommandName 和 CommandSource 三个属性对应的值，示例代码如下所 示。 <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" onitemcommand="Repeater1_ItemCommand"> <ItemTemplate> <div style="border-bottom:1px dashed #ccc; padding:5px 5px 5px 5px;"> <%# Eval("title")%> <asp:Button ID="Button1" runat="server" Text="按钮" CommandArgument='<%# Eval("title")%>'/> </div> </ItemTemplate> </asp:Repeater> 上述代码增加了一个按钮控件，并配置按钮控件的命令参数为数据库中的 title 的值。当单击按钮控 件时，则会触发 ItemCommand，示例代码如下所示。 protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e) { Label1.Text = "用户选择了" + e.CommandArgument.ToString(); //显式选择项 }

6 上述代码当指定了执行按钮控件触发的事件，运行结果如图所示。
Repeat 控件需要一定的 HTML 知识才能显示数据库的相应信息，虽然增加了一定的复杂度，但是却增加了灵活性。Repeat 控件能够按照用户的想法显示不同的样式，让数据显示更加丰富。

7 DataList 控件支持各种不同的模板的样式，通过为 DataList 指定不同的样式，可以自定义 DataList 控件的外观。与 Repeater 控件相同的是，DataList 控件同样也支持自定义 HTML，但是 DataList 控件具 备 Repeater 控件不具有的特性，DataList 控件常用属性如下所示。 AltermatingItemStyle：编写交替行的样式。 EditItemStyle：正在编辑的项的样式。 FooterStyle：列表结尾处的脚注的样式。 HeaderStyle：列表头部的标头的样式。 ItemStyle：单个项的样式。 SelectedItemStyle：选定项的样式。 SeparatorStyle：各项之间分隔符的样式。

8 通过修改DataList 控件的相应的属性，能够实现复杂的HTML样式而不需要通过变成实现。而DataList 控件能够套用自定义格式实现更多的效果，如图所示。

9 DataList控件经常在开发中使用，DataList控件不仅能够支持Repeater控件中的ItemCommand、 ItemCreated、ItemDataBound事件，还支持更多的服务器事件。对项中的按钮进行操作，如果按钮的CommandName属性为“edit”，则该按钮则可以引发EditorCommand事件，同样也可以配置不同的CommandName属性来实现不同的操作。编辑DataList控件，并编辑相应的HTML代码，让DataList控件包括按钮，并为按钮配置相应的CommandName属性，示例代码如下所示。 <asp:DataList ID="DataList1" runat="server" BackColor="White" BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" DataKeyField="ID" DataSourceID="SqlDataSource1" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" GridLines="Horizontal" Width="100%" ondeletecommand="DataList1_DeleteCommand"> <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" /> <AlternatingItemStyle BackColor="#F7F7F7" /> <ItemStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" /> <SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" /> <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" /> <ItemTemplate> 新闻 ID: <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' /> <br /> 新闻编号: <asp:Label ID="TITLELabel" runat="server" Text='<%# Eval("TITLE") %>' /> <asp:Button ID="Button1" runat="server" Text="删除" CommandName="delete" CommandArgument='<%# Eval("ID") %>'/> </ItemTemplate> </asp:DataList>

10 当用户单击了相应的按钮时会触发 DeleteCommand 事件。开发人员能够通过传递过来的参数，可以 编写相应的方法，运行结果如图所示。
上述代码创建了一个 DataList 控件并配置了按钮控件，并将按钮控件的 CommandName 属性配置为 “delete”，则触发该按钮则会引发 DeleteCommand 事件。在属性窗口中找到 DeleteCommand 事件，双 击【DeleteCommand】连接系统会自动生成 DeleteCommand 事件相应的方法。当生成了 DeleteCommand 事件后，可以在代码段中编写相应的方法，示例代码如下所示。 protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e) { Label1.Text = e. CommandArgument.ToString()+"被执行"; } 当用户单击了相应的按钮时会触发 DeleteCommand 事件。开发人员能够通过传递过来的参数，可以 编写相应的方法，运行结果如图所示。 程序运行后，当用户单击了相应的按钮时，开发人员可以通过获取传递的 CommandArgument 参数 的值来编写相应的方法从而执行实现不同的应用。

11 1 建立GridView控件 GridView控件为开发人员提供了强大的管理方案，同样 GridView 也支持内置格式，单击【自动套 用格式】连接可以选择GridView中的默认格式，如左图所示。GridView 是以表格为表现形式，GridView 包括行和列，通过配置相应的属性能够编辑相应的行的 样式，同样也可以选择【编辑列】选项来编写相应的列的样式，如右图所示。

12 GridView控件提供两个用户绑定到数据的选项，其一是使用DataSourceID进行数据绑定，这种方 法通常情况下是绑定数据源控件；而另一种则是使用DataSource属性进行数据绑定，这种方法能够将GridView控件绑定到包括ADO.NET数据和数据读取器内的各种对象。 使用 DataSourceID 进行数据绑定，可以让 GridView 控件能够自动的处理分页、选择等操作，如图左所示。而使用 DataSource 属性进行数据绑定，则需要开发人员通过编程实现分页等操作。GridView 控件能够自定义字段，单击【添加列】按钮，可以选择相应类型的列。在添加列选项中，GridView 控件 支持多种列类型的列，包括复选框、图片、单选框、超链接等，如图右所示。

13 添加自定义字段，GridView 控件支持从数据源中读取相应的数据源来配置相应的字段，来让开发人 员自定义的读取数据源中的相应字段来自定义开发，如图 8-38 所示。当选择从数据源中获取文本，可 以通过 Format 的形式编写相应的文本。例如，从数据源中获取 title 列，而显示文本为“这是一个标题： title 值”，则可以编写为“这是一个标题：{0}”，如图 8-39 所示。

14 配置完成后，GridView 控件的 HTML 标签生成代码如下所示：
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataKeyNames="ID" DataSourceID="SqlDataSource1" ForeColor="Black" GridLines="None" Width="100%"> <FooterStyle BackColor="Tan" /> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" /> <asp:BoundField DataField="TITLE" HeaderText="TITLE" SortExpression="TITLE" /> <asp:HyperLinkField DataNavigateUrlFields="ID" DataNavigateUrlFormatString="Default.aspx?uid={0}" DataTextField="TITLE" DataTextFormatString="Title:{0}" HeaderText="Link" /> </Columns> <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" /> <HeaderStyle BackColor="Tan" Font-Bold="True" /> <AlternatingRowStyle BackColor="PaleGoldenrod" /> </asp:GridView> 上述代码使用了一个默认格式，并新建了一个超链接文本类型的列，当单击超文本链接，则会跳转 到另一个页面。

15 2 GridView控件的常用事件 GridView支持多个事件，通常对GridView控件进行排序、选择等操作时，同样会引发事件，当创 建当前行或将当前行绑定至数据时发生的事件，同样，单击一个命令控件时也会引发事件。GridView控件常用的事件如下所示。 RowCommand：在 GridView 控件中单击某个按钮时发生。此事件通常用于在该控件中单击某 个按钮时执行某项任务。 PageIndexChanging：在单击页导航按钮时发生，但在 GridView 控件执行分页操作之前。此事 件通常用于取消分页操作。 PageIndexChanged：在单击页导航按钮时发生，但在 GridView 控件执行分页操作之后。此事 件通常用于在用户定位到该控件中不同的页之后需要执行某项任务时。 SelectedIndexChanging：在单击 GridView 控件内某一行的 Select 按钮（其 CommandName 属性 设置为“Select”的按钮）时发生，但在 GridView 控件执行选择操作之前。此事件通常用于取 消选择操作。 SelectedIndexChanged：在单击 GridView 控件内某一行的 Select 按钮时发生，但在 GridView控件执行选择操作之后。此事件通常用于在选择了该控件中的某行后执行某项任务。 Sorting：在单击某个用于对列进行排序的超链接时发生，但在 GridView 控件执行排序操作之前。此事件通常用于取消排序操作或执行自定义的排序例程。 RowEditing：在单击 GridView 控件内某一行的 Edit 按钮（其 CommandName 属性设置为 “Edit”的按钮）时发生，但在 GridView 控件进入编辑模式之前。此事件通常用于取消编辑操 作。 RowCancelingEdit：在单击 GridView 控件内某一行的 Cancel 按钮（其 CommandName 属性 设置为“Cancel”的按钮）时发生，但在 GridView 控件退出编辑模式之前。此事件通常用于 停止取消操作。 RowUpdating：在单击 GridView 控件内某一行的 Update 按钮（其 CommandName 属性设置 为“Update”的按钮）时发生，但在 GridView 控件更新记录之前。此事件通常用于取消更新 操作。 RowUpdated：在单击 GridView 控件内某一行的 Update 按钮时发生，但在 GridView 控件更 新记录之后。此事件通常用来检查更新操作的结果。 DataBound：此事件继承自 BaseDataBoundControl 控件，在 GridView 控件完成到数据源的绑 定后发生。 Sorted：在单击某个用于对列进行排序的超链接时发生，但在 GridView 控件执行排序操作之后。此事件通常用于在用户单击对列进行排序的超链接之后执行某项任务。 RowDataBound：在 GridView 控件中的某个行被绑定到一个数据记录时发生。此事件通常用于 在某个行被绑定到数据时修改该行的内容。 RowCreated：在 GridView 控件中创建新行时发生。此事件通常用于在创建某个行时修改该行的 布局或外观。 RowDeleting：在单击 GridView 控件内某一行的 Delete 按钮（其 CommandName 属性设置为 “Delete”的按钮）时发生，但在 GridView 控件从数据源删除记录之前。此事件通常用于取 消删除操作。 RowDeleted：在单击 GridView 控件内某一行的 Delete 按钮时发生，但在 GridView 控件从 数据源删除记录之后。此事件通常用于检查删除操作的结果。

16 需要指定相应的事件，则必须添加一个RowCommand事件，GridView控件HTML代码如下所示
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" DataKeyNames="ID" DataSourceID="SqlDataSource1" ForeColor="Black" GridLines="None" onrowcommand="GridView1_RowCommand" Width="100%"> <FooterStyle BackColor="Tan" /> <Columns> <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" /> <asp:BoundField DataField="TITLE" HeaderText="TITLE" SortExpression="TITLE" /> <asp:HyperLinkField DataNavigateUrlFields="ID" DataNavigateUrlFormatString="Default.aspx?uid={0}" DataTextField="TITLE" DataTextFormatString="Title:{0}" HeaderText="Link" /> <asp:ButtonField ButtonType="Button" CommandName=" Select" HeaderText="选择按钮" ShowHeader="True" Text="按钮" /> </Columns> <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" /> <HeaderStyle BackColor="Tan" Font-Bold="True" /> <AlternatingRowStyle BackColor="PaleGoldenrod" /> </asp:GridView>

17 上述代码创建了一个 GridView 控件，并增加了一个按钮控件，并且为按钮控件的 CommandName属性赋值为 Select，当单击按钮控件时，则会触发 RowCommand 事件，CS 页面代码如下所示。 protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) { Label1.Text = e.CommandName + "事件被触发"; } 当单击按钮时，GridView 控件会选择相应的行。在 GridView 控件的 RowCommand 事件中，同样可 以通过 GridView 控件的中按钮的 CommandArgument 属性获取相应的操作并执行相应代码。GridView 控件运行结果如图所示。 注意：在执行其他事件时，如 RowDeleted、GridView 控件首先执行 RowDataBound 代码，然后执 行 RowCommnad、RowDeleting 以及 RowDeleted 等事件。

18