Anzeigen hierarchischer Daten mithilfe von geschachtelten Repeater-Steuerelementen und Visual C# .NET

Artikel
03/20/2024

Dieser Artikel enthält Informationen zum Anzeigen hierarchischer Daten mithilfe von geschachtelten Repeater-Steuerelementen und Visual C# .NET.

Ursprüngliche Produktversion: Visual C#
Ursprüngliche KB-Nummer: 306154

Zusammenfassung

In diesem Artikel wird beschrieben, wie sie geschachtelte Repeater-Steuerelemente verwenden, um hierarchische Daten anzuzeigen. Sie können dieses Konzept auf andere listengebundene Steuerelemente anwenden.

Dieser Artikel bezieht sich auf die folgenden Namespaces der Microsoft .NET Framework-Klassenbibliothek:

System.Data
System.Data.SqlClient

Binden an die übergeordnete Tabelle

Starten Sie Visual Studio .NET.
Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt.
Klicken Sie unter Projekttypen auf Visual C#-Projekte, und klicken Sie dann unter Vorlagen auf ASP.NET Webanwendung.
Löschen Sie im Feld Speicherort die WebApplication#, und geben Sie dann NestedRepeater ein. Wenn Sie den lokalen Server verwenden, behalten Sie den Servernamen bei http://localhost. Der http://localhost/NestedRepeater Pfad wird im Feld Speicherort angezeigt. Klicken Sie auf OK.
Klicken Sie Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamenknoten NestedRepeater, zeigen Sie auf Hinzufügen, und klicken Sie dann auf Webformular hinzufügen.
Geben Sie Zum Benennen des Webformulars NestedRepeater ein, und klicken Sie auf Öffnen.
Das neue Webformular wird erstellt. Es wird in der Entwurfsansicht in der integrierten Entwicklungsumgebung (Integrated Development Environment, IDE) von Visual Studio .NET geöffnet. Wählen Sie in der Toolbox das Steuerelement Repeater aus, und ziehen Sie es dann auf die WebFormular-Seite.
Ändern Sie die ID-Eigenschaft dieses Repeater-Steuerelements in parentRepeater.
Wechseln Sie zur HTML-Ansicht für dieses Webformular. Klicken Sie dazu auf die Registerkarte HTML in der unteren linken Ecke des Designer. Das Repeater-Steuerelement generiert den folgenden HTML-Code:
```
<asp:Repeater id="parentRepeater" runat="server"></asp:Repeater>
```

Fügen Sie den Tags den Repeater folgenden Code hinzu:

<itemtemplate>
    <b>
        <%# DataBinder.Eval(Container.DataItem, "au_id") %>
    </b>
    <br>
</itemtemplate>

Danach sieht der HTML-Code für den Repeater wie folgt aus:

<asp:Repeater id="parentRepeater" runat="server">
    <itemtemplate>
        <b>
            <%# DataBinder.Eval(Container.DataItem, "au_id") %>
        </b>
        <br>
    </itemtemplate>
</asp:Repeater>

Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf NestedRepeater.aspx, und klicken Sie dann auf Code anzeigen, um zur NestedRepeater.aspx.cs CodeBehind-Datei zu wechseln.
Fügen Sie am Anfang der Datei die folgende Namespacedeklaration hinzu:
```
using System.Data;
using System.Data.SqlClient;
```

Fügen Sie dem -Ereignis den Page_Load folgenden Code hinzu, um eine Verbindung mit der Pubs-Datenbank herzustellen und die Tabelle dann an das Repeater-Steuerelement zu binden Authors :

 public void Page_Load(object sender, EventArgs e)
 {
     //Create the connection and DataAdapter for the Authors table.
     SqlConnection cnn = new SqlConnection("server=(local);database=pubs; Integrated Security=SSPI");
     SqlDataAdapter cmd1 = new SqlDataAdapter("select * from authors",cnn);

     //Create and fill the DataSet.
     DataSet ds = new DataSet();
     cmd1.Fill(ds,"authors");
     //Insert code in step 4 of the next section here.
     //Bind the Authors table to the parent Repeater control, and call DataBind.
     parentRepeater.DataSource = ds.Tables["authors"];
     Page.DataBind();

     //Close the connection.
     cnn.Close();
 }

Hinweis

Möglicherweise müssen Sie die Datenbank Verbindungszeichenfolge entsprechend Ihrer Umgebung ändern.

Speichern Sie alle Dateien.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf die NestedRepeater.aspx, und klicken Sie dann auf Als Startseite festlegen.
Klicken Sie im Menü Erstellen auf Projektmappe erstellen , um das Projekt zu kompilieren.
Zeigen Sie die seite .aspx im Browser an, und überprüfen Sie dann, ob die Seite bisher funktioniert. Die Ausgabe sollte wie folgt aussehen:
```
172-32-1176
213-46-8915
238-95-7766
267-41-2394
...
```

Binden an die untergeordnete Tabelle

