Go4Expert - Master Pages in ASP.NET

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:

Master pages have .master extensions and have the <%@ Master %> directive in lieu of <%@ Page %> directive
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:

http://www.go4expert.com/images/arti...t/image001.gif

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:

Open Visual Studio
Create a new project in Visual Studio and save it with a name
http://www.go4expert.com/images/arti...t/image002.png
Right click on the web project in the solution explorer and select “Add -> New Item”
http://www.go4expert.com/images/arti...t/image004.png
From the Dialog Box that opens up, select “Master page”
http://www.go4expert.com/images/arti...t/image006.png

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

http://www.go4expert.com/images/arti...t/image008.png

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

http://www.go4expert.com/images/arti...t/image010.png

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:

http://www.go4expert.com/images/arti...t/image012.png

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:

Pre-Initialize event of the Content Page
Initialize event of the Child controls of the Master Page
Initialize event of the Child controls of the Content Page
Initialize event of the Master Page
Initialize event of the Content Page
Pre-load event of the Content Page
Load event of the Content Page
Load event of the Master Page
Load event of the Master Page Child controls
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:

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" %>

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";
        }

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.