Afficher des données hiérarchiques à l’aide de contrôles Repeater imbriqués et de Visual C# .NET

Article
03/20/2024

Cet article fournit des informations sur l’affichage des données hiérarchiques à l’aide de contrôles Repeater imbriqués et de Visual C# .NET.

Version d’origine du produit : Visual C#
Numéro de la base de connaissances d’origine : 306154

Résumé

Cet article explique comment utiliser des contrôles Repeater imbriqués pour afficher des données hiérarchiques. Vous pouvez appliquer ce concept à d’autres contrôles liés à une liste.

Cet article fait référence aux espaces de noms de bibliothèque de classes Microsoft .NET Framework suivants :

System.Data
System.Data.SqlClient

Lier à la table parente

Démarrez Visual Studio .NET.
On the File menu, point to New, and then click Project.
Cliquez sur Projets Visual C# sous Types de projets, puis cliquez sur ASP.NET application web sous Modèles.
Dans la zone Emplacement , supprimez webApplication#, puis tapez NestedRepeater. Si vous utilisez le serveur local, laissez le nom du serveur comme http://localhost. Le http://localhost/NestedRepeater chemin d’accès s’affiche dans la zone Emplacement . Cliquez sur OK.
Dans Explorateur de solutions, cliquez avec le bouton droit sur le nœud nom du projet NestedRepeater, pointez sur Ajouter, puis cliquez sur Ajouter un formulaire web.
Pour nommer le formulaire web, tapez NestedRepeater, puis cliquez sur Ouvrir.
Le nouveau formulaire web est créé. Il s’ouvre en mode Création dans l’environnement de développement intégré (IDE) de Visual Studio .NET. Dans la Boîte à outils, sélectionnez le contrôle Repeater, puis faites-le glisser vers la page Web Form.
Remplacez la propriété ID de ce contrôle Repeater par parentRepeater.
Basculez vers l’affichage HTML de ce formulaire web. Pour ce faire, cliquez sur l’onglet HTML dans le coin inférieur gauche du Designer. Le contrôle Repeater génère le code HTML suivant :
```
<asp:Repeater id="parentRepeater" runat="server"></asp:Repeater>
```

Ajoutez le code suivant dans les Repeater balises :

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

Après cela, le code HTML du répéteur est le suivant :

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

Dans Explorateur de solutions, cliquez avec le bouton droit sur NestedRepeater.aspx, puis cliquez sur Afficher le code pour basculer vers le fichier code-behind NestedRepeater.aspx.cs.
Ajoutez la déclaration d’espace de noms suivante en haut du fichier :
```
using System.Data;
using System.Data.SqlClient;
```

Ajoutez le code suivant à l’événement Page_Load pour créer une connexion à la base de données Pubs , puis lier la Authors table au contrôle Repeater :

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

Remarque

Vous devrez peut-être modifier la base de données chaîne de connexion en fonction de votre environnement.

Enregistrez tous les fichiers.
Dans Explorateur de solutions, cliquez avec le bouton droit sur le NestedRepeater.aspx, puis cliquez sur Définir comme page de démarrage.
Dans le menu Générer , cliquez sur Générer la solution pour compiler le projet.
Affichez la page .aspx dans le navigateur, puis vérifiez que la page fonctionne jusqu’à présent. La sortie doit apparaître comme suit :
```
172-32-1176
213-46-8915
238-95-7766
267-41-2394
...
```

Lier à la table enfant

Dans la vue HTML de la page NestedRepeater.aspx , recherchez la ligne de code suivante :

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

Ajoutez le code suivant après ce code :

<asp:repeater id="childRepeater" runat="server">
    <itemtemplate>
        <%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%>
        <br>
    </itemtemplate>
</asp:repeater>

Ce nouveau code ajoute un deuxième contrôle Repeater à la ItemTemplate propriété du contrôle Repeater parent.

Définissez la DataSource propriété pour le contrôle Repeater enfant comme suit :

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

Une fois que vous avez défini la DataSource propriété pour le contrôle Repeater enfant, le code HTML des deux contrôles Repeater (parent et enfant) s’affiche comme suit :

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

Ajoutez la directive de page suivante en haut de la page :
```
<%@ Import Namespace="System.Data" %>
```

Dans la page code-behind, remplacez la ligne suivante dans l’événement Page_Load :

//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"]);

Cela ajoute la Titles table au DataSet, puis ajoute les relations entre les Authors tables et Titles .

Enregistrez et compilez l’application.
Affichez la page dans le navigateur, puis vérifiez que la page fonctionne jusqu’à présent. La sortie doit apparaître comme suit :
```
172-32-1176
PS3333
213-46-8915
BU1032
BU2075
238-95-7766
PC1035
267-41-2394
BU1111
TC7777
```

code Nestedrepeater.aspx

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

code Nestedrepeater.aspx.cs

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

Plus d’informations

Pour plus d’informations, consultez Repeater Web Server Control.