Master Pages in ASP.NET

sanjitsil's Avatar author of Master Pages in ASP.NET
Contributed by
This is an article on Master Pages in ASP.NET in ASP.NET.
Rated 5.00 By 1 users
Master Pages in ASP.NET are files that have .master extensions. ASP.NET master pages allow us to create a consistent layout and look & feel for all the pages or a group of pages in web application. A page which uses a master page is known as the content page. We can then create individual content pages that contain the content what we want to display. A master page can contain one or more content pages.

This article takes a look at what master pages and content pages are and how we can work with them in ASP.NET.

What are Master Pages?



According to the MSDN, "ASP.NET master pages allow you to create a consistent layout for the pages in your application. A single master page defines the look and feel and standard behavior that you want for all of the pages (or a group of pages) in your application. You can then create individual content pages that contain the content you want to display. When users request the content pages, they merge with the master page to produce output that combines the layout of the master page with the content from the content page."

The basic differences between a master page and a normal .aspx page are:
  1. Master pages have .master extensions and have the <%@ Master %> directive in lieu of <%@ Page %> directive
  2. Master pages contain one or more ContentPlaceHolder controls. You cannot have a ContentPlaceHolder control in a normal .aspx page
A Master page is a combination of itself and one or more Content pages. At the time of rendering of the content as a result of a request, here is how the content of the Master page and its Content page(s) are merged to produce a single page:



User Controls Vs Master Pages



Master Pages are used in lieu of User controls when you need to provide a consistent look and feel of the pages in your application. If you use a User control to provide a consistent look and feel, you have to add it across all pages in your application. Moreover when using user controls, we can not visualize what the page looks like when we are creating it. You can only know the look and feel once the page is executed in the web browser. You can use a User control to create the login form of your application – you typically want the login form to appear only once the application is executed.

Creating a Master Page



Here are the steps to create a master page in ASP.NET:
  1. Open Visual Studio
  2. Create a new project in Visual Studio and save it with a name
  3. Right click on the web project in the solution explorer and select “Add -> New Item”
  4. From the Dialog Box that opens up, select “Master page”
The master page Site1.master gets created. Here is how the markup code looks like:
Code: ASP
<!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>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
       
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>
As you can see from the code snippet above, we have a server control called ContentPlaceHolder1 inside which we can place the content of the content pages.

Creating a Content Page



To create a content page, follow these steps:

Right click on the web application in the solution explorer and select Add->New Item



Now, link this content page to the master page you created earlier as shown below:



Click OK.

Here is how the markup code of the generated Content page looks like:

Code: ASP
<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
Now, add two label controls to the two Content controls and add appropriate text in them as shown below:
Code: ASP
<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <asp:Label ID="Label1" runat="server" Text="Content 1"></asp:Label>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:Label ID="Label2" runat="server" Text="Content 2"></asp:Label>
</asp:Content>
When you execute the content page, the output is similar to what is shown in the screen shot below:



Note the MasterPageFile attribute in the content page. This attribute is used to provide a reference to the master page to which the content page refers. Further, there is no <form> or <html> tags in the content page unlike a typical .aspx page.

Sequence of Events in Master and Content Pages



When we are using both master and content pages together, the following is the sequence of the events that are fired for both:
  1. Pre-Initialize event of the Content Page
  2. Initialize event of the Child controls of the Master Page
  3. Initialize event of the Child controls of the Content Page
  4. Initialize event of the Master Page
  5. Initialize event of the Content Page
  6. Pre-load event of the Content Page
  7. Load event of the Content Page
  8. Load event of the Master Page
  9. Load event of the Master Page Child controls
  10. Load event of the Child controls of the Content Page

Configuring a Master Page



