Introduction
Master Pages is great new enhancements in ASP.NET 2.0 and if you haven't heard or use Master Pages, then you might reconsider of using this across all your existing websites. It will save you lots of times in maintaining and editing your websites source code. In old classic ASP, we do not have this features yet, and lots of people actually create their own Master Pages by using template page that is inherited or include on all their page.
They normally will copy and paste this tag on all their pages.
<!-- #include virtual ="/includes/header.asp -->
The problem with this was that you had to take into account the newly opened HTML tags in the header include file. These tags had to be closed in the main document or in the footer include file. It was usually very difficult to keep all the HTML tags in order especially if multiple people worked on a same web projects. Web pages sometimes display strange results because of inappropriate or non existent tag closings or openings.
With the introduction of ASP.NET 1.0, developers started using user controls to encapsulate common sections of their Web Pages. For instance, you could build a Web page that include header,navigation and footer sections by simply dragging and dropping these sections onto each page that required them.
This technique worked, but it also raised some issue as the include files in Old Classic ASP file. This is because User Control actually will be rendered the same as include files in Classic ASP.
In ASP.NET 2.0, Master pages has been introduced and this has make all the developers life easy. You can design and see the master pages visually in your Visual Studio 2005.
Why Do You need Master Pages
Most Websites today have common elements used throughout the entire application or on majority of the pages within the applications.
For instance if you look on WorldOfASP.NET website (http://www.worldofasp.net), you can see that the header and footer is being repeated across all the pages in entire website.
Nah, those repeated elements can be stored in the Master Pages. This will save you lots of times to copy and paste the code on all the pages. And imagine if you want to edit the header on footer, then you only need to edit on one single place rather than have to find and replace across all your files.
How to Use Master Pages
Master Pages are an easy way to provide a template that can be used by any number of ASP.NET pages in your application. In working with Master Pages, you create a master file that is the template referenced by a subpage or content page. Master Pages use .master file extension whereas content pages use .aspx file extension.
To create Master Page, it will be very easy and simple in Visual Studio 2005.
Right Click on your Project and Choose Add New Items --> Choose MasterPage as VS Template
Give the MasterPage a name e.g MasterPage.master.
After you added the Master Page, you will see the directive on top of the page just like below.
<%@ MASTER LANGUAGE="C#" AUTOEVENTWIREUP="true" CODEFILE="MasterPage.master.cs" INHERITS="MasterPage" %>
As you can see that the masterpage contain Master directive while normal Page file will have Page directives. The MasterPage behaves just like normal Aspx page, where you can add code behind, Page_Load Event and etc.
In the Master Page, there is also a piece of code like this
<ASP:CONTENTPLACEHOLDER ID="ContentPlaceHolder1" RUNAT="server">
</ASP:CONTENTPLACEHOLDER>
The attribute ContentPlaceHolderID is very important as it decides what content will be bound to which ContentPlaceHolder on the master page, this is a very nice way to decide the location of where the contents will be displayed; so this way you can have multiple content on one content page and also multiple ContentPlaceHolders on the master page.
You can actually put some content on the ContentPlaceHolder like this
<ASP:CONTENTPLACEHOLDER ID="ContentPlaceHolder1" RUNAT="server">
<h1>Default content that will render if not overridden on the content page!
</h1>
</ASP:CONTENTPLACEHOLDER>
This content will render in any content page that doesn’t reference this ContentPlaceHolder’s ID, so in effect you can have default content on all your content pages which is overridden if you have content.
Now, Lets Start Create Content Pages that use your master page as a template.
To create ContentPages that reference the master page, you need to Add New Item --> Web Form
and check the Select Master Page option. You will then be given choice to add Master Page. Choose MasterPage1.Master as the MasterPage.
Your Page file should contain the code like this
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Default2.aspx.cs" Inherits="Default2" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
If you have ContentPlaceHolder that matching the ContentPlaceHolder's ID in master pages, then the MasterPage ContentPlaceHolder content will be ignored. You could actually put some content on your master pages ContentPlaceHolder and then on your ContentPages you can decide whether you like to override it or not. You can see the sample code and explanation below.
You can have as many ContentPlaceHolder in your Master Pages, and if you don't have the same ContentPlaceHolder ID in your pages, then ASP.NET 2.0 will automatically render the content in MasterPages.
Starting to use Master Pages
Now, Let's start implementing MasterPages in your web applications. We are going to have 1 Master Pages, and two default Pages in the project. Lets named it MasterPage.master, Default1.aspx and Default2.aspx. Default1.aspx will have its own LeftSideNews and its Own Main Contents,while Default2.aspx will use MasterPages Leftsidenews but it will have its own Main Contents
Below is the sample code for MasterPages.
<FORM ID="form1" RUNAT="server">
<H1>This is Header</H1>
<TABLE WIDTH=100%>
<TR>
<TD VALIGN=top>
<ASP:CONTENTPLACEHOLDER ID="ContentPlaceHolder2" RUNAT="server">
<U>Left Side News</U> <BR />This is just simple news in Master Pages
</ASP:CONTENTPLACEHOLDER>
</TD>
<TD>
<ASP:CONTENTPLACEHOLDER ID="ContentPlaceHolder1" RUNAT="server">
<U>Main Content Master Pages</U>
<BR />This is just simple Content in Master Pages
</ASP:CONTENTPLACEHOLDER>
</TD>
</TR>
</TABLE>
<H1>This is Footer</H1>
</FORM>
From the image above, you can actually see that, MasterPage have its own LeftSideNews in(ContentPlaceHolder2) and MainContent(in ContentPlaceHolder1). Any ContentPages that use the MasterPages can inherit or override the ContentPlaceHolder. Lets look on the sample code below
CodeSample For Default1.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
This is My Content Pages, I dont want to use MasterPagesContentPages
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
This is My Own News. I dont want to use MasterPages News
</asp:Content>
CodeSample For Default2.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
This is My Content Pages, I dont want to use MasterPagesContentPages
</asp:Content>
As you can see from the code above, the default1.aspx override both ContentPlaceHolder1 and ContentPlaceHolder2, while Default2.aspx only override the ContentPlaceHolder1.
When you try to view the Default1.aspx, you can see that it use its own contents for both ContentPlaceHolder. While in Default2.aspx only override the ContentPlaceHolder2.
Conclusion
In this article we took a sneak peak at MasterPages in ASP.NET 2.0. What is exciting about MasterPages in ASP.NET 2.0, is that Visual Studio 2005 introduces rich, design-time support for MasterPages, which makes web designer and developer life easy.
With MasterPages you can achieve true separation between the markup to lay out your pages and the actual content-specific markup. This makes it easy to apply a consistent look and feel to all pages in a site and makes it a breeze to update the site-wide style.