ASP.NET VERSIONS: 2.0
Build Your Own Blog: Part II
The Administration Managing Posts, Categories, and Displaying Posts
By Bipin Joshi
In Part I of this series we discussed the overall design of the blog application and developed supporting Web user controls. But the blog administrator needs a way to manage (add, update, or delete) posts, categories, and links. Additionally, the added posts must be displayed to the user in descending order of post date. That s precisely what we are going to develop in this installment. We ll also develop a master page that hosts our Web user controls and contains common layout elements, such as a header and footer, and navigation.
Creating the Master Page
Let s create the master page that hosts these user controls. The master page consists of a logo at the top, copyright notice at the bottom, and the user control instances on the left.
To add a master page to your Web site, use the Add New Item dialog box and select Master Page; name it MasterPage.master. Add to the master page the markup shown in Figure 1. Figure 2 shows the same master page in VS.NET designer.
Figure 1: Markup of MasterPage.master.
Figure 2: MasterPage.master in VS.NET designer. As you can see, the markup consists of a table with three rows and two columns. The header occupies the top-most row, the footer occupies the bottom-most row, and the user controls occupy the first column of the middle row.
Adding and Modifying Blog Posts
Only the administrator can add or modify new posts. For that we need a Web form that can allow adding, editing, and deleting of blog posts. We keep all the administrative pages in a separate folder called AdminPages, which allows us to secure this folder easily (as we ll see in later sections). Right-click on the Web site in Solution Explorer and select New Folder; name the folder AdminPages.
Add a new Web form named PostManager.aspx in your Web site using the Add New Item dialog box. Make sure you select the Place code in separate file and Select master page checkboxes (see Figure 3).
Figure 3: Adding a new Web form.
Once you click the Add button, VS.NET will prompt you to choose the master page for the new Web form via the Select a Master Page dialog box (see Figure 4).
Figure 4: Selecting a master page.
Select MasterPage.master and click OK. This will add a new Web form whose MasterPageFile attribute is set to MasterPage.master. Figure 5 shows the @Page directive of the newly added Web form. Notice how the MasterPageFile attribute of the @Page directive is pointing to our master page.
Figure 5: The @Page directive with the MasterPageFile attribute.
Drag and drop a DetailsView control and two SQL Data Source controls onto the Web form. Configure one of the SQL Data Source controls to select all the records from the Posts table. On the same lines configure the other SQL Data Source control to select all the records from the PostCategories table. Set the DataSourceID property of the DetailsView control to the ID of the first SQL Data Source control. Also, enable paging, inserting, editing, and deleting via the smart tag of the DetailsView (see Figure 6).
Figure 6: Smart tag of DetailsView.
Our DetailsView displays in all four columns (Id, Title, Message, and Category ID). Of these four columns, ID and Title are bound using BoundFields, whereas Message and Category ID are bound using TemplateFields. To convert them in TemplateFields, click the Convert this field into a TemplateField link at the bottom of the Fields dialog box (Figure 7 shows this dialog box with the required fields).
Figure 7: Configuring DetailsView fields.
Right-click on DetailsView and select Edit Template. Then select the Message TemplateField to open the template editor for that field. You must set to Multiline the TextMode property of the textboxes in EditItemTemplate and InsertItemTemplate. Figure 8 shows the markup generated for the Message TemplateField.
Figure 8: Markup of the Message TemplateField.
The EditItemTemplate and InsertItemTemplate for the Category ID column consists of a DropDownList that is bound with the other SQL Data Source control. This way the administrator can pick up the category for the current post from available post categories. Figure 9 shows the markup for the CategoryID TemplateField.
Figure 9: Markup of the Category ID TemplateField.
See the download file for the complete markup of PostManager.aspx; Figure 10 shows the Web form in VS.NET designer. Figure 11 shows a sample run of the Web form.
Figure 10: PostManager.aspx in VS.NET designer.
Figure 11: Sample run of PostManager.aspx.
Managing Blog Categories and Links
The Web forms for managing blog categories and links are closely matched with PostManager.aspx, so we won t discuss them in detail. Figure 12 shows the complete markup of CategoryManager.aspx; see the download file for the complete markup of LinkManager.aspx.
Figure 12: Markup of CategoryManager.aspx.
Displaying Blog Posts
We ve developed all the administrative pages that you can use to enter sample data into the system. Now, let s proceed to displaying this data to users.
The default.aspx page displays a list of blog posts. The Web form contains a GridView to display these posts. Add a new Web form called default.aspx with the master page set to MasterPage.master. Drag and drop a GridView control and two SQL Data Source controls. One SQL Data Source control supplies all the records from the Posts table, whereas the other SQL Data Source control supplies records pertaining to a specific blog category. Figure 13 shows the markup for both SQL Data Source controls after configuration.
Figure 13: Retrieving posts from the Posts table.
Note that SqlDataSource2 has one QueryStringParameter. Remember that our Categories.ascx user control contains links to default.aspx, with categoryid in the query string; this categoryid is supplied to the QueryStringParameter of SqlDataSource2.
The GridView contains a single TemplateField. This field displays the PostDate, Title, and Message of various posts. Figure 14 shows the complete markup for the GridView control.
Figure 14: Markup of GridView, showing posts.
We use the Eval method to bind Label controls with the required fields. Note that the HyperLink control displaying the title points to ShowPost.aspx and passes the post ID in the query string.
In the code-behind of the default.aspx, add the code shown in Figure 15 in the Page_Load event handler. Here, we check if the user is directly visiting default.aspx or has selected some blog category from the Categories menu. Accordingly, we set the DataSourceID property to SqlDataSource1 or SqlDataSource2. Figure 16 shows the default.aspx in action.
Figure 15: The Page_Load event handler of Default.aspx.
Figure 16: Sample run of Default.aspx.
Administration of blog posts is equally as important as displaying the post. This second installment of our three-part series covered both of these tasks. The new SQL Data Source control, in combination with GridView, DetailsView, and DataList, provides a powerful way to develop data-driven Web forms. Moreover, it does so with a lot less coding. A small but handy improvement in ASP.NET 2.0 is the data binding syntax. The new Eval and Bind methods make it easy to develop templates. In the concluding part of this series we ll add the ability to display and post feedback and view archived messages.
The sample code for this series is available for download.
Bipin Joshi is the founder and owner of BinaryIntellect Consulting (http://www.binaryintellect.com), where he conducts professional training programs on .NET technologies. He is the author of Developer s Guide to ASP.NET 2.0 (http://www.binaryintellect.com/books) and co-author of three WROX books on .NET 1.x. He writes regularly for www.DotNetBips.com, a community Web site he founded in the early days of .NET. He is a Microsoft MVP, MCAD, MCT, and member of ASPInsiders. He jots down his thoughts about .NET, life, and Yoga at http://www.bipinjoshi.com. He also conducts workshops on Yoga and Meditation, where he helps IT professionals develop a positive personality. You can contact him at mailto:[email protected].