Click here to Skip to main content
15,881,882 members
Articles / Web Development / CSS

Changing A Master Page Body Tag’s CSS Class for Different Content Pages

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
20 Jul 2010CPOL 26.4K   3  
How to change a Master Page Body Tag’s CSS class for different Content Pages

It seems a bit of a failing of Master Pages that there’s no clear way to assign different CSS classes to the ‘body’ tag based on the Content Page. To get around this, I've taken to inheriting all of my content pages from a known base class (which in turn inherits from System.Web.Page) and then giving it a publicly accessible property of ‘BodyCssClass’!

C#
namespace MartinOnDotNet.MasterPageBodyClass
{
    public class BasePage : System.Web.UI.Page
    {
        public string BodyCssClass { get; set; }
    }
}

This can then be picked up from the MasterPage and used to modify the body tag:

C#
using System;

namespace MartinOnDotNet.MasterPageBodyClass
{
    public partial class Global : System.Web.UI.MasterPage
    {
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            BasePage current = Page as BasePage;
            if (current != null && !string.IsNullOrEmpty(current.BodyCssClass))
            {
                Body.Attributes["class"] = current.BodyCssClass;
            }
        }
    }
}
ASP.NET
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Global.master.cs"
   Inherits="MartinOnDotNet.MasterPageBodyClass.Global" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body runat="server" id="Body">
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

The class itself can be assigned in the <%@ Page %> declaration of the Content Pages that implement the MasterPage:

ASP.NET
<%@ Page Language="C#"
    MasterPageFile="~/Global.Master"
    AutoEventWireup="true"
    Title="Content Page"
    Inherits="MartinOnDotNet.MasterPageBodyClass.BasePage"
    BodyCssClass="content" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Freestyle Interactive Ltd
United Kingdom United Kingdom
I'm a lead developer for Freestyle Interactive Ltd where we create many wonderful websites built on Microsofts ASP.Net and Ektron CMS.

I've been developing .Net applications (both Windows and Web) since 2002.

Comments and Discussions

 
-- There are no messages in this forum --