Extending the Club Web Site Starter Kit

 

Bill Evjen
Reuters

June 2005

Applies to:
   Microsoft ASP.NET 2.0
   Visual Web Developer 2005 Express Edition

Summary: Learn how to extend the new Club Web Site Starter Kit, which is an available, installable project type for Visual Studio 2005 or Visual Web Developer 2005 Express Edition. (28 printed pages)

Contents

Introduction
Making Standard Improvements
Adding a File System
   Configuring the File Administration Page
   Creating the Administration Section of the File Management System
   Building the Admin.aspx Page
   Building the Docs.aspx Page
Build and Run
Summary

Introduction

Built into Visual Studio 2005 and Visual Web Developer 2005 Express Edition, you will find a built-in project called the Personal Web Site Starter Kit. Though this is the only ASP.NET starter kit that is provided with the default install of these IDEs, you can still use either IDE to search for additional starter kits to use and customize. (You can do this by selecting Community, then clicking Community Search, then clicking Starter Kits from the IDE menu.)

One such starter kit you will be able to find is the Club Web Site Starter Kit (shown below in Figure 1). This starter kit allows you to quickly set up a Web site for a club or organization. Though this starter kit focuses on a soccer club (also known as football outside of North America), you can easily modify the application so that it can service any type of group. For a detailed look at the basics of this starter kit, please be sure to read about it in my previous article, Introducing the Club Web Site Starter Kit. If you first need an introduction to this starter kit, I recommend that you read my introductory review first.

Figure 1. Club Site home page

The Club Web Site starter kit uses some of the best features provided by the latest release of ASP.NET 2.0 such as master pages, the membership and role management systems, navigation systems, and more.

This Web site starter kit provides you with a home page, an events page, a place for news, a photo album, a page that lists all your members, a page of links, and a contact page. Though the photo album is a central focus in the application, the events and news sections of the site are also emphasized in the application. Events and news items placed in the system are not only displayed on their respective pages, but are displayed on the home page (Default.aspx) as well.

This article will explain how to extend and customize the application, as this is the purpose of the starter kits. Remember, it is called a starter kit for a reason! You should consider this starter kit as a starting point to use and build a truly unique application for yourself. In the end, you might not even end up with what is referred to as a club Web site; you might create something else entirely.

Making Standard Improvements

It goes almost without saying, but your first steps will include customizing the Club Web Site Starter Kit in order to completely personalize the pages you choose to keep in the application. This includes personalization of the master page and any of the content pages contained within the application.

Beyond that, it is important to note that this application doesn't take advantage of any sort of .NET caching capabilities. This means that each page is not stored in the system cache to reuse, which would allow you to save on the cost of regenerating the page.

In most cases, you are most likely going to present data on your group's Web site that isn't going to frequently change. Therefore, to get better performance from your application, you can specify that your ASP.NET pages should be cached for a specific period of time.

However, since this application makes use of the new capability of using master pages and content pages, there are now two pages that get combined when invoked to create a single ASP.NET page. Since this is the case, then where exactly would you apply the caching?

When using master pages, apply caching to the content page. Don't apply the caching to the master page. When using the OutputCache page directive, you actually need to place this in the content page in order to invoke caching. This is shown here:

<%@ OutputCache Duration="60" VaryByParam="None" %>

Placing this page directive in any of the content pages of your application will cause both the contents of the content page and the associated master page to be cached by the system (remember that it is a single page at this point) for 60 seconds.

Adding a File System

So, for an example of extending a starter kit, let's extend the Club Web Site Starter Kit to do something that would benefit the members of your club or organization. Though there a million or more possible extensions you could actually produce, let's simply pick one and look at how to add a simple file management system to the application.

This file management system will allow users who are contained in the Administrators role to add, edit, or delete files from the system. Administrators will also be able to place the uploaded files into categories that are also under their control.

This example will require use of a database. For this, we will use the new Microsoft SQL Server Express Edition files, though you can also use another database if you want.

The first step in building this basic file management system is to change the application's navigation system to include a page for members in the Administrators role that will allow them to work with the files and file categories.

Configuring the File Administration Page

The first step will be to configure the application to handle a file management page that is meant only for registered users who are in the Administrators role. This page will allow them to upload and manage files as well manage the categories in which these files are placed.

For this reason, we are going to want to have an Admin link in the navigation system. Since we are going to want only the users who are contained in the role of Administrators to see this link, we will use a feature of ASP.NET 2.0 called security trimming.

