HOW TO: Create a Master/Detail Page with Web Form Controls

This article describes how to use Web Form controls to display a list of items or records that are associated with a particular item or record that is selected by a user.

If your DataSet object contains a series of related tables, you can use two DataGrid controls to display the data in a master/detail format. One DataSet is designated to be the master grid, and the second is designated to be the details grid. When a user selects an entry in the master list, all of the related child entries are shown in the details list.

For example, if your DataSet contains a customers table and a related orders table, you specify the customers table to be the master grid and the orders table to be the details grid. When a customer is selected in the master grid, all of the orders that are associated with the customer in the orders table are displayed in the details grid.

Create a Sample Project

1. Start Microsoft Visual Studio .NET. The Visual Studio .NET IDE is displayed.
2. On the File menu, point to New, and then click Project.
3. In the New Project dialog box, click Visual Basic Projects under Project Types, and then click ASP.NET Web Application under Templates.
4. In the New Project dialog box, locate the Name and Location text boxes. Notice that the Name box is unavailable (appears dimmed). The Location text box contains the following text (or similar):
   http://localhost/WebApplication1
   Change "http://localhost/WebApplication1" to http://localhost/MasterDetailTest, and then click OK. A new project is created, which includes a Web Form that is named WebForm1.aspx.

Add a Data Connection

1. On the View menu, click Server Explorer.
2. Right-click Data Connections, and then click Add Connection.
3. On the Provider tab, click Microsoft OLE DB Provider for SQL Server.
4. On the Connection tab, type the name of the server that is running Microsoft SQL Server, the user name, and the password to access the server that is running SQL Server, and then select the NorthWind database.
5. Click Test Connection to verify that the connection works, and then click OK.

Prepare the Web Form

1. In Project Explorer, click the WebForm1.aspx page.
2. Right-click the WebForm1.aspx page, and then click Properties.
3. On the General tab, click FlowLayout under Page Layout, and then click OK.
4. Verify that the WebForm1.aspx page is in Design view by clicking the Design tab on the Web Form.
5. Drag a Button control from the toolbox to the page, and then type Load as the button text.

Prepare the DataGrid Controls

1. Drag two DataGrid controls from the toolbox to the Web Form.
2. Right-click the first DataGrid that you added to the Web form, which is named DataGrid1, and then click Property Builder.
3. In the available columns section, click Columns, and then add a Button Column to the Selected Columns.
4. Click the button column, type Show Details as the text, type select as the Command Name, and then verify that Link Button is selected for Button Type. Click OK.
5. In the Paging section, click to select the Allow Paging check box, and then set the page size to 5. Click OK.
6. Right-click the second DataGrid that you added to the Web Form, which is named Datagrid2, and then click Property Builder.
7. In the Paging section, click to select the Allow Paging check box, and then set the page size to 5.

Work with the Data

1. On the View menu, click Server Explorer.
2. Drag the Orders table and the Customers table from Server Explorer to the form. Notice that one SqlConnection object and two SqlDataAdapter objects appear on the form.
3. On the Data menu, click Generate DataSet. In the dialog box that appears, make sure that all of the tables that you must have for the grid are selected. Make sure that New is selected for the DataSet and that Add this DataSet to the designer is selected. In the New Selection text box, type CustomersOrders to name the DataSet. Notice that a DataSet control appears on the Web Form.
4. In Project Explorer, double-click the CustomersOrders.xsd file.
5. Right-click the key field in the Customers master table, point to Add, and then click New Relation.
6. In the Edit Relation dialog box, under Name, type Relation.
7. Under Parent element, click Customers. Under Child element, click Orders.
8. Verify that Key Fields and Foreign Key Fields are set to CustomerID, and then click OK.
9. Save the relationships by selecting Save All on the File menu.

Final DataGrid Configurations

1. In Project Explorer, double-click the WebForm1.aspx page.
2. Select the first DataGrid that you added to the page, named DataGrid1.
3. In the Properties window, set the following values:
   1. In the DataSource property box, click CustomersOrders1.
   2. In the DataMember property box, click Customers.
   3. In the DataKeyField property box, click CustomerID.

Code to Complete the Sample

1. Right-click WebForm1.aspx, and then click View Code.
2. Add the following code to the WebForm1.aspx page:

   Public Sub FillDataSet(ByVal dataset As MasterDetailTest.CustomersOrders)
           dataset.EnforceConstraints = False
           Me.SqlConnection1.Open()
           Me.SqlDataAdapter1.Fill(dataset)
           Me.SqlDataAdapter2.Fill(dataset)
           dataset.EnforceConstraints = True
           Me.SqlConnection1.Close()
   
       End Sub
   
       Private Sub Showdetailgrid()
           If (Me.DataGrid1.SelectedIndex <> -1) Then
               Dim parentrows As System.Data.DataView
               Dim childrows As System.Data.DataView
               Dim currentparentrow As System.Data.DataRowView
               Me.CustomerOrders1 = CType(Application("CustomersOrders1"),
   MasterDetailTest.CustomersOrders)
               parentrows = New DataView()
               parentrows.Table = Me.CustomersOrders1.Tables("Customers")
               currentparentrow = parentrows(Me.DataGrid1.SelectedIndex)
               childrows = currentparentrow.CreateChildView("relation")
               Me.DataGrid2.DataSource = childrows
               Me.DataGrid2.DataBind()
               Me.DataGrid2.Visible = True
           Else
               Me.DataGrid2.Visible = False
   
   
           End If
       End Sub
   
       Private Sub DataGrid1_SelectedIndexChanged(ByVal sender As
   System.Object, ByVal e As System.EventArgs) Handles
   DataGrid1.SelectedIndexChanged
           Me.Showdetailgrid()
   
       End Sub
   
   
       Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As
   System.EventArgs) Handles Button1.Click
           Me.LoadDataSet()
           Me.DataGrid1.SelectedIndex = -1
           Me.DataGrid1.DataBind()
           Me.DataGrid2.Visible = False
           Application("CustomersOrders1") = Me.CustomersOrders1
   
       End Sub
   
   'Create a new DataSet to hold the records returned from the call to FillDataSet().
   'A temporary dataset is used, because filling the existing DataSet would
   'require the databindings to be rebound.
       Public Sub LoadDataSet()
           Dim objdatasettemp As MasterDetailTest.CustomersOrders
           objdatasettemp = New MasterDetailTest.CustomersOrders()
           Me.FillDataSet(objdatasettemp)
           CustomersOrders1.Clear()
           CustomersOrders1.Merge(objdatasettemp)
   
       End Sub
   					

For more information about the DataGrid control, visit the following Microsoft Web site: For additional information about data binding, click the article number below to view the article in the Microsoft Knowledge Base: