Examining Data Components in the Page

Before you finish this chapter, let s review what Web Matrix actually did for you when you dropped the table onto the page.

Examine the data-bound page

1. Switch to HTML view. Unfortunately, the elements on this page are extremely wide and won t wrap, so it s a bit difficult to see them. You ll need to use the horizontal scrollbar at the bottom to look at elements.

   Tip 

   You can drag the edges of the Properties windows to shrink them a little and give yourself a little more room to see the HTML text. You can also press F2 to hide the Toolbox. For the current procedure, you might even want to select and copy the HTML text to a different editor that does wrap the lines.

2. Look at the element <wmx:SqlDataSourceControl>. As I said earlier in the section Creating a Simple Data-Display Page, the SqlDataSourceControl control incorporates both a connection object and a command object. Web Matrix generated an UpdateCommand attribute, which you don t need this time around. In particular, you should notice the following two attributes:

   • The ConnectionString attribute is how the connection object stores the information needed to make a connection to your local copy of MSDE. It contains the name of the database server (the MSDE instance name, such as localhost); the name of the database to connect to (WebMatrix); and the login credentials. Because I suggested that you use Windows integrated security when making the connection, the connection string contains the attribute trusted_connection=true, which tells the connection to use your current user account to access MSDE.

   • The SelectCommand attribute contains the SQL statement that fetches data from the Friends table. When the page runs, the statement in the SelectCommand attribute runs and gets a result set.

3. Look at the element <wmx:MxDataGrid>. This element has about a zillion attributes, it seems. This grid element contains a host of child elements and even grandchildren elements that set properties of different portions of the grid.

4. Look at the DataSourceControlID attribute. This attribute tells the grid where it s supposed to read its data from. In this example, the attribute is set to SqlDataSourceControl1, which is the ID of the control you examined in step 2. You can perhaps see how the grid gets its data: the SqlDataSourceControl component establishes a connection to the database, executes a query, and fetches the data. The MxDataGrid control invokes a data reader to read rows out of the result set and display them in the grid. This control contains the following attributes and subelements:

   • The DataMember attribute is set to Friends, which is the name of the table you re displaying. This attribute helps the control determine what columns to create.

   • The AllowPaging attribute is set to True, which is why you re getting a page number at the bottom of the grid.

   • The <Fields> element contains the column definitions. Within the <Fields> element, you can see a <wmx:BoundField> element for each column being displayed.

   • The <HeaderStyle>, the <FooterStyle>, and the <PagerStyle> elements are used to set the display properties of the grid s header, footer, and pager sections.

   • The <SelectedItemStyle> and <AlternatingItemStyle> elements are used to set the grid s items and alternating items. For example, the backcolor attribute of the <AlternatingItemStyle> element is set to the color you selected for alternating items.

Poking around in the HTML for a control such as MxDataGrid can be a bit daunting, I find. That s one of the reasons that using Web Matrix is so great can you imagine having to type all this code in using an application such as Notepad?

One final note. When you first started working with Web controls in Chapter 4, I had you look at the HTML elements for a button and text box and label. The HTML elements for those controls had an <asp:> prefix, which I said indicated that they were server controls controls that don t exist in HTML, only on the server. On the FriendsDisplay page, you have the MxDataGrid control, which likewise is a server control, this type with the prefix <wmx:>. The wmx in the prefix stands for Web Matrix, because the MxDataGrid control is a new control for ASP.NET introduced with Web Matrix. In the case of the grid control, it s probably clearer to you that there s no HTML element like the MxDataGrid control. In fact, if you run the page and look at the source in the browser, you ll see that the MxDataGrid control has rendered everything in a simple HTML table. Looks are deceptive, of course. Now that you ve worked with data, you have some idea of how much work the page and the MxDataGrid control have done on the server before sending that simple table to the browser.