Security trimming is the ability to "trim" off elements from the navigation system based upon the role of the user. This will be done through some settings we will apply in the Web.config file as well as some other changes that we will make to the Web.sitemap file.

Although security trimming is already enabled for the Club Web Site Starter Kit, you should still take a look at the Web.config file so you understand just how it is implemented. The part of the Web.config that handles this is found in the <siteMap> section of the file and presented here in Listing 1.

Listing 1: A piece of the Web.sitemap file that deals with security trimming

<siteMap defaultProvider="AspNetXmlSiteMapProvider" enabled="true">
   <providers>
      <remove name="AspNetXmlSiteMapProvider" />
      <add name="AspNetXmlSiteMapProvider"
        description="SiteMap provider that reads in .sitemap XML files."
        type="System.Web.XmlSiteMapProvider"
        securityTrimmingEnabled="true"
        siteMapFile="Web.sitemap" />
   </providers>
</siteMap>

Once enabled, specified locked-down pages will not appear in the application's navigation system. The Club Web Site Starter Kit accomplishes this by locking down specific pages to registered users only by using the <location> section in the Web.config file as presented here in Listing 2.

Listing 2: Locking down specific pages to Administrators only

<location path="member_list.aspx" >
   <system.web>
      <authorization >
         <deny users="?" />
      </authorization>
   </system.web>
</location>
<location path="member_details.aspx" >
   <system.web>
      <authorization >
         <deny users="?"/>
      </authorization>
   </system.web>
</location>

