向 Web 窗体页添加 Repeater 控件-ASP教程,组件开发

向页添加 repeater web 服务器控件需要若干步骤。下列过程描述创建一个工作的 repeater 控件必须执行的最少步骤。

向 web 窗体页添加 repeater web 服务器控件

1. 向 web 窗体页添加一个数据源。有多种方法可处理页上的数据。若要选择适当的方法，请参见 ado.net 数据访问介绍和对 web 窗体页中数据访问的介绍。
2. 在“设计”视图中，从“工具箱”的“web 窗体”选项卡将 repeater 控件拖到页面上。
3. 设置控件的 datasource 属性。在“属性”窗口中，datasource 属性的下拉菜单中将显示所有数据源，例如在页上定义的 dataset 和 dataview 控件。
4. 调用控件的 databind 方法。通常使用如下所示代码在该页的 page_load 事件中完成此操作，此处 repeater1 控件绑定到 dataset 对象。由于 dataset 已在设计器中绑定到 repeater 控件，所以它不需要在该代码中进行绑定：

    visual basic
   protected sub page_load(byval sender as system.object, _
   byval e as system.eventargs) handles mybase.load
       put user code to initialize the page, including data, here. 
      repeater1.databind()
   end sub
   
   // c#
   protected void page_load(object sender, eventargs e)
   {
      // put user code to initialize the page, including data, here.
      repeater1.databind();
   }

5. 切换到“html”视图。
6. 在 repeater 元素内创建包含 html 文本和控件的模板，以显示数据。有关详细信息，请参见 web 服务器控件模板。有关 itemtemplate 元素的主干可能会如下所示：

   <asp:repeater id=repeater1 runat="server" datasource="<%# dataview1 >">
      <itemtemplate>
      </itemtemplate>
   </asp:repeater>

7. 向模板添加 html 元素和 web 服务器控件的任意组合以显示数据源信息。

   必须通过包括一个数据绑定表达式将控件绑定到数据。通常，将它们绑定到容器控件。显示数据源中每行的“employeename”和“phonenumber”字段的 itemtemplate 元素将类似如下所示：

   <itemtemplate>
      <%# databinder.eval(container, "dataitem.employeename") %>
      <%# databinder.eval(container, "dataitem.phonenumber") %>
      <br>
   </itemtemplate>

   有关详细信息，请参见 web 窗体页中的数据访问。

下面的示例说明一个完整的 repeater 控件定义在“html”视图中应类似于什么样子。指定将 repeater 控件呈现为表。<table> 元素在 headertemplate 中开始并在 footertemplate 中结束。（“任务列表”将报告有关这种情况的错误，但是这些错误可以安全地忽略，在运行应用程序时，该表将正确地显示。）在 repeater 控件体内，表单元格用于显示数据源的列。除了表单元格的背景色不同以创建带状效果外，alternatingitemtemplate 元素与 itemtemplate 项相同。

<asp:repeater id=repeater1 runat="server" datasource="<%# dataview1%>">
   <headertemplate>
      <table width="100%" style="font: 8pt verdana">
      <tr style="background-color:dfa894">
         <th> first name </th>
         <th> last name </th>
      </tr>
   </headertemplate>
   <itemtemplate>
      <tr>
         <td><%# databinder.eval(container, "dataitem.employeename") %> 
         </td>
         <td><%# databinder.eval(container,"dataitem.phonenumber") %> 
         </td>
      </tr>
   </itemtemplate>
   <alternatingitemtemplate>
      <tr>
         <td bgcolor="lightblue">
         <%# databinder.eval(container, "dataitem.employeename") %> </td>
         <td bgcolor="lightblue">
         <%# databinder.eval(container,"dataitem.phonenumber") %> </td>
      </tr>
   </alternatingitemtemplate>
   <footertemplate> </table> </footertemplate>
</asp:repeater>

下面的示例使用标签 (label) 控件显示数据库的值。使用分隔符模板创建列表中值之间的分隔符。请注意，label 控件的 text 属性的值包含在单引号中。属性值通常放在双引号中，但是由于 databinder 调用包含双引号，所以 text 属性值必须括在单引号中。

<asp:repeater id="repeater1" runat="server" datasource="<%# dataview1%>">
   <itemtemplate>
      <asp:label id=label1 runat="server" 
         text=<%# databinder.eval(container, "dataitem.employeename")%>>
      </asp:label>
   </itemtemplate>
   <separatortemplate>,</separatortemplate>
</asp:repeater>