To create the details page

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

2. Switch to Design view.

3. Type Students in the page and format the text as a heading.

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

5. In the smart tag panel, from the Choose Data Source list choose < New Data Source >.

6. In the Select a data source type list, click Database and then click OK.

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

8. Click Next.

9. The wizard displays a page where you can create a SQL statement.

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

11. In the Columns box, check StudentId, StudentName and CourseId.

12. Click WHERE.

13. From the Columns list, select CourseId.

14. From the Operators list, select =.

15. From the Source list, select QueryString.

16. This specifies that the query will select records based on the value passed into the page with the query string.

17. Under Parameter Properties, in the QueryString field box, type CourseId.

18. The query will get the CourseId value from the query string, which is created when you click a Details link in the MasterCourses.aspx page.

19. Click Add.

20. Click OK to close the Add WHERE Clause dialog box.

21. Click Next, and then click Finish to close the wizard.

22. From the Standard node of the Toolbox, drag a Hyperlink control onto the page. Set its Text property to Return to Courses and its NavigateUrl property to MasterCourses.aspx.

The Master-details pages can now be tested. The DetailsCourses.aspx design screen should look as under.

To test the pages

1. Switch to the MasterCourses.aspx page.

2. Press CTRL+F5 to run the page.

3. Click the Details link for a coursedetails.

4. The browser displays the DetailsCourse.aspx page with course for the selected courseid. Note that the URL in the browser's Address box is: DetailsCourses.aspx?CourseId=xxx. Where xxx is the ID of the course selected.

5. Click the Return to courses link, select a different course, and click the Details link again to test that you can view courses for any student.

Allowing Editing, Deleting, and Inserting Using a DetailsView Control

1. Right-click the DetailsView control and then click Show Smart Tag.

2. On the Common DetailsView Tasks menu, select Enable Inserting, Enable Editing, and Enable Deleting boxes.

In this section of the tutorial we have explored the DetailsView control and used it in combination with the GridView to view data from different tables on the same page or on different pages. The potentiality of use is limited only to the imagination of the user.

In the next section of this tutorial we shall be examining the FormsView control in detail.

First Page: Displaying Master-Detail Data on Separate Pages in ASP.NET 2.0