Though set in the Web.config file, you can filter users from viewing pages (including the page's link in the navigation bar) by making the appropriate settings in the Web.sitemap file as well by using the roles attribute in the <siteMapNode> element.

<siteMapNode url="admin.aspx" title="Admin" 
 description="Administer File System" roles="Administrators" />

In our example, we are going to create the page Admin.aspx, which will be available only for registered users who are contained in the Administrators role. To do this, we edit the Web.sitemap file, as shown in Listing 3.

Listing 3: Changing the Web.sitemap file to lock down the Admin.aspx page

 <location path="Admin.aspx" >
    <system.web>
      <authorization >
        <allow roles="Administrators"/>
        <deny users="*"/>
      </authorization>
    </system.web>
 </location>

The first change we make to the application's Web.config file is to add an additional <location> section that points to the Admin.aspx page that we will create shortly. As you can see from Listing 3, this page will be available for users contained in the Administrators role only.

Now that the access rules for the page we want to create are in place, let's create the database that the Admin.aspx page will use.

Creating the Administration Section of the File Management System

The purpose of the Admin.aspx page is to allow users in the Administrators role to upload files to the file management system. However, in order to make the file system easier for members to use, instead of providing a huge list of documents we will present the documents through a category system.

Thus, we will create a category system and allow users in the Administrators role to create, edit, and delete categories in which documents are placed. Then, when Administrators upload any documents to the application, they will be able to assign the document to a category as well.

In this file management system we will also add the ability for the Administrator to decide whether or not a category appears in the final management system. We will also work to store some file metadata, including storing any comments related to the uploaded file and the date and time when the file was actually uploaded to the system.

Creating the required database files

The Admin.aspx page will work quite closely with an underlying database. For this reason, we must create some new tables in the clubsite.mdf file. This is a SQL Server 2005 Express Edition file and is already used to run much of the default Club Web Site Starter Kit.

To create the new tables we need, click the Database Explorer tab in Visual Web Developer. In this window of the IDE, you will find a root node called Data Connections. Double-click this and you will then see a reference to the clubsite.mdf database file. Expanding the database file, you will then be presented with a list of tables, views, stored procedures, and more. You will then be presented with something similar to what is shown here in Figure 2.

Figure 2. Club Site database

Right-click the Tables folder and select Add New Table. This will launch the Table Designer directly in Visual Web Developer. From this new window in Visual Web Developer, create a table with the information presented in Figure 3.

Figure 3. Creating DocumentCategories table

The table includes the columns CategoryID (int), CategoryName (nvarchar(50)), and IsPublic (bit). Note in Figure 3 that the CategoryID has a yellow key at the start of the row. This signifies that CategoryID is a primary key used for identification purposes. You can assign CategoryID to be a primary key by right-clicking the row (actually, right-click the gray box at the start of the row) and select Set Primary Key from the menu provided. You will also need to make some changes to the properties of the CategoryID row. Highlight the row (by again selecting the gray box at the beginning of the row) and you will then see the properties for this row appear in the Column Properties window. Change the properties so that the CategoryID is an identity value and increments by 1 for each row. These property settings are presented in Figure 4.

Figure 4. Adding a primary key

Next, save the table. You will then be presented with a dialog that asks for the name of the table. In this case, name the table DocumentCategories (as shown in Figure 5).

Figure 5. Naming the table

We will next create a table where we will store metadata for the files that are saved to disk. Create a table in the same manner as before, but the columns should be set up as shown in Figure 6.

Figure 6. Properties for the DocumentCategories table

This table has columns for the ID and name of the file, the date when the file was input into the system, a place to store any related document comments, the document's associated category, and if the document has a "top document" flag, which I will discuss at the end of this article.

Save this table and name it Documents. After this, you should have a Database Explorer that looks like this:

Figure 7. After adding table

Now that the database for the file management system is in place, let's create the Admin.aspx page. This page will work with the underlying database that we just built and allow us to add, edit, or delete both categories and files.

Building the Admin.aspx Page

Create a new content page (using the Default.master page) called Admin.aspx. This page will contain two distinct sections—one for administering categories and another for administering files. Each section is defined on the page using <div> sections. This is shown in Listing 4.

Listing 4: The framework for the Admin.aspx page

<%@ Page Language="VB" MasterPageFile="~/Default.master" 
    Title="File Management System" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" 
 Runat="Server">
    <div id="body">
        <div class="fullwidth">
            <h2>Administer Categories</h2>          
        </div>

        <div class="fullwidth">
            <h2>Administer Files</h2>
        </div>          
    </div>
</asp:Content>

From this bit of code, you can see that the page framework for Admin.aspx allows for two sections. Each section will visually be encapsulated in a gray box due to the class="fullwidth" declaration in the <div> tags.

Let's turn our attention to the first section of the page that deals with administering categories.

Putting together the category management system

The category management section of the Admin.aspx page is simple to build. This section will include a GridView control that will allow the administrator to administer categories that are already in the system. Directly below that, there will be a small form that will allow for the creation of new categories. In the end, the design view of this section should appear as shown in Figure 8.

Figure 8. Category management system

The SqlDataSource control on the page is used to communicate with the SQL Express table we created earlier. After the SqlDataSource control is placed on the page, highlight the control and launch the control's smart tag (by selecting the green arrow in the control's upper right-hand corner). Select the Configure Data Source link from the smart tag. This will launch a dialog that allows you to configure the SqlDataSource control. The first option is to select the data connection to use to connect to the clubsite.mdf file. Since this connection is already defined in the default install of the Club Web Site Starter Kit, select ClubSiteDB from the drop-down list. This is shown in Figure 9.

Figure 9. Connecting to the database

The next page in the dialog enables us to select the table to use (which is DocumentCategories) and the columns that we are interested in using. Since we are interested in using every column, select the check box for everything (the "*" character). Then, before proceeding to the next page in the dialog, click the Advanced button and select the checkbox that will also direct Visual Web Developer to generate the INSERT, UPDATE, and DELETE statements along with the standard SELECT statement. These settings are illustrated in Figure 10.

Figure 10. Generating stored procedures

The next step is to configure the GridView to work with the SqlDataSource control that we just created. To do this, pull up the Design view of the page and open the smart tag for the GridView control. From the smart tag, you can select the SqlDataSource1 control from the available list of data sources. This will automatically change the GridView control so that the columns from the DocumentCategories table are represented.

Next, select the Enable Paging, Enable Sorting, Enable Editing, and Enable Deleting check boxes in the smart tag of the GridView control. Then end the configuration of the GridView control by choosing a better style using the Auto Format link or by simply changing the width of the control (I changed mine to 75%). After all these steps, I ended up with a GridView control as shown earlier in Figure 8.

The code for the category section is shown here in Listing 5.

Listing 5: The visual construction of the category section

