Customizing and Managing Your Site's Appearance / Part 3 - Page 2

Customizing and Managing Your Site's Appearance - Part 3 [con't]

Master Pages and Themes

ASP.NET themes provide a centralized way to define the appearance of a Web site. Although your content pages can make use of themes, you can simply use master pages to set the theme for your site as a whole. That is, you cannot use the Theme attribute within the Master directive at the top of the master page (although you can still do so in the Page attribute of each of your content pages).

However, you can use your master page to provide a user interface element that allows the user to browse and dynamically set the theme for your content pages. You may recall back in Listing 6.4, you programmatically set the theme of a page within the PreInit event of the page and you used ASP.NET session state to store the currently selected theme. Unfortunately, you cannot set the theme for your content pages within the PreInit event of the master page. Instead, you must have the PreInit event handler within the content page. If you have hundreds or even thousands of content pages, does that mean you must have the same PreInit event handler in all of these content pages?

Fortunately, no; you can make use of some simple object-oriented inheritance so that you only need code the PreInit event handler once. Recall that the code-behind class for all Web Forms has the Page class as its base class. You can define your own class that inherits from this base class and which contains the PreInit event handler that sets the themes. This new class then becomes the base class for the code-behind classes in your site.

The example site contained in Listings 6.9 through 6.13 demonstrates this technique (along with the other material covered in this chapter on master pages). It uses master pages to specify the structure of the site, themes, and CSS to control the appearance of the site's pages. The master page contains both an advertisement banner image that is customized by each content page as well as a theme selector. Figures 6.16 and 6.17 illustrate how the example appears with its two themes.

Listing 6.9 contains the code for the new class that will become the base class for all your Web Forms. Like Listing 6.4, it simply retrieves the theme selected by the user from the session state and applies it to the (content) page. This class file should be saved in your project's App_Code folder.

Listing 6.9 ParentPage.cs

I won't bother showing you all the content pages in the site. Listing 6.10 illustrates one sample content page (the home page).

Listing 6.10 Default.aspx

<%@ Page Language="C#" MasterPageFile="~/BookWithThemes.master"
  AutoEventWireup="true" CodeFile="Default.aspx.cs"
  Inherits="Default"
  Title="Master with Dynamic Themes - Home" %>
<%@ MasterType VirtualPath="~/BookWithThemes.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="sideContent"
   Runat="Server">
 <h2>Featured Book</h2>
 <h3>Core C# and .NET<br />
 <asp:Image ID="imgBook" runat="server" CssClass="sideImage"
   ImageUrl="~/images/0131472275.gif"
   AlternateText="Cover image of Core C# book"/></h3>
 <p>Core C# and .NET is the no-nonsense, example-rich guide to
 achieving exceptional results with C# 2.0 and .NET 2.0. Writing
 for experienced programmers, Stephen Perry presents today's
 best practices for leveraging both C# 2.0 language features and
 Microsoft's .NET 2.0 infrastructure.</p>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContent"
   Runat="Server">
 <h1>Book Rep System Home</h1>
 <p>
 This set of pages demonstrates how master pages can contain a
 dynamic theme selector. This set of pages demonstrates how
 master pages can contain a dynamic theme selector. This set of
 pages demonstrates how master pages can contain a dynamic theme
 selector. This set of pages demonstrates how master pages can
 contain a dynamic theme selector.
 </p>
</asp:Content>

The code-behind for this sample content page (see Listing 6.11) must be altered to use your ParentPage class as its base class. Notice as well that it modifies properties exposed by the master page to customize the advertisement that appears within the master page.

Listing 6.11 Default.aspx.cs

Listing 6.12 defines the markup for the master page.

Listing 6.12 BookWithThemes.master

<%@ Master Language="C#" AutoEventWireup="true"
  CodeFile="BookWithThemes.master.cs"
  Inherits="BookWithThemes" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title></title>
