Onlineatoz.net | ToolBox Data Control Repeater

ToolBox Data Control Repeater

Repeater Web Server Control

in ASP.NET environment,This article describes you how to work with Repeater Web Control.The Repeater web control can be used to Display the Data from Database via Data Source.The Repeater Web server control is a data-bound container control that produces a list of individual items.Similar of Formview, you can use the Template to represent the data.

When the page runs, the control repeats the layout for each item in the data source.here, You must provide the layout of the Repeater by creating Templates.

The following steps are required to represents a Repeater Control,

  • A table layout.
  • A comma-delimited list (for example, name, email, phone, etc).
  • An XML formatted list
Repeater Templates

Under the Repeater control, The following Build-in Templates has included such as,

  • ItemTemplate - Contains the HTML elements and controls to render once for each data item in the data source.
  • AlternatingItemTemplate -Contains the HTML elements and controls to render once for every other data item in the data source.
  • HeaderTemplate -Offers the way to customizing the Header's style
  • FooterTemplate -Offers the way to customizing the Footer's style
  • SeparatorTemplate - Contains the elements to render between each item. A typical example might be a line (using an hr element)..

The following code snippets shows a FormView control to display data.

<html >
<head id="Head1" runat="server">
  <title>ASP.NET Repeater Example</title>
</head>
<body>
  <form id="form2" runat="server">
    <div>
      <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <HeaderTemplate>
          <table>
            <tr>
              <th>
                Name</th>
              <th>
                Description</th>
            </tr>
        </HeaderTemplate>
        <ItemTemplate>
          <tr>
            <td style="background-color:#CCFFCC">
              <asp:Label runat="server" ID="Label1" Text='<%# 
Eval("CategoryName") %>' />
            </td>
            <td style="background-color:#CCFFCC">
              <asp:Label runat="server" ID="Label2" Text='<%# 
Eval("Description") %>' />
            </td>
          </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
          <tr>
            <td>
              <asp:Label runat="server" ID="Label3" Text='<%# 
Eval("CategoryName") %>' />
            </td>
            <td>
              <asp:Label runat="server" ID="Label4" Text='<%#
 Eval("Description") %>' />
            </td>
          </tr>
        </AlternatingItemTemplate>
        <FooterTemplate>
          </table>
        </FooterTemplate>
      </asp:Repeater>
      <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:Conn %>"
        ID="SqlDataSource1" runat="server" SelectCommand="SELECT * FROM 
[Categories]"></asp:SqlDataSource>
    </div>
  </form>
</body>
</html>
                  
 
Creating a Repeater Controls to a page

The following steps must be followed to include a Repeater control to a Page,

  • Go to Design view and drag a data source control onto the page from Data Tab Toolbar, such as the SqlDataSource control or the ObjectDataSource control.
  • Use the Configure Data Source wizard to define the connection and the query, or data-retrieval method, for the data source control. To open the Configure Data Source wizard, follow these steps:
    • Right-click the data source control, and then click Show Smart Tag.
    • n the data source tasks window, click Configure Data Source.
  • drag a Repeater control onto the page from the same tab.
  • Right-click the Repeater control and then click Show Smart Tag.
  • Under Choose Data Source list, click the name of the data source control that you created in steps 1 and 2.
  • go to Source view and Includes the ItemTemplate
  • Now includes some contorls into the ItemTemplate Control

the following code snippets represents the Repeater control

<html >
<head id="Head1" runat="server">
  <title>ASP.NET Repeater Example</title>
</head>
<body>
  <form id="form2" runat="server">
    <div>
      <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
        <HeaderTemplate>
          <table>
            <tr>
              <th>
                Name</th>
              <th>
                Description</th>
            </tr>
        </HeaderTemplate>
        <ItemTemplate>
          <tr>
            <td style="background-color:#CCFFCC">
              <asp:Label runat="server" ID="Label1" Text='<%# 
Eval("UserName") %>' />
            </td>
            <td style="background-color:#CCFFCC">
              <asp:Label runat="server" ID="Label2" Text='<%# 
Eval("Address") %>' />
            </td>
          </tr>
        </ItemTemplate>
        <AlternatingItemTemplate>
          <tr>
            <td>
              <asp:Label runat="server" ID="Label3" Text='<%# 
Eval("SenderId") %>' />
            </td>
            <td>
              <asp:Label runat="server" ID="Label4" Text='<%#
 Eval("Address") %>' />
            </td>
          </tr>
        </AlternatingItemTemplate>
        <FooterTemplate>
          </table>
        </FooterTemplate>
      </asp:Repeater>
      <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:Conn %>"
        ID="SqlDataSource1" runat="server" SelectCommand="SELECT * FROM 
[Table1]"></asp:SqlDataSource>
    </div>
  </form>
</body>
</html>
                  
 
Related Links

Posted by: Admin
Posted on: 9/13/2011 at 7:31 PM
Categories: Asp.net
Actions: E-mail | Kick it! | DZone it! | del.icio.us
Post Information: Permalink | Comments (0) | Post RSSRSS comment feed