<div class="fullwidth">
   <h2>File Category System</h2>
   <p>
   <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
    AllowSorting="True" AutoGenerateColumns="False" 
    DataKeyNames="CategoryID" DataSourceID="SqlDataSource1" 
    EmptyDataText="There are no categories present." Width="75%">
      <Columns>
         <asp:CommandField ShowDeleteButton="True" 
          ShowEditButton="True" />
         <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" 
          InsertVisible="False" ReadOnly="True" 
          SortExpression="CategoryID" />
         <asp:BoundField DataField="CategoryName" 
          HeaderText="CategoryName" SortExpression="CategoryName" />
          <asp:CheckBoxField DataField="IsPublic" HeaderText="IsPublic" 
           SortExpression="IsPublic" />
      </Columns>
   </asp:GridView>
   <p>
   <strong><span style="text-decoration: underline">Add a New 
   Category</span></strong></p>
   <p>Category Name:<br />
   <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></p>
   <p>
   <asp:CheckBox ID="CheckBox1" runat="server" 
    Text="Check if category is public" /></p>
    <p>
    <asp:Button ID="Button1" runat="server" Text="Add Category" 
     OnClick="Button1_Click" />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
     ConnectionString="<%$ ConnectionStrings:ClubSiteDB %>" 
     DeleteCommand="DELETE FROM [DocumentCategories] WHERE [CategoryID] = 
        @original_CategoryID" 
     InsertCommand="INSERT INTO [DocumentCategories] ([CategoryName], 
        [IsPublic]) VALUES (@CategoryName, @IsPublic)" 
     SelectCommand="SELECT * FROM [DocumentCategories]" 
     UpdateCommand="UPDATE [DocumentCategories] SET [CategoryName] = 
        @CategoryName, [IsPublic] = @IsPublic WHERE [CategoryID] = 
        @original_CategoryID">
      <DeleteParameters>
         <asp:Parameter Name="original_CategoryID" 
          Type="Int32" />
      </DeleteParameters>
      <UpdateParameters>
         <asp:Parameter Name="CategoryName" Type="String" />
         <asp:Parameter Name="IsPublic" Type="Boolean" />
         <asp:Parameter Name="original_CategoryID" Type="Int32" />
      </UpdateParameters>
      <InsertParameters>
         <asp:Parameter Name="CategoryName" Type="String" />
         <asp:Parameter Name="IsPublic" Type="Boolean" />
      </InsertParameters>
   </asp:SqlDataSource>
   </p>            
</div>

We need to make one more edit to this bit of code before we can proceed. In its present state, the Insert method won't work for us. Therefore, we are going to have to change some of the Visual Web Developer-generated code.

If you look at the value of the InsertCommand attribute in the main node of the SqlDataSource control, you will see that our Insert command is looking for two parameters—one for the name of the category (@CategoryName) and a Boolean value indicating whether the category is enabled for public viewing (@IsPublic).

Since these values are coming from ASP.NET server controls that are located on the same page, let's change the <InsertParameters> section of the SqlDataSource control to better reflect the source of the values. So, instead of using:

<InsertParameters>
   <asp:Parameter Name="CategoryName" Type="String" />
   <asp:Parameter Name="IsPublic" Type="Boolean" />
</InsertParameters>

Let's instead change our <InsertParameters> section to the following:

<InsertParameters>
   <asp:ControlParameter Name="CategoryName" Type="String" 
    ControlID="TextBox1" />
   <asp:ControlParameter Name="IsPublic" Type="Boolean" 
    ControlID="CheckBox1" />
</InsertParameters>

The parameter sections of the DataSource controls allow you to specify how these parameters get populated in a declarative fashion. Available options include:

• <asp:Parameter>
• <asp:ControlParameter>
• <asp:CookieParameter>
• <asp:FormParameter>
• <asp:ProfileParameter>
• <asp:QueryStringParameter>
• <asp:SessionParameter>

In our case, we are using the <asp:ControlParameter> control as this allows us to declaratively strip our required values directly from some of the ASP.NET server controls contained in our simple form. The two <asp:ControlParameter> controls we use in the <InsertParameters> section point to the TextBox1 control for the value of the name of the category and the CheckBox1 control for the required Boolean value that indicates if the category is for the public's eyes.

Now that the visual aspect of this section and the SqlDataSource control are in place, the next step is to invoke some actions for when the end user clicks the Add Category button. This will be done through the Button1_Click event.

Figure 11. Club site with categories

The Button1_Click event will add a new category to the overall category system. This method is detailed in Listing 6.

Listing 6: Adding a category via the Button1_Click event

[Visual Basic]

