Create a View Page | Beginning Dynamic Websites: with ASP.NET Web Matrix (Programmer to Programmer)

Now that we've given the band members the ability to create tour diary entries, we need a page for the fans to see them. We're going to create a view page in the public site. Fans will be able to view all entries, or just entries by their favorite band member.

Try It Out—Viewing Tour Diary Entries

Create a page called Diary.aspx in the CAM directory. Use the Data Pages | Data Report with Paging and Sorting template.
Most of the steps below are the same as, or borrow heavily from, the examples you have already seen, both in this chapter and the previous chapter. First, let's modify the page so that it uses the menu control and styles for the public site. View the All Web Matrix tab.
```
 <html> <head>  <% = "<link href=""Style.css"" type=""text/css"" rel=""stylesheet"" />" %> </head>   <body style="font-family:arial">   <h2>  <uc0:Menu  title="Guest Book" runat="server"></uc0:Menu>  </h2>  <hr size="1">  <form runat="server"> 
```

Now we need to add the menu control. First, add the @ Register page directive for the user control to the top of the page:

<%@ Page Language="VB" %> <%@ Register TagPrefix="uc0" TagName="Menu" src="/books/3/257/1/html/2/Header.ascx" %> <%@ import Namespace="System.Data" %> <%@ import Namespace="System.Data.SqlClient" %>

Modify the BindGrid() function as shown here:
```
     Sub BindGrid()  Dim TDDB As New CAM.TourDiaryDB()  DataGrid1.DataSource = TDDB.ReadTourDiaryEntries(SortField)        DataGrid1.DataBind()      End Sub 
```
We have to create an instance of the TourDiaryDB object with the Dim statement. Then, we use it to call the ReadTourDiaryEntries() function, passing the SortField string to it.
Add an import statement to the top of the code, in the All view, for the CAM namespace. That's the namespace in which we placed the TourDiaryDB class above:
```
 <%@ import Namespace="CAM" %> 
```

Now, we have a running site, but as with the guest book and tour diary in the private site, we need to use templated columns for the datagrid so that we can have formatting, and so that we can turn off sorting for the Message column. Here's exactly the same datagrid HTML we used for the diary datagrid in the private site. Replace what is on Diary.aspx with this:

  <asp:datagrid  runat="server" AutoGenerateColumns="False"  AllowSorting="True" OnSortCommand="DataGrid_Sort"  AllowPaging="True" PageSize="10"  OnPageIndexChanged="DataGrid_Page" ForeColor="Black"  BackColor="White" CellPadding="3" GridLines="None"  CellSpacing="1" width="80%">  <HeaderStyle font-bold="True" forecolor="White"  backcolor="#4A3C8C"></HeaderStyle>  <PagerStyle horizontalalign="Right" backcolor="#C6C3C6"  mode="NumericPages"></PagerStyle>  <ItemStyle backcolor="#DEDFDE"></ItemStyle>  <Columns>  <asp:TemplateColumn SortExpression="Author" HeaderText="Author">  <ItemTemplate>  <asp:Label  runat="server">  <%# CAM.Formatting.MyCstr(  Container.DataItem("Author"), True, False) %>   </asp:Label>  </ItemTemplate>  </asp:TemplateColumn>  <asp:TemplateColumn SortExpression="Subject, PostedDate"  HeaderText="Subject">  <ItemTemplate>  <asp:Label  runat="server">  <%# CAM.Formatting.MyCstr(  Container.DataItem("Subject"), True, False) %>   </asp:Label>  </ItemTemplate>  </asp:TemplateColumn>  <asp:TemplateColumn HeaderText="Message">  <ItemTemplate>  <asp:Label  runat="server">  <%# CAM.Formatting.ConvertEmoticonsAndFormatting(  CAM.Formatting.MyCstr(Container.DataItem(  "Message"),  True, True)) %>  </asp:Label>  </ItemTemplate>  </asp:TemplateColumn>  <asp:TemplateColumn SortExpression="PostedDate"  HeaderText="Posted Date">  <ItemTemplate>  <asp:Label  runat="server">  <%# container.dataitem("PostedDate") %>   </asp:Label>  </ItemTemplate>  </asp:TemplateColumn>  </Columns>  </asp:datagrid>

Before we're done with this, however, let's change the Author column to display an image of the band member. We'll assume that we have set up the website so that there is a GIF image of each band member in the Images directory off of the public website, and that it's named the same as their logon name. Based on this, change the Author template column above to what's shown here:

        <asp:TemplateColumn SortExpression="Author" HeaderText="Author">           <ItemTemplate>             <asp:Label  runat="server">  <img src=  "Images/<%# Container.DataItem("Author") %>.gif"><br />                 <%# CAM.Formatting.MyCstr(                       Container.DataItem("Author"), True, False) %>              </asp:Label>           </ItemTemplate>         </asp:TemplateColumn>

What we've done here is dynamically built an image tag, using the author's name, as it is stored in the database as the first part of the image name. So, a message by John would be converted by the line <img src="/books/3/257/1/html/2/Images/<%# Container.DataItem("Author") %>.gif"> into <img src="/books/3/257/1/html/2/Images/john.gif">. So now, we have what's shown opposite:

click to expand

Note

Web Matrix can sometimes do more harm than good when switching to and from Design mode. For me, it kept changing <%# Container.DataItem("Author") %> into <%# Container.DataItem("Author") % />. Be careful to recheck your pages after you use the Design mode.

How It Works

Most of this you've seen before, but there are a few steps that are new or worth repeating. The first of these is the use of our data class. Remember that this was compiled and the DLL placed into the bin directory. ASP.NET automatically loads that for us, so all we have to do is reference it in our page:

 <%@ import Namespace="CAM" %>

To use the data layer, we simple create an instance of the TourDiaryDB class, which contains the data code. We then call the ReadTourDiaryEntries() method of that class, and use the results from this as the source of data for our grid. This is the way you'll see most data access code being used:

     Sub BindGrid()       Dim TDDB As New CAM.TourDiaryDB()        DataGrid1.DataSource = TDDB.ReadTourDiaryEntries(SortField)        DataGrid1.DataBind()      End Sub

The use of images as part of our column is worth mentioning too. We're showing an image of the band member, as well as their name. The important line is:

  <img src="/books/3/257/1/html/2//Images/<%# Container.DataItem("Author") %>.gif"><br />

This simply creates an HTML image, and uses the author name column (which is the name of the band member) as part of the image name. What's important about this is that it shows you can use data binding within an existing HTML tag. That's because the data binding happens before the HTML is formed, so it can be used to make up part of the HTML.