</head>
<body>
  <form id="form1" runat="server">
   <div id="container">
     <div>
      <div id="themes">
        <p>Theme <br />
        <asp:DropDownList ID="drpThemes" runat="server"
         AutoPostBack="true" OnSelectedIndexChanged=
          "drpTheme_selectedChanged">
        </asp:DropDownList>
        </p>
      </div>
      <div id="bannerAd">
        <asp:HyperLink ID="imgbtnAd" runat="server" />
      </div>
      <div class="clearBreak"></div>
      <div id="logo">
        <asp:Image runat="server" ID="imgLogo"
         SkinID="logo"/>
      </div>
     </div>
     <div id="sideArea">
      <div id="masterMenu">
        <asp:BulletedList ID="blstSample" runat="server" >
         <asp:ListItem Value="Default.aspx">
           Home</asp:ListItem>
         <asp:ListItem Value="Products.aspx">
          Products</asp:ListItem>
         <asp:ListItem Value="About.aspx">
          About</asp:ListItem>
        </asp:BulletedList>
      </div>
      <div id="sideAreaBox">
        <asp:ContentPlaceHolder ID="sideContent"
         runat="server">
        <p>default side content</p>
        </asp:ContentPlaceHolder>
      </div>
     </div>
     <div id="mainArea">
      <asp:ContentPlaceHolder ID="mainContent"
        runat="server">
      <p>default main content</p>
      </asp:ContentPlaceHolder>
     </div>
     <div id="footer">
      <p>
      This site is not real. It is an example site for Core
      ASP.NET book.
      </p>
     </div>
   </div>
  </form>
</body>
</html>

Like the other master pages examined in this chapter, this master page contains no formatting. The CSS and skins of your themes control the appearance of each page. The master page contains four main sections:

, , , and . The sideArea and mainArea sections contain the two ContentPlaceHolder controls. The header section contains the logo image, an advertisement image, and a DropDownList that allows the user to change the theme. The theme list is not filled via markup, but instead is filled programmatically in the code-behind class for this master page, as shown in Listing 6.13.

Listing 6.13  BookWithThemes.master.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;
// Note that you need to include this namespace reference
using System.IO;
public partial class BookWithThemes : System.Web.UI.MasterPage
{
  ///
  /// Populate theme list based on themes in App_Themes folder
  ///
  protected void Page_Load(object sender, EventArgs e)
  {
   // Dynamically load the drop-down list only the first time
   if (!IsPostBack)
   {
     // Themes must be in this location
     string path = Server.MapPath("~/App_Themes");
     // Verify this location exists
     if (Directory.Exists(path))
     {
      // Retrieve array of theme folder names
      String[] themeFolders =
        Directory.GetDirectories(path);
      // Process each element in this array
      foreach (String folder in themeFolders)
      {
        // Retrieve information about this folder name
        DirectoryInfo info = new DirectoryInfo(folder);
        // Add this folder name to the drop-down list
        drpThemes.Items.Add(info.Name);
      }
      // Once all the themes are added to the list, you
      // must make the content page's current theme the
      // selected item in the list
      // First search the list items for the page's
      // theme name
      ListItem item =
        drpThemes.Items.FindByText(Page.Theme);
      // Now set the selected index of the list (i.e.,
      // select that list item) to the index of the list
      // item you just found.
      drpThemes.SelectedIndex =
        drpThemes.Items.IndexOf(item);
     }
   }
  }
  ///
  /// Event handler for the theme selector
  ///
  protected void drpTheme_selectedChanged(object s, EventArgs e)
  {
   // Save theme in session
   string theme = drpThemes.SelectedItem.Text;
   Session["themeName"] = theme;
   // Re-request page
   string page = Request.Path;
   Server.Transfer(page);
  }
  ///
  /// Property to get/set the url of the advertisement image
  ///
  public string AdImageUrl
  {
   get { return imgbtnAd.ImageUrl; }
   set { imgbtnAd.ImageUrl = value; }
  }
  ///
  /// Property to get/set the url for the link surrounding the
  /// advertisement image.
  ///
  public string AdNavigateUrl
  {
   get { return imgbtnAd.NavigateUrl; }
   set { imgbtnAd.NavigateUrl = value; }
  }
}



The only remaining files are the skins and CSS for the two themes. For space reasons, I do not include them here (although they can be downloaded from my Web site at https://www.randyconnolly.com/core). They are quite similar to those shown in Listings 6.5 through 6.8. 

[previous] [next]

  
URL:

Customizing and Managing Your Site's Appearance / Part 3 - Page 2

Customizing and Managing Your Site's Appearance - Part 3 [con't]

Master Pages and Themes

Find a programming school near you