Summary: Learn how to extend the new Personal Web Site Starter Kit, which is an available project type in Visual Web Developer 2005 Express Edition. (21 printed pages)

Contents

Introduction
First, Personalize Your Site
Extending the Administration Abilities
Conclusion
Related Books
About the Author

Introduction

Inside Visual Studio 2005 and Visual Web Developer 2005 Express Edition, you will find an ASP.NET project type labeled as Personal Web Site Starter Kit. This project type provides you with a basic Web site to modify as your own. I provide an overview of the starter kit in my article Introducing the Personal Web Site Starter Kit. If you need an introduction to the starter kit, then I recommend that you review this previous article first.

The Personal Web Site Starter Kit includes a home page, a resume page, a page that allows you to list your favorite links, and a photo album. The main piece of the starter kit is focused on the photo album and the administrator pages built around this functionality, which allows you to upload, modify, and delete photos as well as entire albums.

The starter kit is a great example of how to use some of the new and exciting features provided by ASP.NET 2.0 in an application. This starter kit utilizes master pages (the ability to provide your application with a master template), new configuration capabilities, XML definitions of the site structure (.sitemap files), and more.

This article will take a look at how to extend some of these features, which is the explicit purpose of the starter kit. 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 personal Web site; but instead, it might be something else entirely.

First, Personalize Your Site

The first thing you will want to do is to go through the site and completely personalize the pages you are going to keep in the application. This means changes to the master page and any of the content pages contained within the application.

Besides that, one important item you should be aware of for this application is that it 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 in order to save the cost of regenerating the page.

In most cases, you are most likely going to be presenting data on your personal Web site that isn't going to be changing frequently. 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 are combined when invoked to create a single ASP.NET page. Since this is the case, where exactly would you apply the caching?

When using master pages, you would apply caching to the content page, not to the master page. When using the OutputCache page directive, you need to place this in the content page for your page for any caching to occur. 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.

Extending the Administration Abilities

The rest of this article will look at extending various parts of the application by examining the administrator's abilities to remotely manage the content of the application.

Presently, if you are logged in as an administrator for the application, you will have the ability to create, delete, or modify photo albums that are presented through the application. The rest of the application's content, mainly the textual content and the provided "cool links," are just hard-coded text contained in the content pages themselves. We will take a look at placing some of these items in a SQL Express database as well as making this content remotely manageable through the browser, as are the photo albums.

Adding a Page to the Application

The first step that we will take is to add some additional pages to the overall application. Presently, when you log into the application as an administrator and click on the Manage link, you are brought to the Albums.aspx page shown here in Figure 1.

Figure 1. Albums administration page

As you can see, the main administration page allows you to create and manage photo albums as well the ability to add and modify the user database, which really is simply a link to the webadmin.axd http handler (this will run only for the local user).

In order to add the ability for the site administrator to manage some site content from this page in addition to the photo albums presented, we are going to have to make some changes here. You could just add these new management capabilities to the page presented here in Figure 1, but instead of that, let's add a couple of additional management pages just to make it a little more interesting.

For our example, let's cause the Manage link to go to a simple page that allows for further navigation to manage the photo albums, another page to manage users, and a third page to manage site content.

To create these new pages, let's first make the necessary changes to the web.sitemap file. The original web.sitemap file is presented in Listing 1.

Listing 1: The original web.sitemap file

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
   <siteMapNode title="Home" url="Default.aspx">
      <siteMapNode title="Resume" url="Resume.aspx" />
      <siteMapNode title="Links" url="Links.aspx" />
      <siteMapNode title="Albums" url="Albums.aspx" >
         <siteMapNode title="Photos" url="Photos.aspx" >
            <siteMapNode title="Details" url="Details.aspx" />
         </siteMapNode>
      </siteMapNode>
      <siteMapNode title="Register" url="Register.aspx" />
      <siteMapNode title="Manage" url="Admin/Albums.aspx" >
         <siteMapNode title="Photos" url="Admin/Photos.aspx" >
            <siteMapNode title="Details" url="Admin/Details.aspx" />
         </siteMapNode>
      </siteMapNode>
   </siteMapNode>
