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

Article translations Article translations
Article ID: 308485 - View products that this article applies to.
This article was previously published under Q308485
Expand all | Collapse all

On This Page


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):
    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
            dataset.EnforceConstraints = True
        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"),
                parentrows = New DataView()
                parentrows.Table = Me.CustomersOrders1.Tables("Customers")
                currentparentrow = parentrows(Me.DataGrid1.SelectedIndex)
                childrows = currentparentrow.CreateChildView("relation")
                Me.DataGrid2.DataSource = childrows
                Me.DataGrid2.Visible = True
                Me.DataGrid2.Visible = False
            End If
        End Sub
        Private Sub DataGrid1_SelectedIndexChanged(ByVal sender As
    System.Object, ByVal e As System.EventArgs) Handles
        End Sub
        Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As
    System.EventArgs) Handles Button1.Click
            Me.DataGrid1.SelectedIndex = -1
            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()
        End Sub


For more information about the DataGrid control, visit the following Microsoft Web site:
DataGrid Web Server Control

For additional information about data binding, click the article number below to view the article in the Microsoft Knowledge Base:
307860 INFO: ASP.NET Data Binding Overview


Article ID: 308485 - Last Review: June 12, 2003 - Revision: 2.4
  • Microsoft ASP.NET 1.1
  • Microsoft ASP.NET 1.0
kbdatabinding kbhowtomaster kbservercontrols kbwebforms KB308485

Give Feedback


Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from