Mostrar datos jerárquicos mediante controles Repeater anidados y Visual C# .NET

Artículo
03/24/2024

En este artículo se proporciona información sobre cómo mostrar datos jerárquicos mediante controles Repeater anidados y Visual C# .NET.

Versión original del producto: Visual C#
Número de KB original: 306154

Resumen

En este artículo se describe cómo usar controles Repeater anidados para mostrar datos jerárquicos. Puede aplicar este concepto a otros controles enlazados a lista.

En este artículo se hace referencia a los siguientes espacios de nombres de la biblioteca de clases de Microsoft .NET Framework:

System.Data
System.Data.SqlClient

Enlazar a la tabla primaria

Inicie Visual Studio .NET.
En el menú Archivo, elija Nuevo y, a continuación, haga clic en Proyecto.
Haga clic en Proyectos de Visual C# en Tipos de proyecto y, a continuación, haga clic en ASP.NET aplicación web en Plantillas.
En el cuadro Ubicación , elimine WebApplication#y escriba NestedRepeater. Si usa el servidor local, deje el nombre del servidor como http://localhost. La http://localhost/NestedRepeater ruta de acceso aparece en el cuadro Ubicación . Haga clic en Aceptar.
En Explorador de soluciones, haga clic con el botón derecho en el nodo Nombre del proyecto NestedRepeater, seleccione Agregary, a continuación, haga clic en Agregar formulario web.
Para asignar un nombre al formulario web, escriba NestedRepeater y haga clic en Abrir.
Se crea el nuevo formulario web. Se abre en la vista Diseño en el entorno de desarrollo integrado (IDE) de Visual Studio .NET. En el cuadro de herramientas, seleccione el control Repeater y arrástrelo a la página Formulario web.
Cambie la propiedad ID de este control Repeater a parentRepeater.
Cambie a la vista HTML de este formulario web. Para ello, haga clic en la pestaña HTML de la esquina inferior izquierda de la Designer. El control Repeater genera el siguiente código HTML:
```
<asp:Repeater id="parentRepeater" runat="server"></asp:Repeater>
```

Agregue el código siguiente en las Repeater etiquetas:

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

Después de hacerlo, el código HTML para repeater es el siguiente:

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

En Explorador de soluciones, haga clic con el botón derecho en NestedRepeater.aspx y, a continuación, haga clic en Ver código para cambiar al archivo de código subyacente de NestedRepeater.aspx.cs.
Agregue la siguiente declaración de espacio de nombres a la parte superior del archivo:
```
using System.Data;
using System.Data.SqlClient;
```

Agregue el código siguiente al Page_Load evento para crear una conexión a la base de datos Pubs y, a continuación, para enlazar la Authors tabla al control 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();
 }

Nota:

Es posible que tenga que modificar la base de datos cadena de conexión según corresponda para su entorno.

Guarde todos los archivos.
En Explorador de soluciones, haga clic con el botón derecho en el NestedRepeater.aspx y, a continuación, haga clic en Establecer como página de inicio.
En el menú Compilar , haga clic en Compilar solución para compilar el proyecto.
Vea la página .aspx en el explorador y, a continuación, compruebe que la página funciona hasta ahora. La salida debe aparecer de la siguiente manera:
```
172-32-1176
213-46-8915
238-95-7766
267-41-2394
...
```

Enlace a la tabla secundaria

En la vista HTML de la página NestedRepeater.aspx , busque la siguiente línea de código:

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

Agregue el código siguiente después de este código:

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

Este nuevo código agrega un segundo control Repeater a la ItemTemplate propiedad del control Repeater primario.

Establezca la DataSource propiedad para el control Repeater secundario de la siguiente manera:

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

Después de establecer la DataSource propiedad para el control Repeater secundario, el código HTML de los dos controles Repeater (primario y secundario) aparece de la siguiente manera:

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

Agregue la siguiente directiva de página a la parte superior de la página:
```
<%@ Import Namespace="System.Data" %>
```

En la página de código subyacente, reemplace la siguiente línea en el Page_Load evento:

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

Esto agrega la Titles tabla al conjunto de datos y, a continuación, agrega las relaciones entre las Authors tablas y Titles .

Guarde y compile la aplicación.
Vea la página en el explorador y compruebe que la página funciona hasta ahora. La salida debe aparecer de la siguiente manera:
```
172-32-1176
PS3333
213-46-8915
BU1032
BU2075
238-95-7766
PC1035
267-41-2394
BU1111
TC7777
```

código 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>

código 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);
        }
    }
}

Más información

Para obtener más información, vea Control de servidor web repetidor.