In this article, we shall learn how to create and use master page in ASP.NET.
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.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<asp:ContentPlaceHolder iD="head" runat="server">
<form id="form1" runat="server">
<table width="100%" border="1" cellpadding="2" cellspacing="1">
<td colspan="2">Menu 1 | Menu 2 | Menu 3 | Menu 4</td>
<td><h3>Left Panel</h3>Other contents goes here</td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
<td colspan="2">(C) all rights reserved.</td>
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
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).
<%@ 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 ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<p>This is the content written from the content page (.aspx) page.</p>
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 !