Hierarchische Daten mithilfe geschachtelter Repeater-Steuerelemente und Visual C# .NET anzeigen

2024-12-14

Dieser Artikel enthält Informationen zum Anzeigen hierarchischer Daten mithilfe geschachtelter Repeater-Steuerelemente und Visual C# .NET.

Originalproduktversion: 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 Microsoft .NET Framework-Klassenbibliotheksnamespaces:

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 Datei "WebApplication#", und geben Sie dann "NestedRepeater" ein. Wenn Sie den lokalen Server verwenden, lassen Sie den Servernamen als http://localhost. Der http://localhost/NestedRepeater Pfad wird im Feld "Speicherort " angezeigt. Klicken Sie auf OK.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamensknoten "NestedRepeater", zeigen Sie auf "Hinzufügen", und klicken Sie dann auf "Webformular hinzufügen".
Geben Sie "NestedRepeater" ein, und klicken Sie auf "Öffnen", um das Webformular zu benennen.
Das neue Webformular wird erstellt. Sie 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 Repeater-Steuerelement aus, und ziehen Sie es dann auf die Webformularseite.
Ändern Sie die ID-Eigenschaft dieses Repeater-Steuerelements in parentRepeater.
Wechseln Sie zur HTML-Ansicht für dieses Webformular. Klicken Sie dazu in der unteren linken Ecke des Designers auf die HTML-Registerkarte . Das Repeater-Steuerelement generiert den folgenden HTML-Code:
```
<asp:Repeater id="parentRepeater" runat="server"></asp:Repeater>
```

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

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

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

<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 oben in der Datei die folgende Namespacedeklaration hinzu:
```
using System.Data;
using System.Data.SqlClient;
```

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

 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();
 }

Notiz

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 .aspx Seite im Browser an, und überprüfen Sie dann, ob die Seite bisher funktioniert. Die Ausgabe sollte wie folgt angezeigt werden:
```
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 zum DataSet hinzugefügt und dann die Beziehungen zwischen den Tabellen und Titles den Authors Tabellen 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 angezeigt werden:
```
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.

Freigeben über