Protected Sub Button1_Click(ByVal sender As Object, _
   ByVal e As System.EventArgs)
        SqlDataSource1.Insert()
        TextBox1.Text = ""
        CheckBox1.Checked = False
End Sub

[C#]

protected void Button1_Click(object sender, EventArgs e)
{
   SqlDataSource1.Insert();
   TextBox1.Text = "";
   CheckBox1.Checked = false;
}

The Button1_Click event performs some basic operations. The first thing it does is invoke the SqlDataSource control's Insert() method. This will cause the SqlDataSource control to grab the values from the two specified server controls (TextBox1 and CheckBox1) and insert these values into the database file. After the Insert() method is performed, then we empty out the form by assigning blank values to both the TextBox1 and CheckBox1 controls. This is done to prevent the Administrator from clicking the Add Category button twice, thereby entering the category information into the system twice.

Now the Admin.aspx page has the ability to insert, edit, and delete categories in which files will be placed. Next, let's turn our attention to the file administration part of the Admin.aspx page.

Putting together the file management system

Once the category management system is in place, the next step is to put the file management system together. Like the category management system, the file management system will include a GridView control that will display the files that are in the system, plus a form that will be used to input new files into the system.

Figure 12 shows how the completed section will look in the Visual Web Developer designer.

Figure 12. File management system

The server controls that are on this page are not very difficult to implement. The form that allows you to enter a new file into the file management system includes a drop-down list, a text box, some radio buttons, a file upload control, a button, and a simple label control.

The DropDownList control that is used at the top of the form to display the list of available categories to which you can assign a file is actually driven from the page's SqlDataSource1 control that was used at the top of the page for the category management system.

To accomplish this task, simply highlight the DropDownList control and open the control's smart tag. From this smart tag, you will find the option to choose a data source for the control. Select this option and you will be presented with the dialog that is presented in Figure 13.

Figure 13. Setting DataSource for a DropDownList

From this dialog, you can select the data source to bind the control to, as well as the data field to bind to for both the text that is displayed to the end user and the value that will be used for the item selected. Once you have these items in place, select the OK button to proceed.

The next step is to configure the DataSource control that will be used to populate the GridView control with a list of files that are contained in the system. To do this, drag and drop a new SqlDataSource control onto the design surface of the page and then work through the same configuration wizard steps as you did with the category's SqlDataSource control example demonstrated earlier in this article.

In the SqlDataSource2 control's configuration process, select the table Documents and make sure that all the items available in the Documents table are selected. Also, like the configuration of the SqlDataSource control that was used by the category management system, you are going to want to select the Advanced button so that you can select the option for the wizard to create the INSERT, UPDATE, and DELETE statements in addition to the SELECT statement. This is illustrated in Figure 14.

Figure 14. Configuring the Documents table

Though this wizard sets up the SqlDataSource control for you, there are still some changes that must be made to the code that was generated from this wizard. First off, looking through the various parameter definitions that are in place within the SqlDataSource control, you will find the <InsertParameters> section, as shown here:

<InsertParameters>
   <asp:Parameter Name="DocumentName" Type="String" />
   <asp:Parameter Name="DateInput" Type="DateTime" />
   <asp:Parameter Name="Comments" Type="String" />
   <asp:Parameter Name="DocumentCategory" Type="Int32" />
   <asp:Parameter Name="TopDoc" Type="Boolean" />
</InsertParameters>

Though this shows all the parameters that are going to be required to make an Insert into the Documents table, we need to change this structure because some of the parameters are going to be fed from server controls that are located on the page, while other parameters we will create and add dynamically. For this reason, change the <InsertParameters> section to the following:

<InsertParameters>
   <asp:ControlParameter Name="Comments" Type="String" 
    ControlID="TextBox2" />
   <asp:ControlParameter Name="DocumentCategory" Type="Int32" 
    ControlID="DropDownList1" PropertyName="SelectedValue" />
   <asp:ControlParameter Name="TopDoc" Type="Boolean" 
    ControlID="RadioButtonList1" PropertyName="SelectedValue" />
</InsertParameters>

From this code change, you can see that we pulled some of the parameters from the list (such as the DocumentName and the DateInput parameters). These are the parameters that we will generate dynamically in the Button2_Click event (shown shortly).

The rest of the parameters were changed to ControlParameter types because these parameter values will be provided from specific server controls in the form. Using the ControlID property we are able to point to a specific control from which to retrieve the required value. On some of the properties, it will also be required to specify the name of the property to use in getting this required value. For example, the value coming from the DropDownList control that we are going to want to use is the SelectedValue property and this is the property specified through the PropertyName attribute. Those are all the changes we will make to the SqlDataSource2 control.

Now that the SqlDataSource control for the second GridView control is in place, the next step is to bind the GridView2 control to the SqlDataSource2 control. This is done by opening the smart tag for the GridView2 control and selecting the SqlDataSource2 control from the drop-down list provided. You can then enable paging, sorting, editing, and deleting by selecting the appropriate check boxes. This is illustrated in Figure 15.

Figure 15. Enabling paging, sorting, editing, and deleting

Since we are later going to use the DocumentName property in the hyperlink construction that end users will use to find the file to download or view, we are not going to want any changes allowed to be made to the DocumentName value. Therefore, to turn off the editing ability for this column in the GridView2 control, click on the Edit Columns link in the GridView control's smart tag. You will then be presented with the Fields dialog as shown in Figure 16.

Figure 16. Editing columns for the GridView

In the Fields dialog, highlight the DocumentName field from the Selected fields section of the dialog. You will then be presented with the DocumentName field's properties in the right-hand portion of the dialog. To turn off the ability to edit this particular field, set the ReadOnly property to True from its default setting of False.

At this point, all the settings for the file management system section of the page are in place. You can now run the application, log in as an Administrator, and then create categories, upload files, and more. Let's next turn our attention to the page that will display the category and file information to the end user.

Building the Docs.aspx Page

Now we need to create a page that will allow the end user to navigate through categories and select files that are present in these categories. As a first step, let's rename the Links.aspx page as Docs.aspx. To accomplish this, right-click the Links.aspx page in the Visual Web Developer Solution Explorer and rename the Links.aspx page to Docs.aspx. Then the next step is to edit the Web.sitemap file to use Docs.aspx instead of Links.aspx.

<siteMapNode url="Docs.aspx" title="Docs"  
 description="Useful Documents" />

The Docs.aspx page is going to be rather simple, as it is meant to be a page that deals with one-way data binding only. There will be no functionality on the page that allows the end user to edit, delete, or insert new files into the system. They will only be able to open files from the system.

In the end, our page is going to end up looking like the following in the Visual Web Developer designer as illustrated in Figure 17.

Figure 17. Useful Documents page

As you can see on this page in the design view, the page is divided into two distinct sections. The first is the category section. This section will drive the document section that is located directly below the category section.

Allowing end users to select categories

The categories section is made up of a single DataList control and a SqlDataSource control. First, drag and drop a DataList control onto the page's design surface. Open the DataList control's smart tag and select <New data source...> from the drop-down list of available data sources. This will launch the Choose Data Source dialog. From this dialog, select Database and click the Next button. As when working with the Admin.aspx page, next choose the ClubSiteDB connection. On the next page of the dialog, select the DocumentCategories table and select the * to get at all the available fields from the table. From here, click on the WHERE... button in the dialog and you will then be presented with the Add WHERE Clause dialog as shown in Figure 18.

Figure 18. Adding WHERE clause to query

Since we are going to want to show only categories in which the IsPublic value is set to True, we need to specify this requirement with a WHERE clause in the SQL statement. To accomplish this, select IsPublic from the Column drop-down list using the equal sign as an operator. For the Source, select None from the dropdown list and put a value of True in the Parameter properties Value textbox. When done, you will need to then click the Add button in the dialog and then click the OK button to close the dialog and complete the process.

Next, since we are going to want the categories to appear in alphabetical order, select the ORDER BY... button in the Configure Data Source dialog. This will open the Add ORDER BY Clause dialog as shown in Figure 19.

Figure 19. Adding Order By Clause

In this dialog, select the CategoryName field from the Sort by drop-down list and keep the radio button setting on Ascending (this means the order will be set from A to Z).

Once complete, this will change the DataList control to look like the following:

Figure 20. DataList after configuration

We need to change this default listing in the DataList control to be hyperlinks that can then be selected by the end user. When the end user clicks on a category link, the appropriate files will be displayed in the GridView control contained on the page. To properly setup the DataList control, open the control's smart tag and click the Edit Templates link. This will open up the control's ItemTemplate section as illustrated in Figure 21.

Figure 21. Editing ItemTemplate

Since we aren't going to want each item to appear as shown here in this template, erase everything and add a HyperLink control instead. Once the HyperLink control is added to the ItemTemplate section, open up the control's smart tag and select the only link—Edit DataBindings. This will open the HyperLink1 DataBindings dialog.

From the HyperLink1 DataBindings dialog, set the Text property so that it is bound to the CategoryName field. Then, before clicking the OK button, set the NavigateUrl property so that it is bound to the following custom expression:

<%# Eval("CategoryID", @"Docs.aspx?categoryid={0}") %>

This Eval statement used by the NavigateUrl property of the HyperLink control will turn the listed category into a link that contains a query string. An example would be Docs.aspx?categoryid=4. Now that the HyperLink control is in place, the next step is to display the appropriate files when an end user clicks one of the category links.

Displaying the files

The file display section of the page is made up of only two parts—a GridView control and a SqlDataSource control. When configuring the SqlDataSource2 control, you are going to want to work with the categoryid query string that is sent in with the URL when the end user clicks one of the dynamically generated category links.

To do this, select all the columns from the SqlDataSource control configuration wizard. Then click the WHERE button to specify what is needed to get at the categoryid query string value. To do this, from the Add WHERE Clause dialog, select DocumentCategory from the Columns drop-down list and set it to be equal to the query string field of categoryid. This setup is shown in Figure 22.

Figure 22. Configuring the Category SqlDataSource

After these items are configured, finalize the configuration of the SqlDataSource control by pressing the ORDER button and opt to order the list of documents by the DateInput column in a descending order. In the end, the value of the SelectCommand in the SqlDataSource2 control should be the following:

SelectCommand="SELECT * FROM [Documents] WHERE ([DocumentCategory] = 
   @DocumentCategory) ORDER BY [DateInput] DESC"

