Condividi tramite

Procedura: aggiungere controlli server Web Repeater a una pagina Web Form

  • Articolo

Aggiornamento: novembre 2007

Il controllo server Web Repeater è un controllo contenitore associato a dati che genera un elenco di singoli elementi. Il layout dei singoli elementi viene definito in una pagina Web mediante modelli. Quando la pagina è in esecuzione, il controllo ripete il layout per ciascun elemento incluso nell'origine dati. È necessario completare diversi passaggi per aggiungere un controllo server Web Repeater alla pagina Web Form. Nella procedura riportata di seguito vengono descritti i passaggi essenziali per creare un controllo Repeater funzionante.

Per aggiungere un controllo Web Repeater lato server a una pagina Web Form

  1. In visualizzazione Progettazione, dalla scheda Dati della Casella degli strumenti, trascinare un controllo origine dati nella pagina, ad esempio un controllo SqlDataSource o ObjectDataSource.

  2. Utilizzare la Configurazione guidata origine dati per definire la connessione e la query, ovvero il metodo per il recupero dei dati, per il controllo origine dati. La Configurazione guidata origine dati è disponibile per tutte le origini dati, ad eccezione del controllo SiteMapDataSource, per il quale è sufficiente la presenza di una mappa del sito per la compilazione del controllo. Per aprire la Configurazione guidata origine dati, attenersi alla procedura riportata di seguito:

    1. Fare clic con il pulsante destro del mouse sul controllo origine dati, quindi scegliere Mostra smart tag.

    2. Nella finestra delle attività dell'origine dati, scegliere Configura origine dati.

  3. Dalla scheda Dati della Casella degli strumenti, trascinare un controllo Repeater nella pagina.

  4. Fare clic con il pulsante destro del mouse sul controllo Repeater, quindi scegliere Mostra smart tag.

  5. Dall'elenco Scegli origine dati, scegliere il nome del controllo origine dati creato durante i passaggi 1 e 2.

    In questo modo viene impostata la proprietà DataSourceID del controllo. Se la query comprende una chiave primaria, viene impostata anche la proprietà DataKeyField del controllo.

  6. Scegliere Origine per passare alla visualizzazione Origine.

    Per definire i modelli, è necessario utilizzare la visualizzazione Origine.

  7. Aggiungere un elemento <ItemTemplate> alla pagina come figlio del controllo Repeater. Per la sintassi, vedere Sintassi dichiarativa per il controllo server Web Repeater

    Nota:

    Per effettuare il rendering in fase di esecuzione, è necessario che il controllo Repeater contenga ItemTemplate che, a sua volta, deve contenere espressioni di associazione dati del form <%# Eval("nome campo") %> dove nome campo è il nome di un campo del database. Per informazioni di base sull'utilizzo dei modelli, vedere Modelli dei controlli server Web ASP.NET.

  8. Aggiungere HTML e qualsiasi altro controllo server Web o HTML a ItemTemplate.

  9. Facoltativamente, è possibile definire i seguenti modelli: AlternatingItemTemplateSeparatorTemplate, HeaderTemplate, FooterTemplate.

    Nel seguente esempio di codice vengono illustrate le modalità di utilizzo di un controllo Repeater per visualizzare i dati in una tabella HTML. L'elemento table inizia nella proprietà HeaderTemplate e finisce nella proprietà FooterTemplate. Nel corpo del controllo Repeater, le celle della tabella vengono utilizzate per visualizzare le colonne dell'origine dati. L'elemento AlternatingItemTemplate è uguale alla voce ItemTemplate, ad eccezione del colore dello sfondo delle celle delle tabelle.

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

Vedere anche

Riferimenti

Cenni preliminari sul controllo server Web Repeater