</siteMap>

A sitemap is an XML description of your application's structure. This definition is then used by various site navigation server controls that are made available to you. For instance, the Personal Web Site Starter Kit uses the Menu server control at the top of the application in a horizontal view. This control simply reads the content of the web.sitemap file through a SiteMapDataSource server control in order to generate its results. This menu is presented here in Figure 2.

Figure 2. The new menu

If you look at the original .sitemap file shown in Listing 1, you can see that the Manage link is defined to use the URL Admin/Albums.aspx. For our example, let's change around the Admin section so that we can break out some of the management capabilities onto separate pages. In the end, you should have a web.sitemap file as presented here in Listing 2.

Listing 2: The modified web.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
   <siteMapNode title="Home" url="Default.aspx">
      <siteMapNode title="Resume" url="Resume.aspx" />
      <siteMapNode title="Links" url="Links.aspx" />
      <siteMapNode title="Albums" url="Albums.aspx" >
         <siteMapNode title="Photos" url="Photos.aspx" >
            <siteMapNode title="Details" url="Details.aspx" />
         </siteMapNode>
      </siteMapNode>
      <siteMapNode title="Register" url="Register.aspx" />
      <siteMapNode title="Manage" url="Admin/Manage.aspx" >
         <siteMapNode title="Albums" url="Admin/Albums.aspx" >
            <siteMapNode title="Photos" url="Admin/Photos.aspx" >
               <siteMapNode title="Details" url="Admin/Details.aspx" />
            </siteMapNode>
            <siteMapNode title="Site Content" url="Admin/Content.aspx" />
            <siteMapNode title="Manage Users" url="Admin/Users.aspx" />
         </siteMapNode>
      </siteMapNode>
   </siteMapNode>
</siteMap>

From this example, you can see that adding additional pages to the application's navigation system is simply a matter of adding some additional XML nodes to the web.sitemap document. In this case, we changed the destination of the Manage link (it now points to Admin/Manage.aspx) and we added two new pages: Content.aspx and Users.aspx. Now let's look at creating some of these pages.

Manage.aspx

Let's create a new page for the Manage link in the navigation system: Manage.aspx. In creating Manage.aspx, remember that we are going to want to create this ASP.NET page so that it is located in the Admin folder (as seen in the Visual Studio Solution Explorer). To do this, right-click the Admin folder in the Solution Explorer and select Add New Item. This will pull up the Add New Item dialog box, which will allow you to select a new Web form. This is shown here in Figure 3.

Figure 3. Adding a new content page

In this dialog box, note that we are interested in creating a content page. A content page works with a master page and we have specified this by selecting the Select master page check box. Doing this and clicking Add will pull up another dialog that allows you to select the master page to use for this particular content page. In this case, there is only one master page to choose from: Default.master.

This content page —Manage.aspx— will simply contain three image buttons. The code for this page is presented here in Listing 3.

Listing 3: Manage.aspx

<%@ Page Language="VB" MasterPageFile="~/Default.master" 
    AutoEventWireup="false" CodeFile="Manage.aspx.vb" Inherits="Manage" 
    title="Manage Your Personal Web Site" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
   <div class="shim column"></div>
   <div class="page" id="admin-albums">
      <div id="sidebar">
          <h3>Choose an area to manage</h3>
      </div>
      <div id="content">
          <table width="90%"><tr>
             <td><asp:ImageButton ID="ImageButton1" runat="server" 
                  ImageUrl="../Images/button_sitecontent.gif" 
                  PostBackUrl="Content.aspx" /></td>
             <td><asp:ImageButton ID="ImageButton2" runat="server" 
                  ImageUrl="../Images/button_manageusers.gif"  
                  PostBackUrl="Users.aspx" /></td>
             <td><asp:ImageButton ID="ImageButton3" runat="server" 
                  ImageUrl="../Images/button_albums.gif"  
                  PostBackUrl="Albums.aspx" /></td>
            </tr></table>
      </div>
      
   </div>