Now that the SqlDataSource2 control is in place, the next step is to configure the GridView control on the page to work with it. To do this, first bind the GridView control to the SqlDataSource2 control through the GridView control's smart tag. Also enable paging and sorting and set the width of the control to 100%.

Clicking the Edit Columns link in the control's smart tag will open the Fields dialog. This is where you can configure how each column is presented and how it behaves. Since this list of documents is for the end user, there are some values that they are most likely not interested in viewing. For this reason, remove the DocumentID, DocumentCategory, and TopDoc columns from the list contained in the dialog.

While the remaining three columns are typical BoundField columns, we are actually going to want to alter the DocumentName column to be a templated column. Instead of just showing a straight String value from the DocumentName column, we are going to want to have the document name that is shown as a link to the document. The only way to accomplish this is to take the rendering of the column into our own hands.

From the Fields dialog, highlight the DocumentName column and you will then see a link at the bottom of the dialog that will allow us to convert the column to a templated field. This is shown in Figure 23.

Figure 23. Converting the DocumentName Column to TemplateField

After clicking the link Convert this field into a TemplateField, you simply need to click OK button in order to move to the last step.

Next, open the GridView control's smart tag again and click the Edit Templates link found at the bottom of the smart tag. You will then be presented with the ItemTemplate for the DocumentName column. If you open up the drop-down list of available templates, you will notice that you can modify much more, as shown here in an image of the contents of the dropdown list.

Figure 24. Edit Templates list

However, we are interested at this point only in changing the ItemTemplate section. Therefore, select this item from the drop-down list and delete the single Label control instance that will be found within this view of the column. Instead of a Label control, add a HyperLink control. Then edit the data bindings of the HyperLink control and set the Text property of the control to the DocumentName column, while setting the NavigateUrl property to the following:

<%# Eval("DocumentName", @"~\Files\{0}") %>

Build and Run

That's it, as far as the basic framework of the file management system goes. You can now build and run the application. In the end, you will have a page where end users can navigate through a category system and select files to view or download. If you are an Administrator, you will have the ability to add, edit, or delete categories and files from the system.

One column you will notice that we didn't use in this demo was the TopDoc column. This column can be used for a special GridView control that you can place anywhere in the application (such as the home page of the site) that lists out only the documents in which the TopDoc value is set to True. This will be a nice way of putting focus on the most important documents of your list of files. This will be especially useful if you have many files in your file system.

Summary

This article shows you how to work with the basics of the Club Web Site Starter Kit and extend it for your own personal use. As you can see, it is rather easy to start incorporating your own features into this simple-to-use starter kit.

Have fun and happy coding!

© Microsoft Corporation. All rights reserved.