You can configure a master page in any of these three ways:
  1. Using the MasterPageFile attribute in page directive of your content page:
    Code: ASP
    <%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" Title="Untitled Page" %>
  2. By setting the master page programmatically in the Pre-Init event of the content page that uses the master page:
    Code: ASP
    protected void Page_PreInit(object sender, EventArgs e)
            {
                Page.MasterPageFile = ="~/Site1.Master";
            }
  3. Setting the master page for all pages in the application using the application’s web.config file:

    Code:
    <configuration>
  <system.Web>
    <pages master="Site1.Master" />
  </system.Web>
</configuration>

Accessing a Master Page from within a Content Page



To access a master page from within a content page, we can use the FindControl method as shown below:
Code: ASP
Label lblTextLabel=  Master.FindControl("lblTextLabel") as Label;
          lblTextLabel.Text = "This is a test label";

Nested Master Pages



A nested master page is one that references another master page as its master. A nested master page is ideal in situations where we want to keep the main layout in main master page and will inherit the same in another master page. Note that both the parent and child master pages will have the .master extensions. The MSDN states, "Master pages can be nested, with one master page referencing another as its master. Nested master pages allow you to create componentized master pages. For example, a large site might contain an overall master page that defines the look of the site. Different site content partners can then define their own child master pages that reference the site master and that in turn define the look for that partner's content."

Here is an example:

This is markup code of the Parent Master Page:
Code: ASP
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Parent.master.cs" Inherits="WebApplication1.Parent" %>
 
<!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>Parent Master Page</title>
 </head>
<body>
<form id="form2" runat="server">
    <div>
        <asp:contentplaceholder id="MasterContentPlaceHolder" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>
This is the markup code of the Child Master Page:
Code: ASP
<%@ Master Language="C#" AutoEventWireup="true"  MasterPageFile="~/Parent.Master" %>
<asp:Content ID="ChildMasterContent" runat="server" ContentPlaceHolderID="MasterContentPlaceHolder">
<asp:ContentPlaceHolder ID="ChildContentPlaceHolder" runat="server">
</asp:ContentPlaceHolder>
</asp:Content>
And, this is the markup code of the Content Page:
Code: ASP
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ContentPage.aspx.cs" Inherits="WebApplication1.ContentPage"
MasterPageFile="~/Child.Master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ChildContentPlaceHolder" Runat="Server">
</asp:Content>

Conclusion



Master pages can be used to provide a consistent look and feel to one or more pages in your application. Master pages can be nested also. In this article we have had a look at what Master pages are and how we can use them in our applications.
Go4Expert Founder
3Jun2009,09:26   #2
shabbir's Avatar
Nomination this Article for Article of the month - May 2009
Banned
19Jun2009,16:09   #3
gkumar's Avatar
In this section, you create a parent master page. This page contains a banner and navigation controls that can be used throughout the site. Later, you will create another master page that will be used inside this parent master page. Child master pages can provide various layouts for pages while retaining the look that is established by the parent master page.
To create the master page

1.In Solution Explorer, right-click the name of the Web site, and then click Add New Item.
The Add New Item dialog box is displayed.
2. Under Visual Studio installed templates, click Master Page.
3. In the Name box, type ParentMaster.
4. Clear the Place code in separate file check box.
5. In the Language list, click the programming language that you prefer to work with.
6. Click Add.

The new master page is opened in Source view.
And this example also we can creating a Master Pages in ASP.NET
Quote:
<%@ Master Language="VB" CodeFile="otc.master.vb" Inherits="otc" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

<link href="~/StyleSheet.css" rel="Stylesheet" type="text/css" />

</head>



<body>

<form id="form1" runat="server">

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">

<Items>

<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" Value="Home"/>

<asp:MenuItem NavigateUrl="~/Experiments.aspx"

Text="Experiments" Value="Experiments"/>

</Items>

</asp:Menu>



<div>

<div id="main">

<asp:ContentPlaceHolder ID="mainContent" runat="server" />

</div>

<div id="right">

<asp:ContentPlaceHolder ID="sideContent" runat="server" />

</div>

<div id="footer">

<asp:Literal ID="Footer" runat="server" Text="OdeToCode.com" />

</div>

</div>



</form>

</body>

</html>