Click here to monitor SSC
  • Av rating:
  • Total votes: 172
  • Total comments: 19
Steve Joubert

Beginning ASP.NET 2.0

27 March 2006

Getting Started with Master Pages and Themes

It seems that there is both excitement and confusion surrounding Master Pages and Themes. A big part of the problem is that they always seem to be mentioned in the same breath – like I just did. The reality is that they are two separate but equally important technologies. Each has its own function in ASP.NET but when you use these two technologies together, you get a site design that is amazingly versatile, easy-to-use, and easy-to-adapt. ASP.NET 2.0 provides a whole host of improvements to your web development experience but, in my opinion, these two technologies represent the single biggest reason to migrate your sites to this new platform. Let's take a look at each of these technologies in turn.

Master Pages

Master Pages gives us visual inheritance for web pages. Take a good look at your web site or web application and pick out those elements that are common to every page in the site. The logo, menu or navigation bar, some links and the footer are probably common to every page. What changes on a page-by-page basis is all that stuff below the menu and just above the footer. Master Pages are the latest and best solution to the question, "How do I share common elements on each page without having to copy and paste the HTML everywhere?" In classic ASP we had include files, which were then superseded by user controls in ASP.NET 1.0/1.1. Includes and user controls are different concepts but both do the same basic job: providing a set of external files that, when included on a page and placed in the correct position, give you a means of attaining a consistent layout for the pages in your website.

That last statement neatly sums up the two main problems with include files and user controls. Firstly, you have to remember to include them and, secondly, you have to put them in the correct spot on each and every page. If you build a site with a couple hundred pages you are almost guaranteed to forget to include a file or misplace it on several pages.

In ASP.NET 2.0, Master Pages supplant user controls and give us true reuse – they allow us to define in a single file, the layout and common features of a whole set of pages, providing a much easier and more maintainable route to consistent look-and-feel.

Creating a basic Master Page

When you migrate your site to ASP.NET 2.0, your first job will be to build one or more Master Pages; one for each distinct layout within your site. To create your first Master Page in Visual Studio 2005, navigate WebSite -Add New Item - Master Page. Give the page a name and it will be added to the project as <yourname>.master.

Notice also the "Place Code in separate file" checkbox: Master Pages support server-side code either in the Page itself or (if that box is checked) in a code-behind partial class.

Partial Classes are another new feature of .NET 2.0. They allow you to create a class definition that spans multiple physical files to make one logical class. ASP.NET employs partial classes for the code-behind files so that ASP.NET can hide the page implementation code that used to appear in the code-behind, with 'Do Not Touch' stamped all over it.

Now all you have to do is define your site's layout in the Master Page. Set up your logo, navigation bar and footer just as you did before using HTML and ASP.NET controls. If you are converting a site, open up those include files or user controls and move your common HTML and control into the Master Page.

Next, you must define the areas in your page layout, the content of which is going to change from on a page by page basis. You do this using a new ASP.NET 2.0 control called the ContentPlaceholder. Each of these controls, when placed on the Master Page, acts as a placeholder for content that may be supplied by each of the "child" content pages that inherits its layout from this page.

Each ContentPlaceholder must have a unique ID. The following Master Page screenshot shows two ContentPlaceholder tags, with IDs of PageName and Main:

Creating a Content Page

To create a Content Page that uses your Master Page, open up Visual Studio 2005 and pull up the Add New Item dialog. This time, though, add a new Web Form to the project. A dialog will then prompt you to select the Master Page that is associated with this new Content Page. When you open the new Content Page all you will see, in place of the classic HTML layout with <html>, <head> and <body> tags, is the Page directive (<% @Page…/>), which points to the appropriate Master Page, and one Content control for each ContentPlaceHolder defined in the selected Master Page. It looks something like this:

Each Content control indicates its associated placeholder via the ContentPlaceHolderID property. Any HTML placed between the opening and closing Content control tags will be placed exactly where the placeholder appears in the Master Page. Please note that all content in child pages must be placed inside a Content control. If you attempt to place content outside a Content> control, you will get an error when you attempt to run the page as the Master Page simply won't know what to do with that content.

Accessing Code in Master Pages

Just as a standard Web Form object is inherited from System.Web.UI.Page so Master Page objects are inherited from System.Web.UI.MasterPage. You can create your own sub-class that from System.Web.UI.MasterPage and then use that class as a parent for your Master Pages. Simply create a new class and have it inherit from System.Web.UI.MasterPage. Add the functionality you need on each Master Page, then open up the code-behind file of each Master Page and change the class it inherits from to your new class. This is useful if your site has mulitple Master Pages that need to have common functionality.