</asp:Content>

Since this is a content page, you can see that it points to the master page to use the @Page directive's MasterPageFile attribute. Also, this page is rather simple. It uses the same CSS classes as the Albums.aspx page found in the Admin folder and simply contains a table holding three image buttons that each point to a different administration page. Running this page in the browser produces the graphic shown here in Figure 4.

Figure 4. The new Administration home page

Now that the Manage.aspx page is in place, the next step we will take is to create the Users.aspx page. I explain how in the next section.

Users.aspx

This page will be rather simple to create. If you look back at Figure 1, you will notice that there is a small section on the page that is dedicated to allowing you to manage your users and the user's settings (shown in the lower left-hand corner of the page). Since we want to separate the administration functionality a bit, we will end up pulling this section from the Albums.aspx page and then placing it in the Users.aspx page instead.

The first step is to create the Users.aspx page. Just like the Manage.aspx page, create the Users.aspx page inside of the Admin folder and make sure that it is a content page using the Default.master page as its master template.

The code to use for Users.aspx is shown here in Listing 4.

Listing 4: Users.aspx

<%@ Page Language="VB" MasterPageFile="~/Default.master" 
    AutoEventWireup="false" CodeFile="Users.aspx.vb" Inherits="Users" 
    title="Manage Users" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
   <div class="shim column"></div>
   <div class="page" id="admin-albums">
      <div id="sidebar">
          <h3>Users and Settings</h3>
      </div>
      <div id="content">
         <p>To add or remove user accounts and change other site-wide 
         settings, use the <a href="webadmin.axd">ASP.NET Web Site 
         Administration Tool</a>.</p>
         <p>Note: If this site is being hosted on <b>Visual Web Developer 
         Web Server</b>, please
         access the <b>ASP.NET Web Site Administration Tool</b> via the 
         <b>ASP.NET Configuration</b>
         menu item within Visual Web Developer.</p>
      </div>
      
   </div>
</asp:Content>

This page is very much like the Manage.aspx page. It uses the same CSS styling and has some simple text and a link to the webadmin.axd http handler. Again, it is important to note that you will be able to invoke this http handler only as a local user on the server.

Figure 5 illustrates what is produced by the Users.aspx page.

Figure 5. The new User Administration page

The next and final step is to create an administration page that will allow us to manage the content of the home page.

Building a Simple Content Management System

If you look at the home page for the Personal Web Site Starter Kit, you will notice that much of the text it contains is hard-coded in the actual page. Though this works, let's look at changing this structure so that the content is retrieved from a SQL Server 2005 Express database instead. We will also look at allowing the site administrator (someone under the Administrators role) to update this information directly from an admin page that we will later create (Content.aspx).

The first step we will take to achieve this is to modify the SQL Express file, Personal.mdf. We will use Personal.mdf to store the home page content in addition to the photo album information for which it is already used. It is important to note that this is just one example. You could also build this content management system to use an XML file instead of the SQL Express file.

Modifying the Personal.mdf File

From the Visual Web Developer Solution Explorer, expand the App_Data folder. You will notice that there are two SQL Server Express files in this folder, ASPNETDB.mdf and Personal.mdf.

ASPNETDB.mdf is used by ASP.NET to store values for the various systems that are part of ASP.NET such as the new membership and role management systems. All the application roles and the user's credentials are stored in this database file.

The Personal.mdf file is used to store the photo album information and even the photos themselves (they are contained within the Photos table). Our first step is to add a new table to this database. This new table is where we will store the text that will appear on the home page of the Personal Web Site Starter Kit.

To create a new table in the SQL Server Express file, choose the Database Explorer tab in Visual Web Developer and expand the Data Connections root node. Expand the Tables folder for the Personal.mdf database presented by expanding Personal.mdf, then Tables in the Database Explorer. You will see that this database contains two tables called Albums and Photos. To add an additional table, right-click the Tables folder and select Add New Table from the list of options.

