Introduction to the Club Web Site Starter Kit

 

Bill Evjen
Reuters

June 2005

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

Summary: Learn about the new Club Web Site Starter Kit, which is an available project type in Visual Studio 2005. (30 printed pages)

Contents

Introduction
Initial Setup of the Club Web Site Starter Kit
Creating an Administrator Role
Adding Users to the Administrators Role
The Master Page: Default.master
Working with the SiteMapDataSource Control in the Master Page
Understanding Site Access Restrictions
Listing Club Events: Events_Calendar.aspx
News Articles: News_List.aspx
The Photo Albums Page: PhotoAlbum_List.aspx
Viewing the Application's Registered Members: Member_List.aspx
Static Pages: Links.aspx and Contact.aspx
Summary

Introduction

The Club Web Site Starter Kit enables you to easily create an application that helps present and manage any club or organization. The idea of the Club Web Site Starter Kit is to provide you with a framework that you can use to quickly organize a worthwhile Web site that is focused on a club of any type. This starter kit provides you with a series of pages that easily allow you to present the details of your club. Starting pages for this starter kit include a home page that lists a summary of your club's news and events, associated news and events pages, a place to publish photos, registration forms, member lists, a page for links, as well as a contact page.

From this brief description, you can see that there is a lot of functionality provided in this framework application. When compiling and running the Club Web Site Starter Kit for the first time, you will view the home page shown in Figure 1.

Figure 1. Home page for the starter kit

Each of the pages in the Club Web Site Starter Kit are ready for you to replace the default lorem ipsum text with your own words. Doing this will start you on the personalization process for your club Web site. As you will be able to tell from the application, though it is built as a Web site for a fictitious soccer team (also known as a football team in most parts of the world), you can easily use this framework for a variety of clubs or organizations.

The Club Web Site Starter Kit is also a great learning tool. You can view the code that produces each page of the application, and you will find that it uses some of the strongest features from the latest release of ASP.NET. Even if you are not interested in using this starter kit for an actual production Web site, it is still a valuable resource to use to learn how to create an application using ASP.NET 2.0.

Before we look at working with this application though, let's first start by taking a look at the installation and startup of this starter kit.

Initial Setup of the Club Web Site Starter Kit

After you have installed the Club Web Site Starter Kit on your development server, you will then find that the installation has made itself available to you as project template in the My Templates section of the New Web Site dialog. You can get this dialog to appear by clicking File, then selecting New Web Site in the Visual Studio menu. This dialog is shown in Figure 2.

Figure 2. Creating a new club site

After creating an instance of this project type, Visual Studio will create a solution for you that will include a number of folders and files. You can view all of these created items in Visual Studio's Solution Explorer as illustrated here in Figure 3.

Figure 3. The club site solution

As you can see from Figure 3, there is a lot to this starter kit. When Visual Studio creates an instance of this starter kit, you will find that there isn't a needed copy of the ASPNETDB.mdf database in the App_Data folder. This SQL Express file is needed for the membership, role management, and other ASP.NET 2.0 systems that you will find being used by this application. We'll look next at how this file gets automatically created for you.

Creating an Administrator Role

Since we are going to need to create an Administrators role for the application and put at least one user in this role, click on the ASP.NET Configuration button in the Solution Explorer of Visual Studio to open up the ASP.NET Web Site Administration Tool. You can also open up this administration tool by selecting Website ASP.NET Administration from the Visual Studio menu. One the ASP.NET Web Site Administration Tool has launched, click on the Security tab the tool provides. You will then be provided with the following:

Figure 4. Administration page

Starting up this tool in the browser will also create the required ASPNETDB.mdf file if it is not found in the App_Data folder. Once you launch the ASP.NET Web Site Administration Tool, you can see this for yourself by clicking the Refresh button in the Visual Studio Solution Explorer and expanding the App_Data folder. Here you will now find the ASP.NET database used by the membership and role management systems, among others.

From the initial start, you can see that there are no users or roles set up for the application. This application relies on a user to be a part of a role named Administrators to manage the editing of information contained in the site. You can have as many users in the Administrators role as you deem necessary. To get the role and users established, the first step is to create the Administrators role.

