Partilhar via


Como: Adicionar controles de servidor Web Repeater a uma página de Web Forms

The Repeater Web server control is a data-bound container control that produces a list of individual items.Você define o layout de itens individuais em uma página da Web usando modelos.Quando a página é executada, o controle repete o leiaute para cada item em uma fonte de dados.You must complete several steps to add a Repeater Web server control to a Web forms page.The following procedure describes the minimum that you must do to create a working Repeater control.

Para adicionar um controle Repeater de servidor Web a um página de Web Forms

  1. In Design view, from the Data tab of the Toolbox, drag a data source control onto the page, such as the SqlDataSource control or the ObjectDataSource control.

  2. Use o assistente Configure Data Source para definir a conexão e a consulta, ou método de recuperação de dados, para o controle da fonte de dados.The Configure Data Source wizard is available to all data sources except the SiteMapDataSource control, which only needs the presence of a site map to populate the control.Para abrir o assistente Configure Data Source, siga estas etapas:

    1. Clique com o botão direito do mouse no controle da fonte de dados, e clique Show Smart Tag.

    2. Na janela de tarefas da fonte de dados, clique Configure Data Source.

  3. From the Data tab of the Toolbox, drag a Repeater control onto the page.

  4. Clique com o botão direito do mouse no controle Repeater e, em seguida, clique em Exibir Smart Tag.

  5. Na Lista Choose Data Source, clique no nome do controle da fonte de dados que você criou nas etapas 1 e 2.

    This sets the control's DataSourceID property.If the query includes a primary key, the controls' DataKeyField property is set as well.

  6. Clique Source para alternar para modo de origem.

    Para definir Modelos, você deve estar no modo de exibição de origem.

  7. Add an <ItemTemplate> element to the page as a child of the Repeater control.For syntax, see Servidor Web Controlarar Repeater sintaxe declarativa

    Observação:

    To render at run time, the Repeater control must contain an ItemTemplate that, in turn, contains data-binding expressions that are of the form <%# Eval("field name") %> where field name is the name of a field in the database.For background information about using templates, see Modelos de controles servidores web ASP.NET.

  8. Add HTML and any other Web server controls or HTML server controls to the ItemTemplate.

  9. Opcionalmente, defina os seguintes modelos: AlternatingItemTemplateSeparatorTemplate, HeaderTemplate, FooterTemplate.

    The following code example shows how to use a Repeater control to display data in an HTML table.The table element begins in the HeaderTemplate and ends in the FooterTemplate.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 of the table cells is different.

    <%@ Page Language="VB" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" >
      <title>ASP.NET Repeater Example</title>
    </head>
    <body>
      <form id="form1" >
        <div>
          <asp:Repeater ID="Repeater1"  DataSourceID="SqlDataSource1">
            <HeaderTemplate>
              <table>
                <tr>
                  <th>
                    Name</th>
                  <th>
                    Description</th>
                </tr>
            </HeaderTemplate>
            <ItemTemplate>
              <tr>
                <td style="background-color:#CCFFCC">
                  <asp:Label  ID="Label1" Text='<%# Eval("CategoryName") %>' />
                </td>
                <td style="background-color:#CCFFCC">
                  <asp:Label  ID="Label2" Text='<%# Eval("Description") %>' />
                </td>
              </tr>
            </ItemTemplate>
            <AlternatingItemTemplate>
              <tr>
                <td>
                  <asp:Label  ID="Label3" Text='<%# Eval("CategoryName") %>' />
                </td>
                <td>
                  <asp:Label  ID="Label4" Text='<%# Eval("Description") %>' />
                </td>
              </tr>
            </AlternatingItemTemplate>
            <FooterTemplate>
              </table>
            </FooterTemplate>
          </asp:Repeater>
          <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ID="SqlDataSource1"  SelectCommand="SELECT [CategoryID], [CategoryName], 
                [Description] FROM [Categories]"></asp:SqlDataSource>
        </div>
      </form>
    </body>
    </html>
    
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" >
      <title>ASP.NET Repeater Example</title>
    </head>
    <body>
      <form id="form1" >
        <div>
          <asp:Repeater ID="Repeater1"  DataSourceID="SqlDataSource1">
            <HeaderTemplate>
              <table>
                <tr>
                  <th>
                    Name</th>
                  <th>
                    Description</th>
                </tr>
            </HeaderTemplate>
            <ItemTemplate>
              <tr>
                <td style="background-color:#CCFFCC">
                  <asp:Label  ID="Label1" Text='<%# Eval("CategoryName") %>' />
                </td>
                <td style="background-color:#CCFFCC">
                  <asp:Label  ID="Label2" Text='<%# Eval("Description") %>' />
                </td>
              </tr>
            </ItemTemplate>
            <AlternatingItemTemplate>
              <tr>
                <td>
                  <asp:Label  ID="Label3" Text='<%# Eval("CategoryName") %>' />
                </td>
                <td>
                  <asp:Label  ID="Label4" Text='<%# Eval("Description") %>' />
                </td>
              </tr>
            </AlternatingItemTemplate>
            <FooterTemplate>
              </table>
            </FooterTemplate>
          </asp:Repeater>
          <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            ID="SqlDataSource1"  SelectCommand="SELECT [CategoryID], [CategoryName], 
                  [Description] FROM [Categories]"></asp:SqlDataSource>
        </div>
      </form>
    </body>
    </html>
    

Consulte também

Referência

Visão geral controle de servidor da Web Repeater