12.3. Create Personalized Web Sites

Now that you have forms-based security working, you know who your user is and can store the user's preferences and, if appropriate, previous choices (e.g., "You have 3 items in your shopping cart").

To get started, you'll want a new project that duplicates the work you accomplished in the previous example. Create a new web site called SitePersonalization and use the CopyWebSite pattern described previously to make a copy of ASPSecurityRoles into the new site (copying over all the files and folders from the old site to the new.) Set Welcome.aspx as the Start page, and run the program to make sure you have a working duplicate.

12.3.1. Recording Personalization Information

The simplest form of personalization is to record information about the user, then make that information available whenever the user logs on. This requires a kind of persistence that goes beyond session state. To create true personalization, you'll want to store the user's choices and information in a database that associates the saved information with a particular user, and that persists indefinitely.

ASP.NET 2.0 provides all of the plumbing required. You do not have to design, edit, or manage the database tables; all of that is done for you.

12.3.1.1. Setting up profile handling

ASP.NET 2.0 has decoupled the Profile API (how you programmatically interact with profile data) from the underlying data provider (how you store the data). This allows you to use the default provider (SqlServerExpress), one of the other providers supplied (SQL server), or even write your own provider (e.g., for an existing Customer Relationship Management system) without changing the way you interact with the profile in the rest of your code.

If you wish to have the SQLExpress database handle the profile information, there are no additional steps; profile tables have already been created for you. To add data to the user's profile, alert the system about the data you wish to store by making an entry in Web.config. Add a profile section to the <system.web> element, as shown in Example 12-10.

Example 12-10. Adding a profile section to Web.config

 <?xml version="1.0"?> <configuration>   <connectionStrings>     <remove name="LocalSqlServer"/>     <add name="LocalSqlServer" connectionString="data source=.\sqlExpress;Integrated  Security=SSPI;Initial Catalog=aspnetdb"/>   </connectionStrings>   <system.web>     <authentication mode="Forms"/>     <membership defaultProvider="AspNetSqlMembershipProvider"/>     <roleManager enabled="True" defaultProvider="AspNetSqlRoleProvider"/>     <compilation debug="true"/>     <profile enabled="True" defaultProvider="AspNetSqlProfileProvider">       <properties>         <add name="lastName" />         <add name="firstName" />         <add name="phoneNumber" />         <add name="birthDate" type="System.DateTime"/>       </properties>     </profile>   </system.web> </configuration> 

Your Web.config file may look somewhat different depending on your machine configuration and the databases you have installed (SQL Server, SQL Express, etc.)

The configuration shown in Example 12-10 causes the Profile API to create storage for four pieces of information: first and last name, phone number, and birth date. The default storage type is String. Notice, however, that you are storing the birth date as a DateTime object.

You can gather this personalization information any way you like. For this example, return to Welcome.aspx and click on the smart tag to choose EditTemplates and then choose the LoggedIn Template. Set the text to Add Profile Info and the NavigateURL property to ProfileInfo.aspx (which you will create shortly). Don't forget to click EndTemplateEditing when you are done.

Create the new page: ProfileInfo.aspx. Add a table, and within the table, labels and checkboxes, as well as a Save button, as shown in Figure 12-30.

The HTML code for the Profile Table is shown in Example 12-11.

Figure 12-30. Profile table

Example 12-11. HTML for profile table

 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="ProfileInfo.aspx.vb" Inherits="ProfileInfo" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <title>ProfileInfo</title></head> <body>     <form  runat="server">     <div>             <table>             <tr>                 <td>First Name: </td>                 <td style="width: 193px">                   <asp:TextBox  Runat="server" />                 </td>             </tr>             <tr>                 <td>Last Name: </td>                 <td style="width: 193px">                  <asp:TextBox  Runat="server" /></td>             </tr>             <tr>                 <td>Phone number: </td>                 <td style="width: 193px">                    <asp:TextBox  Runat="server" />                 </td>             </tr>             <tr>                 <td>BirthDate</td>                 <td style="width: 193px">                    <asp:TextBox  Runat="server" />                 </td>             </tr>              <tr>                 <td>                    <asp:Button  Text="Save" Runat="server"                        OnClick="save_Click" />                  </td>                 <td style="width: 193px"></td>             </tr>         </table>     </div>     </form> </body> </html> 

