Click here to Skip to main content
11,648,785 members (86,576 online)
Click here to Skip to main content

Creating a Better Master Page

, 13 Nov 2007 CPOL 47.3K 635 47
Rate this:
Please Sign up or sign in to vote.
Merging “MasterPage” with “BasePage”

Introduction

In this article, I am going to explain how to merge BasePage classes with MasterPage so that you can control UIs and page functionalities.

MasterPage

MasterPage is a new technique in ASP.NET 2.0 that is very helpful in maintaining full web application design in generic places. Using this, we can change the complete look and feel of the application within a short duration. Normally, we keep our layout designs in MasterPage and all other pages will extend the UI from it.

Click here to see more about MasterPages.

Is it Inheritance?

Even though we are extending the UI from MasterPage, it's not an inheritance concept. MasterPage is just providing the content place-holder to enable the extended page to provide the page-specific UI.

Creating a Simple Example

Step 1

Create a MasterPage with some header content, footer content and place holder content, as below.

MasterPage.Master
<%@ Master Language="C#" AutoEventWireup="true" 
    CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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">
    <title>Untitled Page</title>

Step 2

Create a WebPage and refer the MasterPage using the page directive, as below.

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" 
    MasterPageFile="~/MasterPage.master"  
    CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content runat="server" ContentPlaceHolderID="ContentPlaceHolder1" 
    ID="PageContent">
<b>Content</b>

Step 3

Run the sample. You can see the following output with header, footer and page-specific content. This is how we are placing generic UI content (header, footer) into a generic place.

Output: Default.aspx (Rendered using "MasterPage")
Screenshot - MasterPageOutPut.jpg

Disadvantages of MasterPage

MasterPage is just for the UI extension. You cannot achieve actual inheritance advantages using that. For example, using inheritance you can have generic methods and properties in the base class that can be used by all the derived web forms, i.e. you can have logging, exception handling, session handling in base class and these can be used by all the web forms.

BasePage

What is BasePage?

BasePage is just a concept that was followed by many developers before ASP.NET 2.0. It has also been called by different names like "PageBase," "WebPageBase" and many more. The concept of BasePage is really simple: to create a class that is inherited from System.Web.UI.Page and use this class as a base class for all the web forms. Unfortunately, you will not get all the UI from the base class to a derived class in web form. This is because, in ASP.NET, the UI is built using the Context approach. The inheritance will not help to render the base class UI, even though you can get the BasePage UI by adding some code in RenderChild or in the Render method of the base class.

Creating a Simple Example

Step 1

Create two user controls (*.ascx) for the header and footer, as below.

HeaderControl.ascx
<%@ Control Language="C#" AutoEventWireup="true" 
    CodeFile="HeaderControl.ascx.cs" Inherits="HeaderControl" %>
<h3>Header Content</h3>
FooterControl.ascx
<%@ Control Language="C#" AutoEventWireup="true" 
    CodeFile="FooterControl.ascx.cs" Inherits="FooterControl" %>
<hr /><h3>Footer Content</h3>

Step 2

Just create a class and inherit it from System.Web.UI.Page. Then add some generic methods like Logging, Session, etc. Override the Render method and add the code like below.

BasePage.cs
using System;
using System.Data;
using System.Configuration;
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;
using System.Collections.Generic;
//Properties: Logger,CurrentSession is just created for the example purpose

/// <span class="code-SummaryComment"><summary>
</span>
Logger Class
/// <span class="code-SummaryComment"><summary>
</span>
Session Handling Class
public class SessionData
{
    public int UserId
    {
        get 
        { 
            return int.Parse(
                HttpContext.Current.Session["UserId"].ToString());
        }
        set { HttpContext.Current.Session["UserId"] = value; }
    }

    public List<int> ItemIds
    {
        get { return (List<int>)HttpContext.Current.Session["Items"]; }
        set { HttpContext.Current.Session["Items"] = value; }
    }
    
}

Note: the above session handling and logger classes are just added for explanatory purposes. You can also add any generic elements with respect to your project.

Step 3

Create a web form and change the base class name from System.Web.UI.Page to BasePage.

Default2.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 Default2 : BasePage
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Result

Now we are able to render the UI from the base class, as with MasterPage. We are also using methods and properties provided by the base class. So really, we can control our UI and the functionalities of the application from a single place.

Output: Default2.aspx (Rendered using "BasePage")
Screenshot - BasePageOutput.jpg

Disadvantages of BasePage

This is not really a proven technique, but still, I've already implemented it in many client places and it's really working well, even for huge requests. Also, we are adding the controls only inside the <form> tag, so updating <head> tag elements like style sheet references and page titles is a bit difficult.

Merging BasePage and MasterPage

It's easy to merge these two techniques, BasePage and MasterPage. Just add the following code to the BasePage constructor and remove the code that we added in the Render method, so now the BasePage will look like below.

Changing BasePage.cs
using System;
using System.Data;
using System.Configuration;
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;
using System.Collections.Generic;
//Properties: Logger,CurrentSession is just created for the example purpose

/// <span class="code-SummaryComment"><sumary>
</span>

Try to access the generic methods that are provided by BasePage from the derived web page.

Intellisense of the Default2.aspx.cs File, which is Inherited from BasePage
Screenshot - VS2005IntelScreen.jpg

In a single place -- I would like to call it MasterBasePage-- we can control the following things of the web application:

  • UI layout [from MasterPage]
  • Session handling [from BasePage]
  • Project-specific properties [from BasePage]
  • Logging [from BasePage]
  • And so on…

Issues in Visual Studio 2005

Here we are not using MasterPage page directive attributes in derived pages, so Visual Studio 2005 is giving some error in the designer to use the content place holder. Right now, I'm looking into this issue.

History

  • 14 November, 2007 -- Original version posted

License

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

Share

About the Author

Manikandan.net
Web Developer
India India
"Manikandan Balakrishnan" Working as an IT consultant with LogicaCMG’s Global Service Delivery part-India, he has a good experience on Web/Win development (C#, Asp.net) and enterprise application integration (BizTalk) technologies. Prior to this he worked on world’s biggest e-learning product with Excel Soft Technologies, Mysore.

City: Coimbatore, TN
CreativeManix@gmail.com

You may also be interested in...

Comments and Discussions

 
GeneralVery useful for some scenarios. Thanks. Pin
chenpengli10-Mar-09 10:00
memberchenpengli10-Mar-09 10:00 
I can see this could be potentially useful for many scenarios, such as using Masterpage with Themes. Very clearly explained. Thanks.
GeneralNeed to Access BasePage Property in Master Page Pin
venu babu18-Jul-08 9:13
membervenu babu18-Jul-08 9:13 
GeneralRe: Need to Access BasePage Property in Master Page Pin
Manikandan.net20-Jul-08 18:41
memberManikandan.net20-Jul-08 18:41 
Newssee also: @ MasterType Pin
grundt14-Nov-07 7:13
membergrundt14-Nov-07 7:13 
GeneralRe: see also: @ MasterType Pin
merlin98114-Nov-07 8:47
membermerlin98114-Nov-07 8:47 
GeneralRe: see also: @ MasterType Pin
Manikandan.net14-Nov-07 20:45
memberManikandan.net14-Nov-07 20:45 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150804.4 | Last Updated 13 Nov 2007
Article Copyright 2007 by Manikandan.net
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid