Export (0) Print
Expand All

Adding Repeater Controls to a Web Forms Page

Adding a Repeater Web server control to a page requires several steps. The following procedure describes the minimum that you must do to create a working Repeater control.

To add a Repeater Web server control to a Web Forms page

  1. Add a data source to the Web Forms page. There are several methods for handling data on a page. To choose an appropriate method, see Introduction to Data Access with ADO.NET and Introduction to Data Access in Web Forms Pages.
  2. In Design view, drag a Repeater control from the Web Forms tab of the Toolbox onto the page.
  3. Set the control's DataSource property. In the Properties window, the drop-down list for the DataSource property will display all the data sources, such as DataSet and DataView controls, defined on the page.
  4. Call the control's DataBind method. This is typically done in the page's Page_Load event using code such as the following, where the Repeater1 control is bound to a DataSet object. Since the DataSet was bound to the Repeater control in the designer, it does not need to be done in the code:
    ' 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. Switch to HTML view.
  6. Create templates inside the Repeater element that contain HTML text and controls to display the data. For details see Web Server Controls Templates. The skeleton for an ItemTemplate element might look like this:
    <asp:repeater id=Repeater1 runat="server" datasource="<%# dataView1 >">
       <ItemTemplate>
       </ItemTemplate>
    </asp:repeater>
    
  7. Add any combination of HTML elements and Web server controls to the templates to display the data source information.

    You must bind the controls to the data by including a data-binding expression. Typically, you bind them to the container control. An ItemTemplate element that displays the "EmployeeName" and "PhoneNumber" fields of each row in the data source would look like this:

    <ItemTemplate>
       <%# DataBinder.Eval(Container, "DataItem.EmployeeName") %>
       <%# DataBinder.Eval(Container, "DataItem.PhoneNumber") %>
       <br>
    </ItemTemplate>
    

    For details, see Data Access in Web Forms Pages.

The following example shows what a complete Repeater control definition might look like in HTML view. The Repeater control is specified to render as a table. The <table> element begins in the HeaderTemplate and ends in the FooterTemplate. (The Task List will report errors for this situation, but the errors can be safely ignored and the table will be correctly displayed when the application is run.) Within the body of the Repeater control, table cells are used to display columns from the data source. The AlternatingItemTemplate element is identical to the ItemTemplate item except that the background color for the table cells is different to create a banded effect.

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

The following example uses a label control to display values from a database. A division between values in the list is created using the separator template. Note that the value of the Text attribute of the Label control is contained in single quotation marks. Attribute values are normally enclosed in double quotation marks, but since the DataBinder call contains double quotation marks, the Text attribute value must be enclosed in single quotation marks.

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

See Also

Web Server Controls Templates | Responding to Button Events in DataList, Repeater, or DataGrid Items | Repeater Class | Data Access in Web Forms Pages

Show:
© 2014 Microsoft