Como exibir dados hierárquicos usando controles Repeater aninhados e Visual translation from VPE for Csharp .NET

Voltar para o início

Vincular a tabela pai

1. Inicie o Microsoft Visual Studio NET..
2. No menu arquivo , aponte para novo e, em seguida, clique em Project .
3. Clique em projetos do Visual translation from VPE for Csharp em Tipos de projeto e, em seguida, 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 . O caminho a seguir aparece na caixa local :
   http://localhost/ NestedRepeater
   Clique em OK .
5. No Solution Explorer , clique com o botão direito no nó de nome de projeto NestedRepeater , aponte para Add e, em seguida, clique em Add Web Form .
6. Para nomear o formulário da Web, digite NestedRepeater e clique em Abrir .
7. O novo formulário da Web é criado. Ele abre no modo Design no ambiente de desenvolvimento integrado (IDE) do Microsoft Visual Studio. NET. Na caixa de ferramentas, selecione o controle Repeater e arraste-o para a página Web Form.
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 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 que você fizer, o código HTML para Repeater é da seguinte maneira:

    <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 do mouse NestedRepeater.aspx e, em seguida, clique em View Code para alternar para o arquivo de code-behind NestedRepeater.aspx.cs.
12. Adicione a declaração de namespace a seguir 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 string de conexão de banco de dados conforme apropriado para seu ambiente.
    
    
14. Salve todos os arquivos.
15. No Solution Explorer , clique o NestedRepeater.aspx com o botão direito do mouse e clique em Set As Start Page .
16. No menu Build , clique em Build Solution para compilar o projeto.
17. Exibir a página .aspx no navegador e, em seguida, verifique se 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
    • ...

Voltar para o início

Vincular a tabela filho

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

   <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. Definida a propriedade DataSource para o filho controle Repeater da seguinte maneira:

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

   This ADDS the Titles table to the DataSet, and then ADDS the Relationships between the Authors and Titles Tables.
   
5. Salve e compilar o aplicativo.
6. Visualize a página no navegador e, em seguida, verifique se a página funciona até o momento. 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
   ...

Voltar para o início

Concluir lista de 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>
				

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