In this table, we are interested in adding a few simple columns. Following is a list of columns and their associated data types to add to the table:

Column Name                      Data Type

TextId                           int

Homepage_Welcome                 varchar(MAX)

Homepage_WhatsNew                varchar(MAX)

Homepage_WhatsUpLately           varchar(MAX)

After these columns are in place, right-click the TextId column and set this column to be a primary key. Doing this will allow us to later update the other columns as the update will require a way to identify the row that needs updating (even though we are using just one row in the table).

In the end, your table definition should appear as shown in Figure 6.

Figure 6. Table definition

Next, save the table and you will then be presented with a dialog box that asks you to name the table. Name the table SiteContent. After the table is named and saved, it will then appear in the Database Explorer with the other two tables. Next, right-click the newly created table SiteContent and select Show Table Data from the list of options. This will show a list of columns plus the data contained within each (which will be just NULL values at this point).

From here, you can enter in the content of your page, but since we will be building a page to do this later, let's just enter a numeric 0 in the TextId column and the string "Test" in each of the other columns. This is illustrated here in Figure 7.

Figure 7. Adding content to the new table

Now that the Personal.mdf file contains the additional table that will drive the home page of the application, let's next re-code the home page to work from this database table.

Re-coding the Default.aspx page to work from the Personal.mdf file

Pull up the Default.aspx page in Visual Studio and scroll to the bottom of the page. Here at the bottom is an ObjectDataSource control. This control drives the photo that appears on the sidebar of the page. ASP.NET 2.0 provides a number of new data controls that work to pull data from different data sources as well as perform operations such as inserting, deleting, and updating data in these data stores. Looking in the Toolbox of Visual Studio, you will notice that in addition to the ObjectDataSource control used in the Personal Web Site Starter Kit, there are also data source controls for working with SQL databases, Microsoft Access, XML sources, and sitemaps. The ObjectDataSource control used on the Default.aspx page is shown here:

<asp:ObjectDataSource ID="ObjectDataSource1" Runat="server"  
 TypeName="PhotoManager" SelectMethod="GetPhotos">
</asp:ObjectDataSource>

You would use the ObjectDataSource control when you are interested in using a traditional three-tiered model when it comes to working with data that is presented on your page. From this example, you can see that the photos are retrieved through the class PhotoManager (specified by the TypeName attribute) using the GetPhotos method (specified by the SelectMethod attribute). You will find the PhotoManager.vb or .cs class file in the App_Code folder of your project. Contained within this class, you will then find the GetPhotos method :

Visual C#

public static List<Photo> GetPhotos()
{
        return GetPhotos(GetRandomAlbumID());
}

Visual Basic

Public Shared Function GetPhotos() As Generic.List(Of Photo)
        Return GetPhotos(GetRandomAlbumID())
End Function

In changing the Default.aspx page so that it will now display textual content as retrieved from the Personal.mdf file, you could certainly add another class to the App_Code folder that deals with getting this information and then use another ObjectDataSource control to invoke a Select method in that class. Constructing the site content retrieval in this manner will allow you to extend the data model that the application is already using. However, for the sake of learning, let's instead look at using a SqlDataSource control to pull the site content data.

Setting up the SqlDataSource control

To set up a SqlDataSource control that will be used to pull the site content data from the Personal.mdf file, open up the Default.aspx page in Visual Studio in the Design mode (the Design tab is at the bottom of the document window). Once the page is open in the Design mode, drag a SqlDataSource control onto the design surface so that it is positioned next to the ObjectDataSource control at the bottom of the page. Highlighting the SqlDataSource control and clicking the green arrow that will appear will allow you to open the control's smart tag. From here, you will then be able to click on the Configure Data Source link. This will launch a wizard that will allow you to configure the SqlDataSource control to get at the site content data found in the Personal.mdf file. The first page of this wizard is shown in Figure 8.

Figure 8. Configuring a Data Source Wizard

As the wizard asks you to configure the SqlDataSource control, you can see that you first need to establish a connection to the Personal.mdf file. Since there is already a defined connection in the web.config file, you will see the option of Personal in the drop-down list. Select Personal and then click the Next button.

