Como exibir dados hierárquicos usando controles Repeater aninhados e Visual C#.NET

Vincular a tabela pai

1. Inicie o Microsoft Visual Studio.NET.
2. No menu arquivo , aponte para novoe clique em projeto.
3. Clique em Projetos do Visual C# em Tipos de projetoe clique em ASP.NET Web Application em modelos.
4. Na caixa local , exclua o WebApplication#, e Digite NestedRepeater. Se você usar o servidor local Deixe o nome do servidor como http://localhost. Aparece o seguinte caminho na caixa local :
   http://localhost/ NestedRepeater
   Clique em OK.
5. No Solution Explorer, clique com o botão direito no nó do nome de projeto NestedRepeater , aponte para Adde, em seguida, clique em Add Web Form.
6. Para nomear o formulário da Web, digiteNestedRepeatere clique em Abrir.
7. O novo formulário da Web é criado. Ele é aberto no modo Design do Ambiente de desenvolvimento integrado (IDE) do Microsoft Visual Studio.NET. Do caixa de ferramentas, selecione o controle Repeater e arraste-o para a página de formulário da Web.
8. Altere a propriedade ID do controle Repeater para parentRepeater.
9. Alterne para o modo de exibição HTML desse formulário da Web. Para fazer isso, clique em na guia HTML no canto inferior esquerdo do Designer. O controle Repeater gera o seguinte código HTML:

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

10. Adicione o seguinte código nas marcas Repeater :

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

    Depois de fazer isso, o código HTML para Repeater é o seguinte:

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

11. No Solution Explorer, clique com o botão direito NestedRepeater.aspxe clique em View Code para alternar para o code-behind NestedRepeater.aspx.cs arquivo.
12. Adicione a seguinte declaração de namespace na parte superior do arquivo:

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

13. Adicione o seguinte código ao evento Page_Load para criar uma conexão ao banco de dados Pubs e vincular a tabela autores ao controle 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();
           }
    					

    Observação: talvez seja necessário modificar a seqüência de conexão de banco de dados como apropriado para seu ambiente.
    
    
14. Salve todos os arquivos.
15. Em Explorer solução, com o botão direito do NestedRepeater.aspx e clique em Definir como página inicial.
16. No menu Build , clique em Build Solution para compilar o projeto.
17. Exibir a página. aspx no navegador e verifique a página funciona até o momento.
    
    A saída deve aparecer da seguinte maneira:
    • 172-32-1176
    • 213-46-8915
    • 238-95-7766
    • 267-41-2394
    • ...

Vincular a tabela filho

1. No modo de exibição HTML da página NestedRepeater.aspx, localize a seguinte linha de código:

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

   Adicione o seguinte código após esse código:
   

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

   Esse novo código adiciona um segundo controle Repeater à propriedade ItemTemplate do controle Repeater pai.
2. Defina a propriedade DataSource para o filho controle Repeater , como segue:

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

   Depois de definir a propriedade DataSource para o filho controle Repeater , o código HTML para os dois controles Repeater (pai e filho) aparece da seguinte maneira:
   

   <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. Adicione a seguinte diretiva de página na parte superior da página:

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

4. Na página code-behind, substitua a seguinte linha no evento Page_Load

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

   com o seguinte código:

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

   Isso adiciona a tabela de títulos para o DataSete, em seguida, adiciona as relações entre autores e títulos tabelas.
   
5. Salvar e compilar o aplicativo.
6. Exibir a página no navegador e verificar se a página funciona até agora. A saída deve aparecer da seguinte maneira:
   172-32-1176
   PS3333
   213-46-8915
   BU1032
   BU2075
   238-95-7766
   PC1035
   267-41-2394
   BU1111
   TC7777
   ...

Lista de código completa

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>
				

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

Voltar para o início | Submeter comentários