How to work with or create Master pages in ASP.NET?

Sheonarayan
Posted by in ASP.NET category on for Intermediate level | Points: 250 | Views : 9951 red flag
Rating: 5 out of 5  
 1 vote(s)

In this article, we shall learn how to create and use master page in ASP.NET.

Introduction

Master page allows us to share the common content as well as layout to multiple pages. The best example is to show same header and footer and the same layout across different pages of the website. For example on ITFunda.com - an ASP.NET online training website you can notice that all pages have same header and footer but in between content is different. The layout in which header and footer exists is the master page (.master) and rest content comes from the content page (.aspx page).

In this article, let us learn how to create and use master page in ASP.NET. As discussed Master page is used to create uniform look and feel to different pages of the website or web application.

Get hundreds of .NET Tips and Tricks and online ASP.NET training here.

Create a master page by right clicking the project and clicking on Add New Item ... as displayed in picture below

Keep below code snippet into the master page.

MASTERPAGE.MASTER CODE

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs"

Inherits="MasterPage" %>

 

<!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>Home Page</title>

<asp:ContentPlaceHolder iD="head" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

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

<div>

<table width="100%" border="1" cellpadding="2" cellspacing="1">

<tr>

<td colspan="2">Menu 1 | Menu 2 | Menu 3 | Menu 4</td>

</tr>

<tr valign="top">

<td><h3>Left Panel</h3>Other contents goes here</td>

<td>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

 

</asp:ContentPlaceHolder>

</td>

</tr>

<tr>

<td colspan="2">(C) all rights reserved.</td>

</tr>

</table>

 

</div>

</form>

</body>

</html>

The above Master page code snippet renders a table with a row that has Menu 1, Menu 2 .... text.

The 2nd row has two columns, the left column and the right column that contains a ContentPlaceHolder.
The ContentPlaceHolder is a place holder for the content from the content page (.aspx page) where the content
written from the content page appears.

The 3rd row of the master page has “ … all rights reserved” text (it can be treated as the footer).

Now create a content page (.aspx page) by right clicking the project and clicking on Add New Item ... as shown in the picture below.

Note that while creating a new .aspx page you will need to check the “Select master page” checkbox.
When you click Add button, it asks to select a master page for this .aspx page as shown in the picture
below.

Clicking OK button creates a .aspx page, now change the .aspx page code something like below (Focus on the Title property of the Page directives and asp:Content tag).

ASPX PAGE

<%@ Page Title="Default Home Page" Language="C#" MasterPageFile="~/MasterPage.master"

AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<p>This is the content written from the content page (.aspx) page.</p>

 

</asp:Content>

 

Notice that in the master page we have two asp:ContentPlaceHolder tags so in the content page also we have corresponding two asp:Content tags. In the asp:Content tag we have written some code (we can write either html or asp.net code). Now run the .aspx page.

OUTPUT


In the above screen notice that the content written from the content page (.aspx) page (under asp:Content tag that is associated with the ContentPlaceHolder1 of the Master Page) is appearing at the position of asp:ContentPlaceHolder on the Master page. The Title written on the content page is appearing as the Title of the page in the browser.

If we create another content page (.aspx) using this master page, we can keep different content on that page but the layout (left panel, header, footer) and the content of the master page (header and footer text) remains same. In this way we achieve uniform look and feel of different pages of the website or web application.

Hope you find this article useful. Thanks for reading!

Keep learning and sharing your knowledge on DotNetFunda.com !
Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)