Suchen Sie in der HTML-Ansicht der Seite NestedRepeater.aspx die folgende Codezeile:
```
<b>
    <%# DataBinder.Eval(Container.DataItem, "au_id") %>
</b>
<br>
```
Fügen Sie nach diesem Code den folgenden Code hinzu:
```
<asp:repeater id="childRepeater" runat="server">
    <itemtemplate>
        <%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%>
        <br>
    </itemtemplate>
</asp:repeater>
```
Dieser neue Code fügt der ItemTemplate -Eigenschaft des übergeordneten Repeater-Steuerelements ein zweites Repeater-Steuerelement hinzu.

Legen Sie die DataSource -Eigenschaft für das untergeordnete Repeater-Steuerelement wie folgt fest:

<asp:repeater ... datasource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>' >

Nachdem Sie die DataSource -Eigenschaft für das untergeordnete Repeater-Steuerelement festgelegt haben, wird der HTML-Code für die beiden Repeater-Steuerelemente (übergeordnetes und untergeordnetes Element) wie folgt angezeigt:

<asp:Repeater id="parentRepeater" runat="server">
    <itemtemplate>
        <b>
            <%# DataBinder.Eval(Container.DataItem, "au_id") %>
        </b>
        <br>
        <asp:repeater id="childRepeater" runat="server"
        datasource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>' >
            <itemtemplate>
                <%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%><br>
            </itemtemplate>
        </asp:Repeater>
    </itemtemplate>
</asp:Repeater>

Fügen Sie oben auf der Seite die folgende Seitendirektive hinzu:
```
<%@ Import Namespace="System.Data" %>
```

Ersetzen Sie auf der CodeBehind-Seite die folgende Zeile im Page_Load -Ereignis:

//Insert code in step 4 of the next section here.

//Create a second DataAdapter for the Titles table.
SqlDataAdapter cmd2 = new SqlDataAdapter("select * from titleauthor",cnn);
cmd2.Fill(ds,"titles");

//Create the relation between the Authors and Titles tables.
ds.Relations.Add("myrelation",
ds.Tables["authors"].Columns["au_id"],
ds.Tables["titles"].Columns["au_id"]);

Dadurch wird die Titles Tabelle dem DataSet und dann die Beziehungen zwischen den Authors Tabellen und Titles hinzugefügt.

Speichern und kompilieren Sie die Anwendung.
Zeigen Sie die Seite im Browser an, und überprüfen Sie dann, ob die Seite bisher funktioniert. Die Ausgabe sollte wie folgt aussehen:
```
172-32-1176
PS3333
213-46-8915
BU1032
BU2075
238-95-7766
PC1035
267-41-2394
BU1111
TC7777
```

Nestedrepeater.aspx Code

<%@ Page language="c#" Codebehind="NestedRepeater.aspx.cs" AutoEventWireup="false" Inherits="NestedRepeater.NestedRepeater" %>
<%@ Import Namespace="System.Data" %>

<html>
    <body>
        <form runat=server>
            <!-- start parent repeater -->
            <asp:repeater id="parentRepeater" runat="server">
                <itemtemplate>
                    <b>
                        <%# DataBinder.Eval(Container.DataItem,"au_id") %>
                    </b>
                    <br>
                    <!-- start child repeater -->
                    <asp:repeater id="childRepeater" datasource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>' runat="server">
                        <itemtemplate>
                            <%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%><br>
                        </itemtemplate>
                    </asp:repeater>
                    <!-- end child repeater -->
                </itemtemplate>
            </asp:repeater>
            <!-- end parent repeater -->
        </form>
    </body>
</html>

Nestedrepeater.aspx.cs Code

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace NestedRepeater
{
    public class NestedRepeater : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.Repeater parentRepeater;
        public NestedRepeater()
        {
            Page.Init += new System.EventHandler(Page_Init);
        }
        public void Page_Load(object sender, EventArgs e)
        {
            //Create the connection and DataAdapter for the Authors table.
            SqlConnection cnn = new SqlConnection("server=(local);database=pubs; Integrated Security=SSPI ;");
            SqlDataAdapter cmd1 = new SqlDataAdapter("select * from authors",cnn);

            //Create and fill the DataSet.
            DataSet ds = new DataSet();
            cmd1.Fill(ds,"authors");

            //Create a second DataAdapter for the Titles table.
            SqlDataAdapter cmd2 = new SqlDataAdapter("select * from titleauthor",cnn);
            cmd2.Fill(ds,"titles");

            //Create the relation bewtween the Authors and Titles tables.
            ds.Relations.Add("myrelation",
            ds.Tables["authors"].Columns["au_id"],
            ds.Tables["titles"].Columns["au_id"]);

            //Bind the Authors table to the parent Repeater control, and call DataBind.
            parentRepeater.DataSource = ds.Tables["authors"];
            Page.DataBind();

            //Close the connection.
            cnn.Close();
        }
        private void Page_Init(object sender, EventArgs e)
        {
            InitializeComponent();
        }
        private void InitializeComponent()
        {
            this.Load += new System.EventHandler(this.Page_Load);
        }
    }
}

Weitere Informationen

Weitere Informationen finden Sie unter Repeater Web Server Control.