Build an End

Build an End-to-End Application

Create Master/Detail Data page

In this walkthrough, you will create a new Data Page based on the Master - Details Grid project template. You will bind the Data Page to the Orders and OrderDetails tables in the Orders database.

Select New from the File menu. You will see the New File dialog box appear.
Select Data Pages from the Templates pane.
Select the Master - Details Grids template.
Type a file path in the Location box.
Type Default.aspx in the Filename box.
Select Visual Basic in the Language drop-down box.
Click OK. The Default.aspx file will open in Design view.
Select the Code tab.
Note The ASP.NET Web Matrix has automatically placed code to bind the MasterGrid to a subroutine called BindMasterGrid and the DetailsGrid to a subroutine called BindDetailGrid.

Modify the ConnectionString and CommandText variables in the BindMasterGrid subroutine so they reference the columns in the Orders table in the Orders database.

Dim ConnectionString As String = "server=(local);database=Orders;Integrated Security=SSPI"

Dim CommandText As String = "select OrderID, OrderDate, CustomerName from Orders"

Modify the ConnectionString and CommandText variables in the BindDetailGrid subroutine so they reference the columns in the OrderDetails table in the Orders database.

Dim ConnectionString As String = "server=(local);database=Orders;Integrated Security=SSPI"

Dim CommandText As String = "select OrderDetailID, ProductName, Quantity, UnitPrice " & _
    "from OrderDetails where OrderID = '" & filterValue & "'"

Select the Design tab.
Set the DataKeyField property of the MasterGrid to OrderID. The DataKeyField property is used to filter rows in the detail grid.
Replace the default page header text (Master - Detail Grids) with a Label control from the Web Controls tab in the Toolbox.
Set the ID property of the Label to Welcome.
Select the Code tab.

Modify the Page_Load event code so it sets the Text property of the Label to the username of the current user and binds the data grids:

Sub Page_Load(Sender As Object, E As EventArgs)

    Welcome.Text = "Hello, " + User.Identity.Name

    If Not Page.IsPostBack Then

        ' Databind the master grid on the first request only
        ' (viewstate will restore these values on subsequent postbacks).

        MasterGrid.SelectedIndex = 0
        BindMasterGrid()
        BindDetailGrid()

    End If

End Sub

Save and run the ASP.NET page.
Your ASP.NET page will automatically appear in a new instance of your Web browser. Select a row in the MasterGrid. Note how the DetailsGrid updates with each selected MasterGrid row. Note that the username may or may not show up depending upon your file system security settings. By default on most servers, the username will not show up -- because a user accessing the page does not need to be logged in to view it (anonymous access is allows). We will be changing these defaults in the next few walkthroughs to force users to login.
Close the Web browser instance.

Next Step >>