Public properties and classes that are defined in the Master Page (or its code-behind file) can also be accessed by any child Content Page that defines that Master Page in its Page directive. In the following screen, I've delcared a property called MyProperty:

You can now access that property or function from the Content page:

Themes

Take a look at Windows Media Player. Change the skin and the entire look and feel of the application changes instantly. The fonts, the graphics and the colors all change. You may not even recognize two different skins as having the same underlying application. Themes bring that power to web. Simply by declaratively setting the Theme property in the Page directive, or imperatively it in code, you can transform your site's entire look and feel.

Themes consist of a skin file and optionally a cascading style sheet. The skin file allows you to define how each type of control (textbox, button, gridview etc.) will be rendered. You can use multiple definitions for each type of control. You can either add your style definition for each control right into the skin file, or you can place those definitions in a cascading style sheet associated with the theme.

Here's a real world look at Themes. The Aesculapius Research Group has a product that allows Othropaedic medical residents at various schools to log their surgical case load on line. The application transfers their case to the ACGME oversite organization and both the resident and the teaching institutions have full access to their cases. One of the features that we were required to build into this application the ability for each instituion to view the application in their colors and logos. This was the perfect application of Themes.

When the resident first comes to the site it is themed in blue and gray – a generic theme that we created. After they log in we swap out the theme to one specific to that institution. For example, when Tulane residents log in, they see a green and blue site with the schools coat of arms in the corner:

Vanderbilt University residents see a Blue and white site with their own shield in the corner, and so on.

Both images used by persmission of the Aesculapius Reasearch Group

Creating a Basic Theme

Start by adding an App_Themes folder to the root of your web project ("Add ASP.NET Folder – Theme"). The App_Themes folder is created and a subfolder called Theme1 is created under it. Rename the Theme1 folder to BlueTheme. Each folder under App_Themes defines a skin. The name of the folder is also the name of the skin. Everything that defines that Theme (.skin, .css, images) is placed in that folder. Additional Theme folders can be added by right- clicking on the App_Themes Folder and again selecting "Add ASP.NET Folder – Theme".

Now right-click on the BlueTheme folder and choose "Add New Item…". Choose "Skin File" and name it BlueTheme.Skin. In the same way, add a stylesheet called BlueTheme.css. If each of your themes is going have a unique set of images assoicated with it you should also create an Images folder under the BlueTheme folder.

On your Content Pages in the header on .aspx page, set the Theme paramater of the Page directive to BlueTheme:

Now, when the page is rendered the theme will be used to set properties on the ASP.NET controls. If you want to set the theme for the entire site you can specify it in the web.config file:

<pages theme="BlueTheme" />

Now, open the BlueTheme.css file and add two style classes:

.BlueLabel
Color: blue;
}
.RedLabel {
Color: red;
}

Open the MyTheme.skin file and add the following code:

<asp:Label runat="server" CssClass="RedLabel"></asp>
<asp:Label runat="server" CssClass="BlueLabel" SkinID="BlueText"></asp>

Note that I have not set a specific SkinID value for RedLabel so the RedLabel style (in the skin file) will be applied to every label on each page that uses this theme that does not have a SkinID set. The second label has a SkinID of BlueText. All labels that have a SkinID of BlueText will use the BlueLabel style settings instead of the default.

Further Examples

That concludes our basic demonstration of themes. However, themes are versatile and I encourage you to experiment with them. You can write skins to control the appearance of any ASP.NET control. For example, you can control the number of columns displayed in a textbox control or control the image that is displayed on a page, based on a theme

In the code download (use link at top of page) included with this article, I've included an example whereby the theme controls the ImageUrl of an image control. This allows you to have specific images with each theme. Change the Theme setting and watch how the ThemeExample.aspx page changes.

Changing Master Pages and Themes

Now that you've applied a Master Page to your web pages and have hard coded a theme, you are probably wondering if you can change them at runtime. Yes, you can. ASP.NET brings us the PreInit event for just this purpose.

protected void Page_PreInit(object sender, EventArgs e)
  {
    if (Foo)
    {
      Page.MasterPageFile = "MyMaster.Master";
      Page.Theme = "BlueTheme";
    }
    else
    {
      Page.MasterPageFile = "MySite.Master";
      Page.Theme = "RedTheme";
    }
  }

Themes can also be swapped in the PreInit event. In this manner, you could tie the Master Page and the Theme to a user's login. Your site could have a totally different feel for each client, as demonstrated above for the Aesculapius Research Group example.

Summary

