Anzeigen hierarchischer Daten mithilfe geschachtelter Repeater-Steuerelemente und Visual C# .NET

  • Artikel
  • 4 Minuten Lesedauer

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

Originalversion des Produkts:   Visual C #
Ursprüngliche KB-Nummer:   306154

Zusammenfassung

In diesem Artikel wird beschrieben, wie Sie verschachtelte 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

  1. Starten Sie Visual Studio .NET.

  2. Zeigen Sie im Menü Datei auf Neu, und klicken Sie dann auf Projekt.

  3. Klicken Sie unter Project Typen auf Visual C#-Projekte, und klicken Sie dann unter "Vorlagen" auf ASP.NET Webanwendung.

  4. Löschen Sie im Feld "Speicherort " die Datei "WebApplication#", und geben Sie " NestedRepeater" ein. Wenn Sie den lokalen Server verwenden, belassen Sie den Servernamen als http://localhost. Der http://localhost/NestedRepeater Pfad wird im Feld "Speicherort " angezeigt. Klicken Sie auf OK.

  5. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Namenknoten des NestedRepeater-Projekts, zeigen Sie auf "Hinzufügen", und klicken Sie dann auf "Webformular hinzufügen".

  6. Geben Sie zum Benennen des Webformulars "NestedRepeater" ein, und klicken Sie auf "Öffnen".

  7. 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 Repeater-Steuerelement aus, und ziehen Sie es dann auf die Webformularseite.

  8. Ändern Sie die ID-Eigenschaft dieses Repeater-Steuerelements in parentRepeater.

  9. Wechseln Sie zur HTML-Ansicht für dieses Webformular. Klicken Sie dazu in der unteren linken Ecke des Designers auf die Registerkarte "HTML ". Das Repeater-Steuerelement generiert den folgenden HTML-Code:

    <asp:Repeater id="parentRepeater" runat="server"></asp:Repeater>

  10. 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>

  11. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf "NestedRepeater.aspx", und klicken Sie dann auf "Code anzeigen", um zur CodeBehind-Datei "NestedRepeater.aspx.cs" zu wechseln.

  12. Fügen Sie die folgende Namespacedeklaration am Anfang der Datei hinzu:

    using System.Data;
using System.Data.SqlClient;

  13. Fügen Sie dem Ereignis den Page_Load folgenden Code hinzu, um eine Verbindung mit der Pubs-Datenbank zu erstellen 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 Datenbankverbindungszeichenfolge entsprechend Ihrer Umgebung ändern.

  14. Speichern Sie alle Dateien.

  15. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf "NestedRepeater.aspx", und klicken Sie dann auf "Als Startseite festlegen".

  16. Klicken Sie im Menü "Erstellen " auf " Projektmappe erstellen ", um das Projekt zu kompilieren.

  17. Zeigen Sie die ASPX-Seite 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

  1. 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 den folgenden Code nach diesem 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.

  2. 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 Steuerelement) 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>

  3. Fügen Sie oben auf der Seite die folgende Seitendirektive hinzu:

    <%@ Import Namespace="System.Data" %>

  4. Ersetzen Sie auf der CodeBehind-Seite die folgende Zeile für das 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 hinzugefügt, und dann werden die Beziehungen zwischen den Tabellen und Titles den Authors Tabellen hinzugefügt.

  5. Speichern und kompilieren Sie die Anwendung.

  6. 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.