Freigeben über

Gewusst wie: Hinzufügen von Repeater-Webserversteuerelementen zu einer Web Forms-Seite

  • Artikel

Aktualisiert: November 2007

Das Repeater-Webserversteuerelement ist ein datengebundenes Containersteuerelement, das eine Liste einzelner Elemente erzeugt. Sie definieren das Layout einzelner Elemente mithilfe von Vorlagen auf einer Webseite. Bei der Ausführung der Seite wiederholt das Steuerelement das Layout für jedes Element in der Datenquelle. Sie müssen mehrere Schritte vornehmen, um einer Web Forms-Seite ein Repeater-Webserversteuerelement hinzuzufügen. Das folgende Verfahren beschreibt die Mindestanforderungen für die Erstellung eines funktionierenden Repeater-Steuerelements.

So fügen Sie einer Web Forms-Seite ein Repeater-Webserversteuerelement hinzu

  1. Ziehen Sie in der Entwurfsansicht von der Registerkarte Daten in der Toolbox ein Datenquellensteuerelement auf die Seite, z. B. ein SqlDataSource-Steuerelement oder ein ObjectDataSource-Steuerelement.

  2. Verwenden Sie den Assistenten Datenquelle konfigurieren, um die Verbindung und die Abfrage oder die Datenabrufmethode für das Datenquellensteuerelement zu definieren. Der Assistent Datenquelle konfigurieren steht für alle Datenquellen zur Verfügung, außer für das SiteMapDataSource-Steuerelement, das eine Siteübersicht benötigt, um das Steuerelement aufzufüllen. Zum Öffnen des Assistenten Datenquelle konfigurieren führen Sie folgende Schritte aus:

    1. Klicken Sie mit der rechten Maustaste auf das Datenquellensteuerelement, und klicken Sie dann auf Smarttag anzeigen.

    2. Klicken Sie im Fenster für Datenquellenaufgaben auf Datenquelle konfigurieren.

  3. Ziehen Sie in der Toolbox von der Registerkarte Daten ein Repeater-Steuerelement auf die Seite.

  4. Klicken Sie mit der rechten Maustaste auf das Repeater-Steuerelement, und klicken Sie dann auf Smarttag anzeigen.

  5. Klicken Sie in der Liste Datenquelle auswählen auf den Namen des Datenquellensteuerelements, das Sie in den Schritten 1 und 2 erstellt haben.

    Dadurch wird die DataSourceID-Eigenschaft des Steuerelements festgelegt. Wenn die Abfrage einen Primärschlüssel enthält, wird ebenfalls die DataKeyField-Eigenschaft des Steuerelements festgelegt.

  6. Klicken Sie auf Quelle, um zur Quellansicht zu wechseln.

    Vorlagen können nur in der Quellansicht definiert werden.

  7. Fügen Sie der Seite ein <ItemTemplate>-Element als untergeordnetes Element des Repeater-Steuerelements hinzu. Informationen zur Syntax finden Sie unter Deklarative Syntax des Repeater-Webserversteuerelements.

    Hinweis:

    Für das Rendern zur Laufzeit muss das Repeater-Steuerelement eine ItemTemplate enthalten, die wiederum datenbindende Ausdrücke enthält. Diese weisen das Format <%# Eval("Feldname") %> auf, wobei Feldname der Name eines Felds in der Datenbank ist. Hintergrundinformationen über die Verwendung von Vorlagen finden Sie unter Vorlagen für ASP.NET-Webserver-Steuerelemente.

  8. Fügen Sie der ItemTemplate HTML und andere Webserversteuerelemente oder HTML-Serversteuerelemente hinzu.

  9. Sie können wahlweise die folgenden Vorlagen definieren: AlternatingItemTemplateSeparatorTemplate, HeaderTemplate, FooterTemplate.

    Im folgenden Codebeispiel wird veranschaulicht, wie mit einem Repeater-Steuerelement Daten in einer HTML-Tabelle angezeigt werden. Das table-Element beginnt in HeaderTemplate und endet in FooterTemplate. Im Hauptteil des Repeater-Steuerelements werden zur Anzeige von Spalten aus der Datenquelle Tabellenzellen verwendet. Das AlternatingItemTemplate-Element ist mit dem ItemTemplate-Element identisch, nur die Hintergrundfarbe der Tabellenzellen ist anders.

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

Siehe auch

Referenz

Übersicht über das Repeater-Webserversteuerelement