Many people I've talked don't seem to understand that Master Pages and Themes are two separate technologies.The reason for the confusion between Master Pages and Themes is that these two technologies play so nicely together. When combined, Master Pages and Themes allow us to display a completely different looking site with a completely different layout to each user. Together, these technologies amply fulfill their goal of giving us centralized control over all the common aspsects of our web sites.

Steve Joubert

Author profile:

Steve Joubert is a Microsoft Certified Professional in developing web applications in C#. He has spent nine years developing Microsoft technologies, including building .NET applications, and has a background in such diverse markets as pharmaceuticals, biotech, banking, finance and entertainment. He currently works for ASPSOFT in Orlando, Fla.

Search for other articles by Steve Joubert

Rate this article:   Avg rating: from a total of 172 votes.


Poor

OK

Good

Great

Must read
Have Your Say
Do you have an opinion on this article? Then add your comment below:
You must be logged in to post to this forum

Click here to log in.


Subject: bug in sample code
Posted by: Anonymous (not signed in)
Posted on: Tuesday, July 18, 2006 at 3:41 PM
Message: FYI, this causes an error due to the closing tags:

<asp:Label runat="server" CssClass="RedLabel"></asp>
<asp:Label runat="server" CssClass="BlueLabel" SkinID="BlueText"></asp>

should be:
<asp:Label runat="server" CssClass="RedLabel" />
<asp:Label runat="server" CssClass="BlueLabel" SkinID="BlueText" />

or the full </asp:Label>

I'm also unable to figure out what object "MySite" is referring to in the master page property use screencap.

Thanks for the tutorial!

- Jack

Subject: help
Posted by: Anonymous (not signed in)
Posted on: Friday, August 11, 2006 at 9:09 PM
Message: i don't know the code to give an error_message dialog box in vs 2005.i know the code in vs 2003 is :response.write("error"); i try this code in vs2005 ,but it can't solve the question.

Subject: msn
Posted by: Anonymous (not signed in)
Posted on: Friday, August 11, 2006 at 9:18 PM
Message: i just begin to learn asp.net 2.0 ,so i need your help.please give me your msn if it is convenient. thank you.

Subject: about build files
Posted by: Anonymous (not signed in)
Posted on: Monday, October 16, 2006 at 4:40 AM
Message: wat are the main changes in build files..i want to change 1.1 to 2.0

Subject: help
Posted by: Anonymous (not signed in)
Posted on: Friday, October 27, 2006 at 6:34 AM
Message: Sudhir Bharti
Message: i just begin to learn asp.net 2.0 ,so i need your help.please give me your msn if it is convenient. thank you.

my msn id is --> sudhir.bharti@hotmail.com

Subject: ASP.NET
Posted by: Anonymous (not signed in)
Posted on: Tuesday, November 07, 2006 at 2:57 AM
Message: THIS IS A EASY TO LEARN AND ALSO VERY EFFICIENT.NOW A DAYS ALL ARE USING THIS SOFTWARE

Subject: Master pages & thems
Posted by: Anonymous (not signed in)
Posted on: Monday, February 12, 2007 at 1:48 AM
Message: I want to apply Themes and skins in master pages but unable to do it..so plz help me...

Subject: How do i design page with Tabmenu, Treeview and Gridview?
Posted by: Anonymous (not signed in)
Posted on: Wednesday, February 21, 2007 at 2:09 PM
Message: Hi, This is ami. I am .net developer.

Do you have any design ideas for following ?

1.ON TOP OF PAGE SHOULD BE TAB MENU. FOR EX. HOME,PROCESS, HR.

2.WHEN WE CLICK ON PROCESS MENU, ON LEFT SIDE TREEVIEW DISPLAT WITH PARENT-CHILD PROCESS

3.WHEN CLICK ON PROCESS NODE, ON CENTER OF PAGE DISPLAY GRIDVIEW.

I KNOW TABMENU,TREEVIEW,USER CONTROL AND GRIDVIEW, BUT I CAN'T INTEGRATE IT.

I AM NOT GETTING COMPLETE EXAMPLE OF HOW TO MAKE ALL THIS WORK ON ONE PAGE.

PLEASE HELP...........
AMI(ami_sur@yahoo.com)

Subject: LoL * LoL * LoL
Posted by: Anonymous (not signed in)
Posted on: Thursday, April 12, 2007 at 8:58 AM
Message: People; haven't you heard of forums? Try forums.asp.net. Oh and ami_sur ? If you'd like somebody else to do your homework, you should at least learn some "web manners". Using caps is rude, like shouting, so unless you have a good reason try to avoid it. Cheers :)