All that remains to be done is to add an event handler for the Save button:

     Protected Sub save_Click( _     ByVal sender As Object, _     ByVal e As System.EventArgs) Handles save.Click         If Profile.IsAnonymous = False Then             Profile.lastName = Me.lastName.Text             Profile.firstName = Me.firstName.Text             Profile.phoneNumber = Me.phone.Text             Profile.birthDate = CType(Me.birthDate.Text, System.DateTime)         End If         Response.Redirect("Welcome.aspx")     End Sub 

The Profile.IsAnonymous property is explained in detail below

The Profile object has properties that correspond to the properties you added in Web.config. To test that the Profile object has, in fact, stored this date, you'll add a panel to the bottom of the Welcome page, as shown in Figure 12-31.

Figure 12-31. Welcome page panel

The panel has a table with three rows, and each row has a label that is initialized to say that the value is unknown (this is not normally needed, but is included here to ensure that the data you see is retrieved from the Profile object). When the page is loaded, you check to see if you have Profile data for this user and, if so, you assign that data to the appropriate controls.

Example 12-12 shows the source for the panel.

Example 12-12. Adding a panel to the Welcome page

 <asp:Panel  Runat="server" Visible="False" Width="422px" Height="63px">   <br />   <table width="100%">     <tr>       <td>         <asp:Label  Runat="server"          Text="Full name unknown">         </asp:Label></td>       </tr>     <tr>       <td>         <asp:Label  Runat="server"           Text="Phone number unknown">         </asp:Label>       </td>     </tr>     <tr>       <td>         <asp:Label  Runat="server"             Text="Birthdate  unknown">         </asp:Label>       </td>     </tr>   </table>  </asp:Panel> 

You'll need to add a bit of code to the Welcome.aspx.vb page, so that when the page loads it will check to see if you have a profile, and if so, it will make the panel visible, as shown in Example 12-13.

Example 12-13. Welcome page Page_Load method

 Protected Sub Page_Load( _ ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load     If Not IsPostBack And Profile.UserName IsNot Nothing Then         Me.pnlInfo.Visible = True         If Profile.IsAnonymous = False Then             Me.lblFullName.Text = Profile.firstName & " " & Profile.lastName             Me.lblPhone.Text = Profile.phoneNumber             Me.lblBirthDate.Text = Profile.birthDate.ToShortDateString( )         End If     Else         Me.pnlInfo.Visible = False     End If End Sub 

When you start the application, you are asked to log in. Once logged in, a new hyperlink appears: Add Profile Info. This was created by the hyperlink you added to the LoggedInTemplate earlier. Clicking on that link brings you to your new profile page, as shown in Figure 12-32.

Figure 12-32. Profile information page

When you click Save and return to the Welcome page, the Page_Load event fires. The Page_Load begins with an If statement:

      If Profile.UserName IsNot Nothing And _         Profile.IsAnonymous = False Then 

Both parts of the If statement evaluate TRue: the UserName value in the profile is not Nothing, and the user is logged in, and thus not anonymous.

Your profile information is displayed, as shown in Figure 12-33.

Figure 12-33. Profile information displayed

12.3.2. Exploring the Profile Tables

Stop the application and open the Database Explorer window, and look at the Tables in the aspnetdb database. Open two tables, aspnet_Users (which lists all the users your database knows about) and aspnet_Profile (which lists the profile information for those users). To see these next to each other, click and drag the tab for one of the views, as shown in Figure 12-34.

Figure 12-34. Drag tab

When you let go, a menu will open offering to create a new tab group. Choose New Horizontal Tab Group, as shown in Figure 12-35.

Figure 12-35. Create New Horizontal Tab Group

This done, you can see both the Profile tab and the Users tab in a single window. The Users tab shows you that each user has a unique UserID. The Profile tab has a foreign key added into that table (UserID) and lists the PropertyNames and PropertyValues, as shown in Figure 12-36.

Figure 12-36. Profile tables

PropertyNames matches up with the entries you created in the <profile> section of Web.config:

     <profile>         <properties>             <add name="lastName" />             <add name="firstName" />             <add name="phoneNumber" />             <add name="birthDate" type="System.DateTime"/>         </properties>     </profile> 

Each property is named (e.g., phoneNumber), given a type (S for string), a starting offset (phoneNumber begins at offset 5), and a length (phoneNumber's value has a length of 12). This offset and value are used to find the value within the PropertyValueString field.

Notice that birthDate is listed as a string, that begins at offset 17 and is 95 characters long; if you look at the propertyValuesString column, you'll find that the birthDate is encoded as XML.