How to display hierarchical data by using nested repeater controls and Visual C #. Net (zt)

How to display hierarchical data by using nested repeater controls and Visual C #. netview products that this Article applies.

Article ID	:	306154
Last Review	:	July 15,200 4
Revision	:	4.1

This article was previusly published under q306154on this page Summary

Bind to the parent table

Bind to the child table

Complete code list

Nestedrepeater. aspx

Nestedrepeater. aspx. CS

References

Summary

This article describes how to use nestedRepeaterControls to display hierarchical data. You can apply this concept to other list-bound controls.

Back to the top

Bind to the parent table

1.	Start Microsoft Visual Studio. NET.
2.	OnFileMenu, pointNew, And then clickProject.
3.	ClickVisual C # ProjectsUnderProject types, And then clickASP. NET web applicationUnderTemplates.
4.	InLocationBox, delete the webapplication#, And then typeNestedrepeater. If you use the local server, leave the server nameHttp: // localhost. The following path appears inLocationBox: Http: // localhost/nestedrepeater ClickOK.
5.	InSolution Explorer, Right-clickNestedrepeaterProject Name node, pointAdd, And then clickAdd web form.
6.	To name the web form, TypeNestedrepeater, And clickOpen.
7.	The new web form is created. It opens in design view in the integrated development environment (IDE) of Microsoft Visual Studio. NET. From the toolbox, selectRepeaterControl, and then drag it to the web form page.
8.	ChangeIDProperty of thisRepeaterControlParentrepeater.
9.	switch to the HTML view for this web form. to do so, click the HTML tab in the lower-left corner of the designer. the repeater Control generates the following HTML code:
10.	Add the following code in the repeater tags: <% # databinder. eval (container. dataitem, "au_id ") %> after you do that, the HTML code for the repeater is as follows: <% # databinder. eval (container. dataitem, "au_id") %>
11.	In Solution Explorer, right-clickNestedrepeater. aspx, And then clickView codeTo switch to the nestedrepeater. aspx. CS code-behind file.
12.	Add the following namespace declaration to the top of the file: Using system. Data; using system. Data. sqlclient;
13.	Add the following code to Page_load Event to create a connection to Pubs Database, and then to bind Authors Table to Repeater Control: 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 (); arrays 1.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 ();} Note: You may have to modify the database connection string as appropriate for your environment.
14.	Save all of the files.
15.	InSolution Explorer, Right-click the nestedrepeater. aspx, and then clickSet as start page.
16.	OnBuildMenu clickBuild SolutionTo compile the project.
17.	View the. ASPX page in the browser, and then verify that the page works thus far. The output shoshould appear as follows: • 172 to 32-1176 • 213 to 46-8915 • 238-95-7766. • 267 to 41-2394 • ...

Back to the top

Bind to the child table

1.	In the HTML view of the nestedrepeater. ASPX page, locate the following line of code: <B> <% # databinder. eval (container. dataitem, "au_id") %> </B> <br> Add the following code after this Code: <Asp: repeater id = "childrepeater" runat = "server"> <itemtemplate> <% # databinder. eval (container. dataitem, "[\" title_id \ "]") %> <br> </itemtemplate> </ASP: repeater> This new Code adds a secondRepeaterControl toItemtemplateProperty of the parentRepeaterControl.
2.	Set Datasource Property for the childRepeater Control as follows: <Asp: repeater... datasource = '<% # (datarowview) container. dataitem). Row. getchildrows ("myrelation") %>'> After you setDatasourceProperty for the childRepeaterControl, the HTML code for the twoRepeaterControls (Parent and Child) appears as follows: <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>
3.	Add the following page directive to the top of the page: <% @ Import namespace = "system. Data" %>
4.	In the code-behind page, replace the following line in the page_load event // insert code in Step 4 of the next section here. with the following code: // create a second dataadapter for the titles table. sqldataadapter cmd2 = new sqldataadapter ("select * From titleauthor", CNN); Limit 2.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.	Save and compile the application.
6.	View the page in the browser, and then verify that the page works so far. The output shoshould appear as follows: 172 to 32-1176 Ps3333 213 to 46-8915 Bu1032 Bu2075 238-95-7766. Pc1035 267 to 41-2394 Bu1111 Tc7777 ...

Back to the top

Complete code list

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> 
 

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 (); arrays 1.fill (DS, "Authors"); // create a second dataadapter for the titles table. sqldataadapter cmd2 = new sqldataadapter ("select * From titleauthor", CNN); Limit 2.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 );}}}

Back to the top

References

For more information, refer to the following topics in the Microsoft. NET Framework software development kit (SDK ):

Adding a relationship between tables
Http://msdn.microsoft.com/library/default.asp? Url =/library/en-US/cpguide/html/cpconaddingrelationshipbetweentwotables. asp (Http://msdn.microsoft.com/library/default.asp? Url =/library/en-US/cpguide/html/cpconaddingrelationshipbetweentwotables. asp)

Navigating a relationship between tables
Http://msdn.microsoft.com/library/default.asp? Url =/library/en-US/cpguide/html/cpconnavigatingrelationshipbetweentwotables. asp(Http://msdn.microsoft.com/library/default.asp? Url =/library/en-US/cpguide/html/cpconnavigatingrelationshipbetweentwotables. asp)

Repeater Web Server Control
Http://msdn.microsoft.com/library/default.asp? Url =/library/en-US/cpgenref/html/cpconrepeaterwebservercontrol. asp(Http://msdn.microsoft.com/library/default.asp? Url =/library/en-US/cpgenref/html/cpconrepeaterwebcontrol. asp)

Back to the top