User Customization with Themes and Profiles

Perhaps one of the most powerful uses of both profile and theme technology is to combine the two by allowing the users to choose their own theme and store that choice as a profile property. The Theme property of the Page object is a string type, so you can add a user profile property to store the currently selected theme with the following <add> element in the <properties> element of the <profile> element:

<add name="Theme" type="string" allowAnonymous="true"/> 

To see this all work together, go back to the ThemesSkins solution you created earlier if you were following along. That web application has three themes defined: Blue, Red, and Green. It also has a Site.master page with some random content in it just to illustrate that themes are applied to the final rendering and don't interfere with Master Page composition. The Controls.skin file in all of the themes has been modified to make sure that they all had Flat and Inverse button definitions to make the sample show up more clearly.

The first thing to do is to modify the Site.master so that it is displaying the name of the user's currently selected theme. To do this, just add a label anywhere you want in the Site.master and set the page's code as follows:

using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class Site : System.Web.UI.MasterPage {     protected void Page_Load(object sender, EventArgs e)     {         lblTheme.Text = Profile.Theme;     } } 

Next, you'll want to create a MyProfile.aspx page used to allow the users to view and save their own profiles just as you did in the preceding section. Set the ASPX code as follows:

<%@ Page Language="C#"    MasterPageFile="~/Site.master"    AutoEventWireup="true"    CodeFile="MyProfile.aspx.cs"    Inherits="MyProfile"    Title="My Profile" %> <asp:Content  ContentPlaceHolder Runat="Server"> First Name: <asp:TextBox  runat="server" /><br /> Last Name: <asp:TextBox  runat="server" /><br /> Theme: <asp:DropDownList  runat="server">        <asp:ListItem Text="Blue Theme" Value="Blue" />        <asp:ListItem Text="Green Theme" Value="Green" />        <asp:ListItem Text="Red Theme" Value="Red" /> </asp:DropDownList><br /> <asp:Button  runat="server"   Text="Save Profile" OnClick="btnSave_Click" /> </asp:Content> 

Then enter the following code for MyProfile.aspx.cs:

using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class MyProfile : System.Web.UI.Page {     protected void Page_Load(object sender, EventArgs e)     {         if (!Page.IsPostBack)         {             txtFirstName.Text = Profile.FirstName;             txtLastName.Text = Profile.LastName;         }     }     protected void btnSave_Click(object sender, EventArgs e)     {         Profile.FirstName = txtFirstName.Text;         Profile.LastName = txtLastName.Text;         Profile.Theme = dlTheme.SelectedValue;         Profile.Save();     } } 

The last step is to modify any existing pages so that they dynamically set the theme based on the user's profile. Add the following lines of code to any existing page to do just that:

protected override void OnPreInit(EventArgs e) {     base.OnPreInit(e);     Page.Theme = Profile.Theme; } 

This framework allows your users to select the look and feel that they prefer most, with very little work done by the developer. When the themes have been created either by the developer or by designers, the hard work is done. Setting up a profile property to store the user's theme is just a matter of adding one line to the Web.config file, and modifying a page to dynamically change its theme based on the user's profile only takes a few more lines of code. If all your pages inherit from the same base page, you could make that change in the base page and your entire site could automatically have the dynamic theme selection ability. Figure 25.4 shows a page where the theme name is displayed by Site.master and the rest of the content has been skinned and themed dynamically based on the user's profile (though the color might not be obvious).

Figure 25.4. Themes, skins, and user profiles in action.