The following paragraphs draw your attention irresistibly to the highlights of this listing:
1 If you use the Visual Basic version of the code-behind file, be sure to change the Language, AutoEventWireup, and CodeFile attributes in the Page directive.
2 The <asp:Content> element provides the content displayed by this page.
3 A table is used to format the controls on the page. The table consists of two rows. The first has a single cell and contains a FormView control that displays the blog name, description, and owner. The second row has two cells. The first displays the selected post with a FormView control, and the second displays the list of posts for the blog using a GridView control.
4 This FormView control displays the blog name and description as well as the name of the user that created the blog. It’s bound to the data source named SqlDataSource1.
5 The first control in the item template is a label that displays the blog name. Its Text attribute uses a binding expression that retrieves the name field from the data source and formats it using
<h3> and </h3> tags.
6 The second control in the item template is a label that displays the blog description. Its Text attribute uses a binding expression that retrieves the description field from the data source and formats it using an <h4>. Note that this label doesn’t include the closing </h4> tag. Instead, the closing tag is provided by the label in line 7.
7 The third control in the item template is a label that displays the name of the user who created the blog. Its Text attribute uses a binding expression that retrieves the username field from the data source and formats it with a closing </h4> tag.
8 The SqlDataSource1 data source retrieves the information from the Blogs table, using the blogid parameter to specify the blog to be retrieved.
Chapter 11: Building a Blog Application 399
9 The value of the blogid parameter is bound to the query string field named blog.
10 This FormView control displays the selected post for the current blog. It is bound to SqlDataSource2.
11 The first control in the item template displays the post subject. The subject is formatted using <h1> and </h1> tags.
12 The second control in the item template displays the date of the post, which is formatted using <h3> and </h3> tags.
13 The third control in the item template displays the text of the post, which is formatted between a matched set of <p> and </p> tags.
14 The fourth control in the item template displays the number of comments associated with the post.
15 The fifth control in the item template is a link button that takes the user to the Comments page.
16 The final control in the item template is a link button that lets the user leave a comment.
17 The SqlDataSource2 data source retrieves the information for the current post from the Posts table, using the postid parameter to specify the post to be retrieved.
18 The value of the postid parameter is bound to the
SelectedValue property of the GridView1 control.
19 The GridView control displays a list of the posts for the current blog. It is bound to SqlDataSource3. Paging is enabled to display ten posts at a time.
20 The first (and only) column for this GridView control is a template field column whose item template contains two controls: a link button that displays the post subject (bound to the subject field) and a label that displays the date (bound to the postdate field). Note that the link button includes a CommandName attribute that specifies Select as the command name. Thus the GridView row is selected when the user clicks this button.
21 The SqlDataSource3 data source retrieves the posts for the current blog, as indicated by the blogid parameter.
22 The blogid parameter is bound to the blog query string.
The code-behind file for the Blog page
The code-behind file for the Blog page must handle the PageLoad event to determine which post should be displayed. In addition, it must handle the click events for the View Comments and Leave a Comment links so it can
400 Part V: Building Community Applications
set up the query strings passed to the Comments.aspx and Comment.aspx page. Listings 11-5 and 11-6 show the C# and Visual Basic versions of this code-behind file.
Listing 11-5: The code-behind file for the Blog page (C# version)
using System; using System.Data;
using System.Configuration; using System.Collections; using System.Web;
using System.Web.Security; using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls;
The following paragraphs describe the three methods in this code-behind file:
1 The Page_Load method sets the SelectedIndex property of the GridView control to the value indicated by the post query string field, if the post query string is present. If the post query string is missing, the SelectedIndex property is set to zero. Then the DataBind method is called to bind the controls on the page.
2 The btnViewComments_Click method is called when the user clicks the View Comments link. It simply redirects the user to the Comments.aspx page, passing query string fields that contain the ID of the selected post (postid), the index of the selected post (post), and the ID of the current blog (blog).
3 The btnLeaveComment_Click method is called when the user clicks the Leave a Comment link. It redirects the user to the Comment.aspx page, passing the same query string fields as the btnViewComments_Click method.
Listing 11-6: The code-behind file for the Blog page (VB version)
Partial Class Blog
Inherits System.Web.UI.Page
Protected Sub
Page_Load( _
1
ByVal
sender As Object, _
ByVal
e As System.EventArgs) _
Handles Me.Load
If Not IsPostBack Then
If Request.QueryString(“post”) Is Nothing Then
GridView1.SelectedIndex = 0
Else
GridView1.SelectedIndex _
= Int16.Parse( _
Request.QueryString(“post”))
End If
Me.DataBind()
End If
End Sub
Protected Sub btnViewComments_Click( _
2
ByVal sender As Object, _
ByVal e As System.EventArgs)
Response.Redirect(“Comments.aspx?post=” _
(continued)
402 Part V: Building Community Applications
Listing 11-6 (continued)
+GridView1.SelectedIndex.ToString() _
+“&postid=” _
+GridView1.SelectedValue.ToString() _
+“&blog=” _
+Request.QueryString(“blog”))
End Sub
Protected Sub
btnLeaveComment_Click( _
3
ByVal
sender As Object, _
ByVal e As System.EventArgs) _
End Sub
End Class
Building the Comments Page
The Comments page uses a GridView control to display all comments left for a particular post. The ID of the post whose comments are to be displayed is passed to the page via a query string field. You can refer back to Figure 11-4 for a glimpse of what this page looks like.
The Comments.aspx page
Listing 11-7 shows the Comments.aspx page. As you can see, this page uses three SQL data sources, two FormView controls, and a GridView control to display the comments that have been created for the post.
Listing 11-7: The Comments.aspx page
<%@ Page Language=”C#”
1
MasterPageFile=”~/MasterPage.master”
AutoEventWireup=”true”
CodeFile=”Comments.aspx.cs”
Inherits=”Comments”
Title=”Blog-O-Rama” %>
<asp:Content ID=”Content1” Runat=”Server”
2
ContentPlaceHolderID=”ContentPlaceHolder1” >
<asp:FormView ID=”FormView2” runat=”server”
3
DataSourceID=”SqlDataSource1”
DataKeyNames=”postid” >
<ItemTemplate>
<asp:Label ID=”lblSubject”
4
runat=”server”
Text=’<%# Bind(“subject”,
“<h1>{0}</h1>”) %>’>
</asp:Label>
Chapter 11: Building a Blog Application 403
<asp:Label ID=”lblDate” runat=”server”
5
Text=’<%# Bind(“postdate”,
“<h3>{0:F}</h3>”) %>’>
</asp:Label>
</ItemTemplate>
</asp:FormView>
<asp:SqlDataSource ID=”SqlDataSource1”
6
runat=”server”
ConnectionString
=”<%$ ConnectionStrings:BlogConnectionString %>”
SelectCommand=”SELECT [postid], [blogid],
[postdate], [subject]
FROM [Posts]
WHERE ([postid] = @postid)”>
<SelectParameters>
<asp:QueryStringParameter
7
Name=”postid”
QueryStringField=”post”
Type=Int32 />
</SelectParameters>
</asp:SqlDataSource>
<br />
<asp:DataList ID=”DataList1” runat=”server”
8
DataSourceID=”SqlDataSource2”>
<ItemTemplate>
<hr>
<asp:Label ID=”lblUserName”
9
runat=”server”
Text=’<%# Bind(“username”,
“Comment by {0}”) %>’
Font-Size=”X-Small” />
<asp:Label ID=”lblDate” runat=”server”
10
Text=’<%# Bind(“commentdate”,
“ Date: {0:G}”) %>’
Font-Size=”X-Small” />
<br />
<asp:Label ID=”lblComment”
11
runat=”server”
Text=’<%# Bind(“comment”) %>’
Width=”300px”/>
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID=”SqlDataSource2”
12
runat=”server”
ConnectionString
=”<%$ ConnectionStrings:BlogConnectionString %>”
SelectCommand=”SELECT [commentdate],
[username], [comment]
FROM [Comments]
WHERE ([postid] = @postid)
ORDER BY [commentdate]”>
<SelectParameters>
(continued)
404 Part V: Building Community Applications
Listing 11-7 (continued)
<asp:QueryStringParameter
13
Name=”postid”
QueryStringField=”postid”
Type=”Int32” />
</SelectParameters>
</asp:SqlDataSource>
<br />
<asp:LinkButton ID=”btnReturn” runat=”server”
14
Text=”Return”
OnClick=”btnReturn_Click” />
<asp:LinkButton ID=”btnComment” runat=”server”
15
Text=”Leave Comment”
OnClick=”btnComment_Click” /> </asp:Content>
To help you follow along, the following paragraphs describe the key points of this listing:
1 You’ll need to change the Language, AutoEventWireup, and CodeFile attributes in the Page directive if you use Visual Basic instead of C#.
2 The <Content> element provides the content that’s displayed for the page.
3 This FormView control displays the subject and date of the post that the comments apply to. The FormView control is bound to the SqlDataSource1 data source.
4 The first control in the FormView control’s item template is a label that displays the subject.
5 The second control in the item template is another label that displays the date.
6 The SqlDataSource1 data source retrieves data for the post specified by the postid parameter.
7 The value of the postid parameter is bound to the query string field named post.
8 The DataList control displays the comments for the post. It’s bound to the data source named SqlDataSource2.
9 The first control in the data list’s item template is a label that displays the user name.
10 The second control in the item template is a label that displays the date the comment was created.
11 The third control in the item template is a label that displays the comment text.
12 The SqlDataSource2 data source retrieves the comments for the post specified by the postid parameter.
Chapter 11: Building a Blog Application 405
13 The value of the postid parameter is bound to the query string field named postid.
14 The btnReturn button returns the user to the Blog page. The btnReturn_Click method in the code-behind file executes when the user clicks this button.
For this line and the next, note that if you’re working with Visual
Basic, you should omit the OnClick attribute.
15 The btnComment button lets the user add a new comment to the post. (Again, if you’re working with Visual Basic, omit the OnClick attribute.)
The code-behind file for the Comments page
Listings 11-8 and 11-9 show the C# and Visual Basic versions of the code-behind file for the Comments page, which handles the click events for the two links on this page.
Listing 11-8: The code-behind file for the Comments page (C# version)
using System; using System.Data;
using System.Configuration; using System.Collections; using System.Web;
using System.Web.Security; using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls;
public partial class Comments : System.Web.UI.Page
{
protected
void btnReturn_Click(
1
object sender, EventArgs e)
{
Response.Redirect(“Blog.aspx?post=”
+ Request.QueryString[“post”]
+ “&postid=”
+ Request.QueryString[“postid”]
+ “&blog=”
+ Request.QueryString[“blog”]);
}
protected void btnComment_Click(
2
object sender, EventArgs e)
(continued)
406 Part V: Building Community Applications
Listing 11-8 (continued)
{
Response.Redirect(“Comment.aspx?post=”
+Request.QueryString[“post”]
+“&postid=”
+Request.QueryString[“postid”]
+“&blog=”
+Request.QueryString[“blog”]);
}
}
The two methods in this code-behind file have some details worth noting:
1 The btnReturn_Click method is called when the user clicks the Return link. It simply redirects to the Blog.aspx page, passing back the three query strings that were in the request (via the redirect URL).
2 The btnComment_Click method is called when the user clicks the Leave a Comment link. It redirects to the Comment.aspx page, again passing the three query strings via the redirect URL.
Listing 11-9: The code-behind file for the Comments page (VB version)
Partial Class Comments
Inherits System.Web.UI.Page
Protected Sub
btnReturn_Click( _
1
ByVal
sender As Object, _
ByVal e As System.EventArgs) _ Handles btnReturn.Click
