Creating a Simple Guestbook Listing

To complement the guestbook entry page, you need a way to see what visitors have entered. As a starting point, let s create a simple page to display guestbook entries. We ll display guestbook entries using the same SqlDataSourceControl control and MxDataGrid control we used in Chapter 9. This time, however, we ll customize the SQL statement for the SqlDataSourceControl control a bit by adding an Order By clause to sort entries. In addition, we ll customize the format of the grid columns. To see what the listing might look like, refer to Figure 10-2, shown earlier in this chapter.

Create a simple guestbook display page

1. Create a page named  ViewGuestbookGrid.aspx.

2. Add a heading at the top something like Guestbook Entries Summary.

3. If you ve closed Web Matrix since the creating the  Guestbook.aspx file, create a connection in the Data window to the WebMatrix database again.

4. From the Data window, drag the Guestbook table onto the page. Web Matrix creates a SqlDataSourceControl control and an MxDataGrid control on the page and configures them to display data from the Guestbook table.

5. Modify the SelectCommand property of the SqlDataSourceControl control to sort the data so that by default the most recent entries are displayed at the top of the grid. (Users can always sort the grid by clicking column headings.)

   You can modify the SelectCommand property in the Properties window. Alternatively, you can switch to HTML view and find the SelectCommand attribute of the <wmx:SqlDataSourceControl> element. Unfortunately, both ways of working with the SelectCommand property are somewhat cramped.

   Add the following boldfaced text to the command in the SelectCommand property:

   SELECT * FROM [Guestbook] ORDER BY EntryDate D ESC 

   Note 

   SQL statements aren t case sensitive.

   The Order By clause sorts the data. Adding DESC (descending) causes the most recent entries to be first in the result set returned by the query.

6. Remove the EntryID column from the MxDataGrid control because you don t really need to see that information in the guestbook display. Select the grid control, and in the Properties window, click the ellipsis button in the Fields property, whose value is displayed as (Collection). Web Matrix displays the MxDataGridField Collection Editor dialog box, as shown here:

   

Under Members, you see a handful of entries named BoundField. BoundField refers to the type of object that the grid uses to display a data-bound column. Select a BoundField object, and when you do, the properties pane on the right tells you what data column the BoundField object is bound to, along with other interesting information such as the column header text and formatting specifications.

Select item 0, which is the BoundColumn object for the EntryID column, and then click Remove to delete the EntryID column from the grid. Don t close this dialog box yet.

Select the last BoundField object, which corresponds to the Comment column. In the properties pane, open the node for ItemStyle and set the Width property to 350px. You re formatting the Comments column as 350 pixels wide, which is a bit wider than the default. Click OK to close the dialog box.

Run the page to test it.

I skipped pretty lightly over the properties pane in the collection editor for the BoundField objects. However, I hope that you understand that you can change the appearance of individual columns in the MxDataGrid control quite readily removing columns or setting properties to change the appearance of individual columns. Because it s so easy to use the MxDataGrid control, I suspect that you ll find it tempting to use the grid any time you need a quick data display. Knowing that you can customize the grid s appearance will help expand the circumstances under which the grid is useful.

I said earlier that we d make some improvements to the  Guestbook.aspx page. Let s go back to that page now and enhance it by adding validation.