Creating a Simple Data-Display Page

Now that you ve created a database table to store data, you can create an ASP.NET Web page to display the data. To create this Web page, you ll be able to rely exclusively on the built-in data capabilities of Web Matrix no code to write!

Create the page and add data display to it

1. From the File menu, choose New.

2. In the Add New File dialog box, select General for the template, name your new page  FriendsDisplay.aspx, and click OK.

   Note 

   You might be surprised that you don t create a new page using one of the Data Pages templates available in the Add New File dialog box. Although you could, those templates are written specifically to read and write data in the Pubs sample database that comes with SQL Server. The data page templates are valuable to dissect when you know more about data access, but for now, it s easier to work with a blank page and add data access to it.

3. When the blank page is displayed, drag the Friends table from the Data window onto the page. This creates two controls: a SqlDataSourceControl control and an MxDataGrid control.

   When Web Matrix creates the controls, it also selects them. Click somewhere outside the controls to unselect them. Your page will then look like the following illustration:

   

The SqlDataSourceControl control is in a gray box because it isn t a visual control that is, the control won t show up (be rendered) on the page when the page runs in the browser. The purpose of the SqlDataSourceControl control is to encapsulate two data components: the connection object that manages communication with the database, and two command objects, one to select data and another to update it. (You won t use the update command in this chapter.) In short: the SqlDataSourceControl control is a single component that wraps up all the data access code required to talk to the Friends table. When you dropped the table onto the page, Web Matrix set the control s properties for you so that the control is configured and ready to talk to the database.

The MxDataGrid control displays the data. The control doesn t communicate directly with the database. Instead, the grid control references the SqlDataSourceControl control, which handles all the database communication. To display data, the MxDataGrid control calls upon the SqlDataSourceControl control, which in turn executes its SQL Select command to fetch the data. Note that the grid already recognizes the columns in the Friends table. Again, this is Web Matrix hard at work when you drop the table onto the page. Believe it or not, that s it a simple drag and drop and you re good to go.

Finally, to test the page, press F5. The page will run in the browser, and you ll see something like the Web page shown in Figure 9-4.

Figure 9-4: The data-display page when it s running in the browser.