The next screen in the wizard allows you to specify the table you want to work with. In this case, select SiteContent from the drop-down list. Since we want to deal with everything contained in this table, select the asterisk (*), a wildcard character that indicates that you are interested in everything this table offers. This is shown here in Figure 9.

Figure 9. Configuring a Data Source: Selecting the table

You are now ready to move onto the next screen in the wizard, which allows you to test the connection to the Personal.mdf database you just created. Clicking the Test Query button should produce the results illustrated here in Figure 10.

Figure 10. Configuring a Data Source: Previewing the Data

When you are done, click Finish. Listing 5 shows the code of the SqlDataSource control that Visual Studio will generate from the instructions provided to the wizard.

Listing 5: The SqlDataSource control code as generated by Visual Studio

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
 ConnectionString="<%$ ConnectionStrings:Personal %>"
 SelectCommand="SELECT * FROM [SiteContent]">
</asp:SqlDataSource>

Now that the SqlDataSource control is in place, let's move on to the next step of modifying the Default.aspx page to show the content that will come from this datasource control.

Modifying the Default.aspx page to show the content coming from the SqlDataSource control

Looking at the source code for the Default.aspx page, you will notice that the page is a content page that uses the only master page available to it in the application: Default.master. This master page exposes a single area for the content page to use. This area is then defined in the content page through the use of a single Content server control located on the page. Inside of the Content server control, you will see that the content page is divided up into a few distinct sections, all of which are defined by <div> elements. A framework of this is shown here in Listing 6.

Listing 6: Looking at the structure of the Default.aspx page

<%@   Page Language="VB" MasterPageFile="~/Default.master" 
      Title="Your Name Here | Home"
      CodeFile="Default.aspx.vb" Inherits="Default_aspx" %>
<asp:content id="Content1" contentplaceholderid="Main" runat="server">
   <div class="shim column"></div>
   
   <div class="page" id="home">
      <div id="sidebar">
         <!-- Content removed for clarity -->
      </div>
      <div id="content">
         <!-- Content removed for clarity -->
      </div>
   </div>
</asp:content>

From this code framework, you can see that the actual page is divided up into two sections: the sidebar content (defined using <div id="sidebar">) and the main part of the page (using <div id="content">). Since we are interested in driving the content contained in the <div id="content"> section of the page, let's focus on that part of the page. To accomplish this, we are going to place a DataList server control in this section of the page and pull out the values we need using Eval statements. This is illustrated in Listing 7.

Listing 7: Using a DataList control to drive the content on the page

<div id="content">
   <asp:DataList ID="DataList1" runat="server" 
    DataSourceID="SqlDataSource1">
      <ItemTemplate>
         <h3>Welcome   to My Site</h3>
         <p><%# Eval("Homepage_Welcome")%></p>
         <hr   />
         <div id="whatsnew">
            <h4>What's New</h4>
            <p><%# Eval("Homepage_WhatsNew") %></p>
         </div>
         <div id="coollinks">
            <h4>Cool Links</h4>
            <ul class="link">
            <li><a HREF="#" TARGET="_self">Lorem ipsum dolositionr</a></li>
            <li><a HREF="#" TARGET="_self">Lorem ipsum dolositionr</a></li>
            <li><a HREF="#" TARGET="_self">Lorem ipsum dolositionr</a></li>
            <li><a HREF="#" TARGET="_self">Lorem ipsum dolositionr</a></li>
            <li><a HREF="#" TARGET="_self">Lorem ipsum dolositionr</a></li>
            </ul>
         </div>
         <hr />
         <h4>What's Up Lately </h4>
         <p><%# Eval("Homepage_WhatsUpLately") %></p>
      </ItemTemplate>
   </asp:DataList>
</div>

From the example illustrated here in Listing 7, you can see that the DataList server control binds itself to the SqlDataSource1 control by using the DataSourceId attribute.

<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1">
</asp:DataList>

