1. Open the myFirstDataPage.aspx file in Design view.
   
    
2. Remove the TextBox from the ASP.NET page.
   
    
3. Remove the Button from the ASP.NET page.
   
    
4. From the Web Controls tab in the Toolbox, drag a DropDownList control onto the ASP.NET page. Place the DropDownList in the same position on the form as the deleted TextBox. 

   

5. Set the AutoPostBack property of the DropDownList to True using the property grid (right hand side of the tool).
   
    
6. Select the Code tab.
   
    
7. Remove the Button1_Click event code.
   
    
8. From the Code Builders tab in the Toolbox, drag a SELECT Data Method Code Builder onto the bottom of the ASP.NET page.
   
    
9. You will see the Connect to Database dialog box appear.
   
    
10. Type localhost in the Server box (default).
    
     
11. Click the Database drop-down. ASP.NET Web Matrix will connect to the data source and populate the Database drop-down with database names. Select the Orders database developed in an earlier section of this walkthrough.
    
     
12. Click OK.
    
     
13. You will see step one of the Code Builder Wizard appear; it is called the Construct SELECT Query dialog box.

    

14. Select Orders in the Tables list view.
    
     
15. Select the check box next to the OrderID item in the Columns list view.
    
     
16. Click Next. 
    
     
17. You will see step two of the Code Builder Wizard appear; it is called the Query Preview dialog box.
    
     
18. Click Test Query.
    
     
19. You will see the Orders rows appear in the Query Preview dialog box results grid. 

    

20. Click Next.
    
     
21. You will see step three of the Code Builder Wizard appear. Type GetOrders into the method name box.
    
     
22. Select the DataSet radio button (default).
    
     
23. Click Finish.

    

24. The Wizard will close and ASP.NET Web Matrix will place a function called GetOrders in Code view. The function accepts no input parameters and returns a DataSet as an output parameter. The DataSet is populated with all of the OrderIDs in the Orders table:

     

    Function GetOrders() As System.Data.DataSet
        Dim connectionString As String = _
            "server='localhost'; trusted_connection=true; Database='Orders'"
            
        Dim sqlConnection As System.Data.SqlClient.SqlConnection = _
            New System.Data.SqlClient.SqlConnection(connectionString)
        
        Dim queryString As String = "SELECT [Orders].[OrderID] FROM [Orders]"
        
        Dim sqlCommand As System.Data.SqlClient.SqlCommand = _
            New System.Data.SqlClient.SqlCommand(queryString, sqlConnection)
        
        Dim dataAdapter As System.Data.SqlClient.SqlDataAdapter = _
            New System.Data.SqlClient.SqlDataAdapter(sqlCommand)
            
        Dim dataSet As System.Data.DataSet = New System.Data.DataSet
        
        dataAdapter.Fill(dataSet)
        
        Return dataSet
    End Function
    

25. Select the Code tab.
    
     
26. Add a Page_Load method event handler that populates the DropDownList with the results of calling the GetOrders function on the initial (non postback) visit to the ASP.NET Page:

     

    Sub Page_Load(Sender As Object, E As EventArgs)
    
        If Not Page.IsPostBack Then
            DropDownList1.DataTextField = "OrderID"
            DropDownList1.DataSource = GetOrders()
            DropDownList1.DataBind()
        End If  
        
    End Sub
    

27. Select the Design tab.
    
     
28. Double click on the Dropdownlist server control to create a SelectedIndexChanged event handler.
    
     
29. Add code for the DropDownList SelectedIndexChanged event that binds the DataList to the OrderID in the DropDownList:

     

    Sub DropDownList1_SelectedIndexChanged(sender As Object, e As EventArgs)
    
        DataList1.DataSource = GetOrderDetails(DropDownList1.Items(DropDownList1.SelectedIndex).Text)
        DataList1.DataBind()
    
    End Sub
    

30. Save and run the ASP.NET page.
    
     
31. Your ASP.NET page will automatically appear in a new instance of your Web browser.
    
     
32. Select 1 in the DropDownList.
    
     
33. The DataList will show all of the rows in the OrderDetails table for the specified OrderID. 

    

34. Close the Web browser instance.

Next Step >>