You can create the Administrators role through the ASP.NET Web Site Administration Tool by clicking the Create or Manage roles link found on the Security page. On the role creation page provided, you can simply provide the name of the role. In this case, name the role Administrators as shown in Figure 5.

Figure 5. Creating the Administrators role

Click the Add Role button to add the role to the application. The next page will list the role. From this view (Figure 6), you can manage the role by adding and removing users. You can delete a role from the system using this page as well.

Figure 6. Adding a role

Adding Users to the Administrators Role

Now that you have the Administrators role in place, the next step is to add one or more users to the role. To do this, click the Create User link from the Security page of the ASP.NET Web Site Administration Tool. The Create user form is shown in Figure 7.

Figure 7. Adding Administrators

When creating your user here, be sure that you have the Administrators checkbox selected to add this user to the Administrators role. From this same dialog, you can also add as many regular users (non-administrators) as you want. The other option is to let these other users simply do their own registrations on the Web site itself. This will be demonstrated later in this article. It is important to note that by default, ASP.NET 2.0 requires a strong password containing at least eight characters, including a combination of uppercase and lowercase characters, numbers, and special characters (for example, !, #, $, %).

Clicking the Create User button as shown in Figure 7 will create an application administrator for you. Now that you have this user in place, let's take a look back at the starter kit and run through some of the items that make up this application.

The Master Page: Default.master

The first page that we will take a look at in this application is the application's master page. ASP.NET 2.0 introduces a way in which to build templated pages. This means that you can build a master template or a master page that can then be applied to each and every page you designate. The Club Web Site Starter Kit makes use of master pages.

Though not necessarily apparent with the Default.master page, the Club Web Site Starter Kit uses the available inline coding model as opposed to using the code-behind model. This means that the business logic of the page (all the page methods) is encapsulated in the page itself between <script> tags.

The Default.master page for this starter kit is purely a presentation template that can then be used by any content page contained in the application (content pages are discussed shortly). The nice thing in working with master pages in ASP.NET 2.0 is in how they are presented in Visual Studio. Click the Design tab in Visual Studio's Document window to see a visual representation of the master page. This is shown here in Figure 8.

Figure 8. Master page

From this figure you can see that this page contains the basic framework that will be used by each and every content page that uses this master page. On the master page, you will find a combination of HTML and Web server controls, some of which are new to ASP.NET 2.0. Though the image in Figure 8 seems to be mostly a yellow page, there are also a lot of styles and images that are placed into the master page through the application's cascading style sheet file, clubsite.css. This style sheet is added to the master page by the inclusion of the following bit of code:

<link type="text/css" rel="Stylesheet" href="clubsite.css" />

Probably the most interesting server control on the master page that is new to ASP.NET 2.0 is the ContentPlaceHolder control. The ContentPlaceHolder control is a defined area that allows for any content page that is using this particular master page to interject content into. Basically, when you construct your master pages, you are allowing content pages to use specified sections of the page. A content page will not be able to work outside the bounds of this content area. Though it is possible to include multiple content areas through the use of multiple ContentPlaceHolder controls placed on the master page, this example (our Default.master page) uses only one of these controls.

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>

Another new ASP.NET server control that is used on the master page is the SiteMapDataSource control. This data-source control allows you to easily work with a defined navigational structure for your page. By default, you define your site's navigational structure in the XML file, web.sitemap. You will find this file in the Club Web Site project. It is shown here in Listing 1.

Listing 1: The web.sitemap file used by the Default.master page

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="https://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="/" title=""  description=""  roles="*">
    <siteMapNode url="default.aspx" title="Home"  
     description="Welcome page"  />
    <siteMapNode url="events_calendar.aspx" title="Events"  
     description="Calendar of events"  />
    <siteMapNode url="news_list.aspx" title="News"  
     description="Recent News"  />
    <siteMapNode url="photoalbum_list.aspx" title="Photos"  
     description="Photo album"  />
    <siteMapNode url="member_list.aspx" title="Members" 
     description="Membership list and contact informaation" />
    <siteMapNode url="member_redirect.aspx" title="Membership"  
     description="Member registration"  />
    <siteMapNode url="links.aspx" title="Links"  
     description="Useful links"  />
    <siteMapNode url="contact.aspx" title="Contact"  
     description="How to contact the club leaders"  />
  </siteMapNode>
</siteMap>

Looking at this structure, you can see that the application is presented in a pretty flat format. There really isn't a hierarchy of pages for the end user to work through. For this reason, the hyperlinks to each of the pages are presented in a horizontal toolbar that appears at the top and bottom of the master page.

From either the design or code view of the master page, you can now feel free to personalize the page by changing the text of the master page so that it reflects your club or organization.

Next, let's take a look a closer look at the navigation system that is built into the master page.

Working with the SiteMapDataSource Control in the Master Page

The master page presents a navigation toolbar at the top and bottom of each page. When a content page uses this master page, you will see the toolbar illustrated in Figure 9.

Figure 9. Toolbar

This navigation toolbar is defined by the contents of the web.sitemap file that we reviewed earlier in this article. How does this information make it from the web.sitemap file to be presented on the page? If you look through the Default.master page's code, you will see that it uses a SiteMapDataSource control to present the contents of the XML file.

Having your application's page structure defined in a web.sitemap file allows you to then interact with your defined navigation structure through the new Sitemap class or through the new SiteMapDataSource control. Using the SiteMapDataSource control, you can then bind to the contents of the navigational structure in the web.sitemap file using either data-binding expressions or server controls that have been built to work with the SiteMapDataSource control (such as the TreeView or Menu server controls).

In the case of the Club Web Site Starter Kit, the Default.master page utilizes simple databound expressions that get their information from what is provided by the SiteMapDataSource control, as opposed to either of the aforementioned server controls. Listing 2 shows the SiteMapDataSource control from the master page.

Listing 2: The SiteMapDataSource control from the master page

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
 ShowStartingNode="false" />

As you can see, there isn't much to working with the defined application structure that comes from the web.sitemap file. All it takes is a SiteMapDataSource control like that shown in Listing 2. The only change in behavior that is defined in this datasource control is through the use of the ShowStartingNode attribute, which is set to false. Being set to false will cause the SiteMapDataSource control to ignore the first <siteMapNode> element that appears in the web.sitemap file and instead work from the <siteMapNode> elements that are nested directly below the first.

Now that the SiteMapDataSource control is in place, the navigation toolbars are created through the use of the data-binding expressions. This is shown in Listing 3.

Listing 3: Using the SiteMapDataSource control to build the navigation toolbar

<asp:Repeater ID="TopNavRepeat" runat="server" 
 DataSourceID="SiteMapDataSource1">
   <HeaderTemplate>
      <ul>
   </HeaderTemplate>
   <ItemTemplate>
      <li>
      <asp:HyperLink ID="HyperLink1" runat="server" 
       Text='<%# Eval("Title") %>' NavigateUrl='<%# Eval("Url") %>'
       ToolTip='<%# Eval("Description") %>' />
      </li>
   </ItemTemplate>
   <FooterTemplate>
      </ul>
   </FooterTemplate>
</asp:Repeater>

The Default.master page binds itself to the result set coming from the SiteMapDataSource control in two spots—once for the header navigation and once for the footer navigation.

From Listing 3 you can see that a Repeater server control is used to build an unordered list of hyperlinks. The hyperlinks are constructed using a HyperLink server control. Getting at the data from the SiteMapDataSource control is as simple as specifying the DataSourceID attribute to be equal to the ID of the SiteMapDataSource control on the same page. Once this is in place, you can get at specific items coming from the SiteMapDataSource control by simply using the Eval binding expression. An example of that is:

<%# Eval("Title") %>

This expression is tied to the title attribute that was used in the web.sitemap file.

<siteMapNode url="default.aspx" title="Home"  
 description="Welcome page"  />

Here you can see that each page (defined with the <siteMapNode> element) has three attributes: url, title, and description. All three of these attributes are used in the Repeater server control.

It is interesting to note that you are not required to build your navigation system entirely using Eval expressions as is demonstrated in the Club Web Site Starter Kit. Included in ASP.NET 2.0 are some new server controls that have been designed specifically to work with a SiteMapDataSource control and the underlying data that is presented in the web.sitemap file to present your application's navigation to the end user. For instance, you should look into using the SiteMapPath, TreeView, or Menu server controls to build a robust navigation system that also works from the web.sitemap file.

Understanding Site Access Restrictions

Looking at the contents of the web.sitemap file and the navigation toolbar, you will notice that there is a page that is defined in the web.sitemap file that does not appear in the navigation toolbar. The Members page is missing when you first pull up the Club Web Site Starter Kit in a browser.

However, if you log in to the application as a site administrator, you will then notice that the Members page is now present in the list of pages presented in the navigation toolbar (illustrated here in Figure 10).

Figure 10. Members added to the toolbar

Why is this happening? Though all the pages of the application are defined in the web.sitemap file and the SiteMapDataSource control works with the underlying data from this XML file, there are still further behavior definitions that occur in the web.config file that will affect your application's navigation system. This is presented here in Listing 4.

Listing 4: Providing page authorization requirements in the web.config

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

In this partial view of the web.config file, you can see that the Member_List.aspx page is locked down so that all unauthenticated users are not allowed to access the page. This means that anyone logged into the application in the role of Administrators or any other role that you create in the application will be able to navigate to the page.

The interesting thing, though, is that not only is it a matter of defining that authenticated users are allowed to navigate to the Member_List.aspx page, but it is also further stating that only authenticated users in the application will be able to see a link to that page in the application's navigation system that is retrieved using the SiteMapDataSource control.

The First Content Page: Default.aspx

Taking a look at the Default.aspx page, you will notice that it isn't your standard .aspx page that you might be used to. This Default.aspx page is what is referred to as a content page. A content page makes use of the new page template system that is now provided by ASP.NET 2.0. As you saw earlier in this article, a template was defined with the creation of the Default.master page. This template page—the master page—can be utilized by any number of content pages. In fact, if you look at the @Page directive at the top of the Default.aspx page, you will notice that it indeed makes use of the master page.

<%@ Page Language="VB" MasterPageFile="~/Default.master" 
    Title="Untitled Page" %>

Through the use of the MasterPageFile attribute in the @Page directive, this .aspx page declares that it is a content page and that the template to use is the Default.master page. Because this is a content page that is using a master page as a template, this means that you are not to include any of the HTML tags that are used as a framework for the page (such as the <html>, <body>, and <form> tags). The reason for this is due to the fact that these items are already included in the Default.master page.

If you look back in the master page, you will remember that there was a single location on the page that was allotted for a content page to place items. This was done through the use of the ContentPlaceHolder server control. When working with a content page, you make an association to this instance of the ContentPlaceHolder control on the master page through the use of a Content server control. Looking through the Default.aspx page, you will notice that there is a single Content control.

<asp:Content ID="Content1" 
 ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
   <!-- Content removed for clarity -->
</asp:Content>

Looking at the Content control, you will be able to notice that the association to the ContentPlaceHolder control is done through the use of the ContentPlaceHolderID attribute that uses as a value the ID of the ContentPlaceHolder that is used on the master page. Any content placed inside the Content control will then appear on the merged page.

One of the more interesting things about working with a content page is the way these pages are represented in Visual Studio. So far, we have been working with the code of the pages. If you click the Design tab for the Default.aspx page, you will be able to see a visual representation of this particular page. This is shown in Figure 11.

Figure 11. Content page inside of master page

From this figure, you can see that not only the content that is used in the content page itself appears in the design view of the page, but also the content that is specified in the master page also appears in the view of the page. This is page inheritance at its best.

Looking back at the code of the Default.aspx page, there are some interesting things happening here that are worthy of pointing out. This page includes two columns of controls. Looking at the left column, you will find some welcome text that you should replace with some personalized text for your own club. Below the welcome text you will find a new control from ASP.NET 2.0, the LoginView control.

Since we are working with an application that will allow users to log in to the application, this page will have viewers that are considered authenticated and authorized users (meaning that they have logged into the application and were possibly authorized for a specific role). This page will also have viewers that have not gone through the authentication and authorization process. Because of these dynamics, you at times are going to want to show specific data for authenticated users while showing other content to users who are unauthenticated. The LoginView control allows for this kind of behavior.

The LoginView control has two templates, <AnonymousTemplate> and <LoggedInTemplate>. Looking at the code from Default.aspx, you can see that the AnonymousTemplate section includes a form that allows the end user to attempt to log in to the application. If the user is authenticated after logging into the application, they will then be presented with the contents provided in the LoggedInTemplate section. This section contains only some text and a LoginName control. The LoginName control is used simply to present the name of the authenticated user. An example of both of these views is presented in Figure 12.

Figure 12. Login control

The form that is presented via the AnonymousTemplate also includes a custom control. This control is defined in the page in as follows:

<Club:RolloverButton runat="server" ValidationGroup="Login1" 
Text="Login" ID="LoginButton" CommandName="Login" />

Looking inside the App_Code folder of the solution, you will find a RolloverButtons.vb or .cs file that includes the code for this custom control.

In addition to a login form and the use of custom controls, the right column of the Default.aspx page uses two SqlDataSource controls to pull both the top five announcements and events for presentation. Let's start by looking at the first of these SqlDataSource controls.

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ProviderName="System.Data.SqlClient" 
 ConnectionString="<%$ ConnectionStrings:ClubSiteDB %>" 
 SelectCommand="SELECT top 5 [id], [itemdate], [title], [description], 
    [photo] FROM [Announcements] order by itemdate desc">
</asp:SqlDataSource>

The SqlDataSource control works on your behalf to pull information from any SQL database. In this case, because of what is specified with the connection string, this instance of the SqlDataSource control will pull information from SQL Express. You can find the SQL Express file being used in the App_Data folder of your project. Inside this folder, you will see the file clubsite.mdf. This is where the site's announcements, events, and photos are stored.

As a value to the ConnectionString attribute in the SqlDataSource control, you can see that it points to a value of ClubSiteDB. This reference actually points to a declaration that was made in the application's web.config file. Looking in the <connectionStrings> section of the web.config file, you will see the following definition:

<add name="ClubSiteDB" 
 connectionString="Data Source=.\SQLExpress;Integrated 
    Security=true;AttachDBFileName=|DataDirectory|clubsite.mdf;
    User Instance=True" providerName="System.Data.SqlClient"/>

Using this connection string, the SqlDataSource then uses what is specified in the SelectCommand attribute to pull values from the SQL Express file.

Now that values are going to start coming from the SqlDataSource control, you can then bind to those values using simple binding syntax such as <%# Eval("photo") %>.

The code found in the Default.aspx page uses the Repeater control that is sprinkled with Eval statements to populate a list of recent announcements and events that are then displayed to the page. Looking at this example, you can see how simple it is to start pulling information from a data store and then to display that information. There really aren't very many steps involved.

Let's now look at some of the functionality provided on the other pages of the application.

Listing Club Events: Events_Calendar.aspx

Click the Events link in the navigation toolbar to open the Events_Calendar.aspx page. This page provides a list of events and locations where these events occur. Events can be viewed in a monthly calendar as illustrated here in Figure 13.

Figure 13. Club Events Calendar View

Events can also be viewed in a list (Figure 14). This list shows some events that have just occurred as well as events that are about to happen. You will notice that switching to this view changes the page to Events_List.aspx.

Figure 14. Club Events List View

The final page is the locations list page, which is quite similar to the events list page. Clicking the Locations List link to open a new page called Locations_List.aspx. This is shown in Figure 15.

Figure 15. Locations

If you are logged into the application as a registered user who is in the Administrators role, you will see an Add New Event or Add New Location buttons on the page. Clicking on these buttons will take you to pages where you can add events and locations that then appear in the application for all users. This is shown in Figure 16.

Figure 16. Event details

It is interesting to note how the various administration buttons appear on the pages if you are logged into the application and you are in the Administrators role. Looking at the code of Events_Calendar.aspx, you will see some simple code in the Page_Load event. This is shown here in Listing 5.

Listing 5: The Page_Load event of events_calendar.aspx

[VB]

Protected Sub Page_Load(ByVal sender As Object, _
   ByVal e As System.EventArgs)
        Dim isAdmin As Boolean
        isAdmin = User.IsInRole("Administrators")
        panel1.Visible = isAdmin
        panel2.Visible = isAdmin
End Sub

[C#]

protected void Page_Load(object sender, System.EventArgs e)
{
   bool isAdmin = User.IsInRole("Administrators");
   panel1.Visible = isAdmin;
   panel2.Visible = isAdmin;
}

In this example from Listing 5, you can see that there is not much going on here. First a Boolean value called isAdmin is created. Using the new User object available in ASP.NET 2.0, you can then check to see if the user is in a specific role. In this case, we are checking to see if the user hitting the page is in the Administrators role. If they are in this particular role, then a True value is assigned to the isAdmin variable. This value is then used to turn on or off two Panel server controls that are used on the page.

<asp:Panel ID="panel1" runat="server" CssClass="fullwidth">
   <div class="actionbuttons">
      <Club:RolloverLink ID="Addbtn" runat="server" Text="Add New Event" 
         NavigateURL="Events_edit.aspx?Action=New" />
   </div>
</asp:Panel>

Let's next look at the page that opens when the user clicks the News link in the navigation toolbar.

News Articles: News_List.aspx

Click the News link in the navigation to open the News_List.aspx page. This page provides any user with a list of news articles that an application administrator publishes into the application. The articles will be paged and show only 10 articles per page. A sample of an example news page is presented in Figure 17.

Figure 17. News page

If you log into the application as an administrator, you will then have the ability to add news stories. This will be possible by pressing the Add New Article button that appears on the news page only for users who are in the Administrators role. Pressing this button will pull up a new page (News_Edit.aspx) that allows you to enter in the full details for a new article. This is presented in Figure 18.

Figure 18. Adding a news item

As you can see from this image, you have the ability to add an article title, a link to another resource, an article description, the date in which the article will appear, as well as any images that you wish to associate with a news article. If you choose not to associate an image to the news article you are placing into the system, a default image will appear, rather than not showing any image at all.

Once news articles are placed in the system, not only will these articles appear on the News page, but the last five articles will also appear on the Home page of the application.

You can view an individual news article by clicking on the read more >> link. This will present an entire news article on a single page (News_View.aspx). You can also get to this page by clicking the headline of the news article.

As an administrator you have the option of editing the contents of the article. If you are logged into the application as an administrator when viewing a single article, you can click the Edit Article button to do this.

Looking at the code of the News_List.aspx page, you can see that all the articles are retrieved from the clubsite.mdf file using a SqlDataSource control. This control is presented in Listing 6.

Listing 6: The SqlDataSource control used to display news articles

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="<%$ ConnectionStrings:ClubSiteDB %>"
 SelectCommand="PagedAnnouncementList" SelectCommandType="StoredProcedure" 
 OnSelected="SqlDataSource1_Selected">
   <SelectParameters>
      <asp:ControlParameter Name="pageNum" ControlID="pn1" 
       PropertyName="SelectedPage" />
      <asp:Parameter DefaultValue="10" Name="pageSize" Type="Int32" />
      <asp:Parameter Name="pageCount" Direction="ReturnValue" 
       Type="Int32" />
   </SelectParameters>
</asp:SqlDataSource>

From this listing, you can see that this SqlDataSource control is retrieving the connection string as was the case with the earlier SqlDataSource controls that we presented. It is getting the connection string from the <connectionStrings> section of the web.config file. It is interesting that this SqlDataSource control is using a stored procedure instead of using an inline Select statement. To use a stored procedure, the SqlDataSource control uses the SelectCommandType attribute and gives it a value of StoredProcedure. Once a stored procedure has been declared as the type of select operation that will be used, then you name the stored procedure as the value of the SelectCommand attribute, as is done in the above example. In this case, this SqlDataSource control says that for a Select command, the control should look to the PagedAnnouncementList stored procedure in the SQL Express file.

If you view the clubsite.mdf folder in Visual Studio, you will be able to open up its subfolders and identify the Stored Procedures folder. You can do this from the Database Explorer tab in Visual Studio. This is illustrated in Figure 19.

Figure 19. Viewing the stored procedures folder

Double-click the PagedAnnouncementList stored procedure to open it up directly in the document window of Visual Studio. This is illustrated in Figure 20.

Figure 20. PagedAnnouncementList stored procedure

From the code for the SqlDataSource control that is presented in Listing 6, you can see that there are several parameters that are presented back to the stored procedure. One parameter to pay attention to is the pageSize parameter:

<asp:Parameter DefaultValue="10" Name="pageSize" Type="Int32" />

This parameter is used to define the number of stories that appear on the news page by default. If you want to have a smaller or larger selection of news articles on a page, then feel free to change this number.

Once the SqlDataSource control pulls the news articles from the SQL Express file that it needs, the News_List.aspx page then uses a Repeater control along with the Eval binding syntax to push the articles to the page.

Let's now move onto the next page—the photo album page.

The Photo Albums Page: PhotoAlbum_List.aspx

You can pull up the Photo Albums page when you click the Photos link in the application's navigation toolbar. This page lists photo albums in much the same manner in which the news articles were listed. An example of the page is presented in Figure 21.

Figure 21. Photo Albums page

The photo albums will show a small thumbnail of the first image that was placed in the album and provide the end user with a link to view the entire photo album. Clicking on the title of the album will forward users to another page where the entire album is presented (PhotoAlbum_Contents.aspx).

Looking at the code of the PhotoAlbum_List.aspx page, you will notice that it indeed is built in the same manner as the News_List.aspx page. In fact, looking at the SqlDataSource control on the page that does the job of pulling out the photo album information, you will notice that there isn't much difference in this SqlDataSource control from the one that we reviewed earlier in this article. The SqlDataSource control that is used in PhotoAlbum_List.aspx is presented in Listing 7.

Listing 7: The SqlDataSource control used on PhotoAlbum_List.aspx

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="<%$ ConnectionStrings:ClubsiteDB %>"
 SelectCommand="PagedAlbumList" SelectCommandType="StoredProcedure" 
 OnSelected="SqlDataSource1_Selected"
 OnSelecting="SqlDataSource1_Selecting">
   <SelectParameters>
      <asp:ControlParameter Name="pageNum" ControlID="pn1" 
       PropertyName="SelectedPage" />
      <asp:Parameter DefaultValue="16" Name="pageSize" Type="Int32" />
      <asp:Parameter Name="pageCount" Direction="ReturnValue" 
       Type="Int32" />
      <asp:Parameter Name="ownerid" />
   </SelectParameters>
</asp:SqlDataSource>

From this listing, you can see that the PhotoAlbum_List.aspx page will display 16 photo albums per page. You can of edit this by changing the input parameter that is used in this datasource control.

When end users select an album to view they will be presented with a page that displays thumbnails of all the images contained in the album as well as a larger view of the first image in the album. This is illustrated here in Figure 22.

Figure 22. Photo album

From this page, users can either scroll through the images of the album or even download the images of their choice. To download the image, the Club Web Site Starter Kit uses an http handler (ImageFetch.ashx) to pull the image out of the database and stream it back for downloading.

Viewing the Application's Registered Members: Member_List.aspx

This next page we will review is viewable only if you are a registered user in the application. You don't have to be registered as an administrator of the application, but you do need to be registered in some fashion. Any user can actually register for the application by simply clicking the Membership link in the navigation toolbar and filling out the provided form. Doing this will automatically turn them into a registered member of the application.

After a user is registered for the application, their personal information will appear on the Members page. This page is illustrated here in Figure 23.

Figure 23. Member list

The member list allows for the listed members to be viewed either in a Show All view or by last name.

There are several interesting things to note when looking at the code for this page. First, the alphabet links above the list of members is driven from a SqlDataSource control. This control and the code used for the display of this linked list are presented here in Listing 8.

Listing 8: Retrieving the available members in an alphabet list

<asp:LinkButton ID="showall" runat="server" Text="Show All" 
 OnClick="showall_Click" />
<asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:ClubSiteDB %>" 
 ID="SqlDataSource1" runat="server" SelectCommand="MemberCountByLetter" 
 SelectCommandType="StoredProcedure" />
<asp:Repeater DataSourceID="SqlDataSource1" ID="Repeater1" runat="server">
   <ItemTemplate>
      <asp:LinkButton ID="hp1" runat="server" Text='<%#Eval("letter")%>' 
       Visible='<%# CInt(Eval("num"))>0 %>' OnClick="hp1_Click" 
       CssClass='<%# LinkClass(CSTR(EVAL("letter")))%>' />
      <asp:Label ID="LinkButton1" runat="server" 
       Text='<%#Eval("letter")%>' Visible='<%# CInt(Eval("num"))=0 %>' />
   </ItemTemplate>
</asp:Repeater>

In this case, the SqlDataSource control is using a stored procedure to get a list of members by a letter in the alphabet. Once retrieved, this information is then presented in the page using Eval databinding syntax statements within a Repeater control. Though there are two controls in the actual <ItemTemplate> section of the Repeater control, only one will be visible at a time. If there is a member with a last name starting with a specific letter, then the visibility of the LinkButton control will be turned to True; while if there isn't a member with a last name starting with a particular letter, then the letter will be presented only with a simple Label control.

The actual list of members is retrieved in a different manner than other items that are retrieved in this application. In the case of this page, the members are retrieved using an ObjectDataSource control instead of a SqlDataSource control that we have seen earlier.

The ObjectDataSource control is meant to retrieve data from a middle-tier component. In this case, the ObjectDataSource1 control here uses the TypeName attribute to point to a class called MemberDetails and a method contained within this class called Getmembers. You can find this class within the App_Code folder of your application. When the News_List.aspx page is requested, the MemberDetails class is invoked by the ObjectDataSource control that then binds the provided information using simple binding syntax such as <% Eval("PhotoURL") %>. This is presented in Listing 9.

Listing 9: Using an ObjectDataSource control to get member information

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
 SelectMethod="Getmembers" TypeName="MemberDetails">
   <SelectParameters>
      <asp:Parameter DefaultValue="" Name="Filter" Type="String" />
   </SelectParameters>
</asp:ObjectDataSource>

Let's next review the Membership page.

The Membership Page: Member_Register.aspx

There are two possible views on this page. If the end user is not registered with the site, then they will be presented with a registration form (Figure 24).

Figure 24. New user registration

This form actually has a few steps to it, and each of these steps is controlled through a new ASP.NET 2.0 control, the CreateUserWizard control. This control allows for multiple steps, each of which is defined using various types of WizardStep controls.

If the user is logged into the application they will be presented with a form that contains their personal information and allows them to make changes to the underlying data. This is presented in Figure 25.

Figure 25. Modify contact details

From this figure, you can see that this page provides the opportunity for the end user to change their personal information, add a photo of themselves, or even change their password.

The particular page the end user gets directed to (either the Member_Register.aspx or the Member_Details.aspx page) is dictated by a page called Member_Redirect.aspx. This is a simple page that directs the user to a new page depending on whether they are authenticated in the application or not. Looking at this page, you will find all the logic of the page contained within the Page_Load event. This is presented here in Listing 10.

Listing 10: Redirecting the user based upon login status

[VB]

Protected Sub Page_Load(ByVal sender As Object, 
  ByVal e As System.EventArgs)
        If Page.User.Identity.IsAuthenticated Then
            Response.Redirect("member_details.aspx")
        Else
            Response.Redirect("member_register.aspx")
        End If
End Sub

[C#]

protected void Page_Load(object sender, System.EventArgs e)
{
   if (Page.User.Identity.IsAuthenticated)
   {
      Response.Redirect("member_details.aspx");
   }
   else
   {
      Response.Redirect("member_register.aspx");
   }
}

To redirect the end user, it is simply a matter of using the Page.User.Identity.IsAuthenticated object. This provides a True or False value that can then be applied to an If Then statement.

Static Pages: Links.aspx and Contact.aspx

The final two pages we will look at are Links.aspx and Contact.aspx. These are simple content pages that use the Default.master page as their template (just as all the pages do). These two pages are presented here in Figure 26.

Figure 26. Links and contact information pages

Both pages are simply made up of hard-coded text that simply needs to be changed by you in order to be customized.

Summary

The Club Web Site Starter Kit is useful and valuable for several reasons. First, it allows you to quickly and easily launch a Web site for your club or organization. Second, and more importantly, this starter kit shows off some of the new capabilities found in ASP.NET 2.0 as well as some of the new features provided by the underlying .NET Framework 2.0.

From master pages to new controls, there is a lot to learn from this application. Some of the more important items to pay attention to are the new membership and role management systems that ASP.NET 2.0 provides. These new security systems allow for you to easily manage access to your application and not only authenticate users in a general fashion, but to also place the authenticated user in a particular role that will have different access rights.

The starter kit was created in the hope that you will thoroughly customize it. Customization should not be limited to just changing the lorem ipsum text, but instead you should look at how to add additional roles, privileges, new pages, and new capabilities. To learn more about customizing the Club Web Site Starter Kit, read my follow-up article, Extending the Club Web Site Starter Kit. Have fun and happy coding!

© Microsoft Corporation. All rights reserved.