The DataList control provides a number of template types that can be used for display purposes. Examples include a header template, footer template, item template, separator template, and more. Since we are interested in displaying a single row from the SiteContent table, we therefore need to employ only the <ItemTemplate> node and nothing more. When the DataList control is then rendered, it will display the contents of the <ItemTemplate> section once for each row contained in the table in which it is bound.

Inside the <ItemTemplate> section, we can then get at the contents for a particular column of the SiteContent table through the use of a data-binding expression Eval. In ASP.NET 2.0, the data binding has been simplified and can now be as simple as:

<%# Eval("Homepage_Welcome") %>

This statement will cause the contents contained in the table column Homepage_Welcome to be displayed in its place.

Save the Default.aspx page and run it in the browser. You should now see the results as shown in Figure 11.

Figure 11. The new dynamic home page

Creating an administrator page to update the page content

Our final step is to create a page for the Site Content link of the Manage.aspx page. This new page will allow administrators to update the content that appears on the Default.aspx page. For this step, create a new content page called Content.aspx that uses the Default.master page as a template.

This page will require you to place a SqlDataSource control on it. The configuration of this SqlDataSource control will be a bit different than that of the Default.aspx page. Since we are going to be also dealing with the updating of the data on this administration page, we are therefore interested in having this SqlDataSource control perform the proper updates to the data contained in the SiteContent table. Therefore, as you work through the SqlDataSource control's configuration wizard, when you are working from the Select statement page of the wizard, click the Advanced button in the dialog box and select the first check box to build a SqlDataSource control that will allow for the updating of the data. These dialogs are shown here in Figure 12.

Figure 12. Automatically generating SQL statements

After working through the wizard, your SqlDataSource control should appear as shown in Listing 8.

Listing 8: The SqlDataSource control code as generated by Visual Studio

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
  ConnectionString="<%$ ConnectionStrings:Personal %>"
DeleteCommand="DELETE FROM [SiteContent] WHERE [TextId] = 
   @original_TextId" 
InsertCommand="INSERT INTO [SiteContent] ([TextId], 
   [Homepage_Welcome], [Homepage_WhatsNew], [Homepage_WhatsUpLately]) 
   VALUES (@TextId, @Homepage_Welcome, @Homepage_WhatsNew, 
   @Homepage_WhatsUpLately)"
SelectCommand="SELECT * FROM [SiteContent]" 
UpdateCommand="UPDATE [SiteContent] SET [Homepage_Welcome] = 
   @Homepage_Welcome, [Homepage_WhatsNew] = @Homepage_WhatsNew, 
   [Homepage_WhatsUpLately] = @Homepage_WhatsUpLately WHERE [TextId] = 
   @original_TextId">
        <DeleteParameters>
            <asp:Parameter Name="original_TextId" Type="Int32" />
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="Homepage_Welcome" Type="String" />
            <asp:Parameter Name="Homepage_WhatsNew" Type="String" />
            <asp:Parameter Name="Homepage_WhatsUpLately" Type="String" />
            <asp:Parameter Name="original_TextId" Type="Int32" />
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="TextId" Type="Int32" />
            <asp:Parameter Name="Homepage_Welcome" Type="String" />
            <asp:Parameter Name="Homepage_WhatsNew" Type="String" />
            <asp:Parameter Name="Homepage_WhatsUpLately" Type="String" />
        </InsertParameters>
    </asp:SqlDataSource>

Of course, we are interested only in reading (using the Select statement) and updating (using the Update statement) the data in the SiteContent table. Since we are not interested in deleting or inserting new rows of data into the SiteContent table, you can feel free to delete the UpdateCommand and InsertCommand attributes and their values from the SqlDataSource control. You can also feel free to delete the <DeleteParameters> and the <InsertParameters> sections as well.

Now that the SqlDataSource control is in place, let's add a FormView control to the page to drive all the displaying and updating of the content to the SiteContent table. Drag and drop a FormView control onto the Content.aspx page.

