Beginner’s Tutorial on Master Pages in ASP.NET

This article is a beginner’s tutorial on understanding Master pages and implementing master pages in ASP.NET.

Background

Coming from an application development background, when I started working on web development, the first thing I noticed was that all ASP.NET pages in our website required designing separately. Unlike Windows application, there is no way we can define common UI layout for ASP.NET pages. But this understanding of mine was short lived as I came to learn about Master pages in ASP.NET. Using master pages, I can actually create the common UI elements for all the web pages and create a consistent look and feel for my whole website. (Dreamweaver also provides a similar feature in the form of Templates).

Consistent UI is the key to good user interface. Before Master pages, the way we created consistent web pages was by using custom controls, CSS and JavaScript. With master pages, ASP.NET relieves the developer from the burden of creating the consistent web pages. Master pages not only provide the mechanism for creating consistent web pages, but also give us a centralized way of changing the UI elements that need to be changed across all the pages of the website.

To visualize the Master page – Content page relationship, let’s look at the following picture:

aspnetimage

Note: This image has been taken from www.asp.net.

We will be looking at how to use master pages in our website to provide consistent UI for our website.

Use of Master Pages

The master pages can be used to accomplish the following:

  • Creating a set of controls that are common across all the web pages and attaching them to all the web pages.
  • A centralized way to change the above created set of controls which will effectively change all the web pages.
  • Dynamically changing the common UI elements on master page from content pages based on user preferences.

Terminology

Let us look at the basic terminology that needs to be understood before jumping into master pages:

  • Masterpage: Gives us a way to create common set of UI elements that are required on multiple pages of our website.
  • ContentPage: The ASP.NET web page that will use master page to have the common UI elements displayed on rendering itself.
  • ContentPlaceHolder: A control that should be added on the MasterPagewhich will reserve the area for the content pages to render their contents.
  • ContentControl: A control which will be added on content pages to tell these pages that the contents inside this control will be rendered where the MasterPage’s ContentPlaceHolderis located.

Creating a MasterPage

To create a master page, we need to:

    1. Go to “Add New Item”.
    2. Select the MasterPage.

addmaster

    1. Let’s say our master page is MasterPageOne.Master.
    2. We will now add a menu bar on this master page on top of the page. This Menu bar will be common to all the pages (since it is in Masterpage).
    3. Once we have menubar added, we can have content pages use the master page.
    4. Let’s add few content pages like default.aspx, about.aspx, Contact.aspx. (We are simply creating some dummy pages with no functionality as we want to see the masterpage working, but these content pages can have any level of complex logic in them).
    5. When we add these content pages, we need to remember to select the option of “Use master Page”.

addnew

and select the master page.

addnew2

Now let’s look at the stuff that is important. When we look at the MasterPage, we will see that masterpagehas a ContentPlaceHolder control. All the code that is common for the content pages is outside the ContentPlaceHolder control (in our case, a simple menubar).

masterpage

Adding the ContentPages

If we look at our content pages, we will find a simple Content control added to each content page. This is the area where we will be adding our controls to be rendered along with the master page. (In our case, just simple strings.)

Once we have all the master pages and content pages ready, we can test run our website.

screenshot

So the common set of controls and behavior has now been added to all the content pages. We can have any number of controls and functionality on the master pages.

Changing the Master Page’s Properties from Content Pages

There are times when we need to change some properties of master pages based on the current content page. These properties could be related to visible aspects of master page like UI elements or they could be of behavior aspects. The best way to do that is to have publicproperties in master pages that the individual content pages can use to customize the look/behavior of master page for that particular master page.

Let us, in our small test website, have a label in master page that will tell the user about the current page. Let’s think of this label as breadcrumbs (just to illustrate there is no way, breadcrumbs should be created like this).

This label will display the stringthat is set by the Contentpage so we need to have a publicproperty in the master page to accomplish that.

Now we can use this property to set the PageName property of master page from content pages.

One important thing to mention here is that if we want to use this property from our content page, then we need to have a @Mastertype declaration in our content pages. This declaration will enable the content pages to use the publicproperties of Master Pages.

and from our contentpages, we can simply set the property of the masterpage.

and now if we run the website, we can see the label on masterpage showing the appropriate page name which is being set by the content page.

screenshot2

Changing the Master Page Dynamically

Now there are scenarios when we want the user to change the layout of the website. Since our website’s layout is defined by the masterpage, to accomplish this we need the ability to change the master pages dynamically from the code.

So to do this, let us add one more master page to the website. This master page will have the menu vertically aligned on the left side unlike the first which has it on top.

masterpage2

Now to let the user change the MasterPage:

  • We need to have the option of changing the master page – let’s have a new page change.aspx, we will place radio button on this page to be able to change master page for this page.
  • We need to save the current selected master page – let’s save it in a session variable.
  • Change the master page on the fly – We need to do it in Page_PreInitof content Page Change.aspx.

Now when the user changes the Master Page from change.aspx, the masterpage for that page will be changed for that page for that session.

screenshot3

Points of Interest

Now let us try to sum up what we have seen so far by doing this small unrealistic example.

  • MasterPage gives a mechanism to create Consistent web pages.
  • We need to have ContentPlaceholder on each MasterPageand a Content control on each Contentpage.
  • Contentpages can change the master page visibility and behavior by using the publicproperty provided by MasterPage.
  • The MasterPagecan be changed on the fly (programmatically) too.

There is also a possibility of having nested master pages if we carefully use MasterPage inside the ContentPlaceHolder of another master page thus exposing a new ContentPlaceHolder of nested MasterPagefor content pages to use.

Download the sample code for the article: masterPageTest