ASP.NET Displaying Master-Detail Data on the Same Page

ASP.NET : Displaying Master-Detail Data on the Same Page

In this tutorial you will learn how to display Master-Detail Data on the same page, To display the master records, To configure a query to display related records and To test the page

Data from related tables can be displayed on one page. The master table data is displayed in a grid and users can select individual rows. When they select a row, one or more details of records are displayed I a scrollable control elsewhere on the page. We shall use the StudentMaster as the master table and the CourseDetails as the details table.

To display the master records

1. Add a new page to the Web site and name it MasterDetails2.aspx.

2. Switch to Design view.

3. Type Master-Detail Page in the page and format the text as a heading.

4. From the Data group of the Toolbox, drag a GridView control onto the page.

5. In the Common GridView Tasks menu, in the Choose Data Source list click < New Data Source > and then use these steps to configure a data source for the GridView control:

.......a. Select Database.

.......b. Click OK.

.......c. From the Choose a data connection list, select the connection you created and stored earlier.

.......d. Click Next.

.......e. From the Name list under Table or View Options, select CourseDetails.

.......f. In the Columns box, check CourseId and CourseName.

.......g. Click Next and then click Finish.

6. Select the GridView control and in the Common GridView Tasks menu, choose Edit Columns.

7. The Fields dialog box is displayed:

8. Under Available Fields, open the Command Field node, choose Select, and then click Add to add it to the Selected fields list.

9. In the Selected Fields list, select the new button and then in the property grid, set its SelectText property to Details.

10. Click OK to close the Fields dialog box.

11. A new column with a Details hyperlink is added to the grid.

12. Select the GridView control and in the Properties window, be sure its DataKeyNames property is set to CourseId.

13. This specifies that when a row is selected in the grid, ASP.NET can find the key of the currently displayed Categories record in a known location.

14. The grid allows you to select an individual category. The next step is to add the DetailsView control that will display the detail records — the Student records associated with the selected category. The DetailsView control will use a different SQL query to get its data, so it requires a second data source control.