From the smart tab of the FormView control, select the SqlDataSource1 control instance as the data source to use. Then, moving back to the source code view of the Content.aspx page, you can see that a lot of code has been added to the FormView control. Since we are interested in updating only a single row of content and we are not interesting in deleting the row of data from the SiteContent table or adding any new rows to the table, you should then delete the <InsertItemTemplate> section. Also, in the <ItemTemplate> section, delete the LinkButtons for deleting and adding new content. The only LinkButton control in the <ItemTemplate> section should be for editing the content displayed. After a little styling and deleting the above-mentioned sections, your FormView control should appear similar to that illustrated in Listing 9.

Listing 9: The FormView control (after modifications)

<asp:FormView ID="FormView1" runat="server" DataKeyNames="TextId" 
 DataSourceID="SqlDataSource1" >
   <EditItemTemplate>
      <p><b>TextId:</b>
      <asp:Label ID="TextIdLabel1" runat="server" 
      Text='<%# Eval("TextId") %>'></asp:Label></p>
      <p><b>Homepage_Welcome:</b><br />
      <asp:TextBox ID="Homepage_WelcomeTextBox" runat="server" 
      Text='<%# Bind("Homepage_Welcome") %>' TextMode="MultiLine">
      </asp:TextBox></p>
      <p><b>Homepage_WhatsNew:</b><br />
      <asp:TextBox ID="Homepage_WhatsNewTextBox" runat="server" 
      Text='<%# Bind("Homepage_WhatsNew") %>' TextMode="MultiLine">
      </asp:TextBox></p>
      <p><b>Homepage_WhatsUpLately:</b><br />
      <asp:TextBox ID="Homepage_WhatsUpLatelyTextBox" runat="server" 
      Text='<%# Bind("Homepage_WhatsUpLately") %>' TextMode="MultiLine">
      </asp:TextBox></p>
      <asp:LinkButton ID="UpdateButton" runat="server" 
      CausesValidation="True" CommandName="Update" Text="Update">
      </asp:LinkButton>
      <asp:LinkButton ID="UpdateCancelButton" runat="server" 
      CausesValidation="False" CommandName="Cancel" Text="Cancel">
      </asp:LinkButton>
   </EditItemTemplate>
   <ItemTemplate>
      <p><b>TextId:</b>
      <asp:Label ID="TextIdLabel" runat="server" 
      Text='<%# Eval("TextId") %>'></asp:Label></p>
      <p><b>Homepage_Welcome:</b><br />
      <asp:Label ID="Homepage_WelcomeLabel" runat="server" 
      Text='<%# Bind("Homepage_Welcome") %>'>
      </asp:Label></p>
      <p><b>Homepage_WhatsNew:</b><br />
      <asp:Label ID="Homepage_WhatsNewLabel" runat="server" 
      Text='<%# Bind("Homepage_WhatsNew") %>'>
      </asp:Label></p>
      <p><b>Homepage_WhatsUpLately:</b><br />
      <asp:Label ID="Homepage_WhatsUpLatelyLabel" runat="server" 
      Text='<%# Bind("Homepage_WhatsUpLately") %>'>
      </asp:Label></p>
      <asp:LinkButton ID="EditButton" runat="server" 
      CausesValidation="False" CommandName="Edit" Text="Edit">
      </asp:LinkButton>
   </ItemTemplate>
</asp:FormView>

From this code listing, you can see that we added a few break lines and changed the edit template so that instead of using standard TextBox controls, we are now using multilined textboxes.

Running these pages as an administrator will produce the results shown in Figure 13.

Figure 13. The edit content page

Clicking the Edit button will allow you to edit the contents of each of these sections. This is illustrated in Figure 14.

Figure 14. Changing the home page content

Now the information placed inside of these controls will be updated into the SiteContent table, which in turn will be output to the Default.aspx page. Now the content of the Default.aspx page is remotely manageable.

Conclusion

This article showed you how to work with the foundation of the Personal Web Site Starter Kit and expand upon 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!

Related Books

• Bill Evjen, ASP.NET 2.0 Beta Preview