Subject: Help req on User controls
Posted by: Anonymous (not signed in)
Posted on: Friday, April 13, 2007 at 2:12 AM
Message: simple talk: Is there any alternative to load the user control dynamically other than finding control and loading them.

Cheers:---)0

Subject: Plz Help in changing Themes using Ajax without pageLoad
Posted by: Anonymous (not signed in)
Posted on: Thursday, April 26, 2007 at 5:00 AM
Message: I want to change themes on clicking 'imgButton'
without pageLoad using ajaxToolKit control.Plz help me for this matter.
Thanks!

Subject: How to Add DateTime Picker control in toolbox
Posted by: Anonymous (not signed in)
Posted on: Monday, May 21, 2007 at 6:09 AM
Message: hi i need DateTime Picker control for applying my project. so help me How to Add DateTime Picker control in toolbox.
i hope you that you will help me

thaks advance
jeyaprakash

Subject: DateTimePicker on ASP
Posted by: Anonymous (not signed in)
Posted on: Wednesday, May 30, 2007 at 8:53 AM
Message: Hi all,
I need to put a DateTimePicker on my web form, but there is not such a thing of the Web. Is there a way to put a DateTimePicker.

Thanks

Subject: i want to learn how to run master page
Posted by: Anonymous (not signed in)
Posted on: Wednesday, July 04, 2007 at 11:53 PM
Message: Respected sir,
my self rohit,i am workin on asp.net2.0,however i just created the master page andcontent page but now in puzzle how can i srart the master page,and what about defaule .aspx page

Subject: how to change themes dynamically
Posted by: Anonymous (not signed in)
Posted on: Friday, July 27, 2007 at 1:41 PM
Message: I trying to solve this problem.
I have a admin page where only the administrator can login. In this page there is a drop down list. This ddl should give the administrator the possibility to change the active theme for the hole site. Ones a value from the ddl has been selected the new theme should be in charge for each and everyone that visits the site. and this should continue until the administrator changes the active theme using the ddl.

It seem an easy task however i just can figure it out.


Subject: Message from Younus very Urgent
Posted by: Younus (not signed in)
Posted on: Sunday, August 12, 2007 at 7:00 AM
Message: sir, i want to add datetimePicker in my project, how to i???

plz help me

Subject: About InHeritance
Posted by: Anonymous (not signed in)
Posted on: Tuesday, August 14, 2007 at 3:04 AM
Message: Really Good Idea

Subject: Anonymous comments disabled
Posted by: AnnaL (view profile)
Posted on: Monday, September 03, 2007 at 5:18 AM
Message: We've had to disable anonymous comments on this article due to relentless spamming.

To post a comment please sign in, or register if you are not already a member.

Subject: Add datetimepicker control
Posted by: rupali (view profile)
Posted on: Thursday, March 18, 2010 at 4:38 AM
Message: Add DateTimPicker control in toolbox.
Please reply argently

 

Top Rated

Acceptance Testing with FitNesse: Multiplicities and Comparisons
 FitNesse is one of the most popular tools for unit testing since it is designed with a Wiki-style... Read more...

Acceptance Testing with FitNesse: Symbols, Variables and Code-behind Styles
 Although FitNesse can be used as a generic automated testing tool for both applications and databases,... Read more...

Building Performance Metrics into ASP.NET MVC Applications
 When you're instrumenting an ASP.NET MVC or Web API application to monitor its performance while it is... Read more...

Acceptance Testing with FitNesse: Documentation and Infrastructure
 FitNesse is a popular general-purpose wiki-based framework for writing acceptance tests for software... Read more...

TortoiseSVN and Subversion Cookbook Part 11: Subversion and Oracle
 It is only recently that the tools have existed to make source-control easy for database developers.... Read more...

Most Viewed

A Complete URL Rewriting Solution for ASP.NET 2.0
 Ever wondered whether it's possible to create neater URLS, free of bulky Query String parameters?... Read more...

Visual Studio Setup - projects and custom actions
 This article describes the kinds of custom actions that can be used in your Visual Studio setup project. Read more...

.NET Application Architecture: the Data Access Layer
 Find out how to design a robust data access layer for your .NET applications. Read more...

Calling Cross Domain Web Services in AJAX
 The latest craze for mashups involves making cross-domain calls to Web Services from APIs made publicly... Read more...

Web Parts in ASP.NET 2.0
 Most Web Parts implementations allow users to create a single portal page where they can personalize... Read more...

Why Join

Over 400,000 Microsoft professionals subscribe to the Simple-Talk technical journal. Join today, it's fast, simple, free and secure.