Introduction to ASP.NET Master Pages
6/28/2006 12:26:49 PM
With the inception of ASP.NET 2.0 with VS.NET 2005, a lot of new features have been introduced which make it possible to increase productivity and web application design very easy. One of these features is master pages. Master Pages are the templates which can be used as the foundation for numerous ASP.NET content pages. With this feature of Master Pages, the productivity has been increased and also makes it easier to manage ASP.NET 2.0 applications after they are built.
With the inception of ASP.NET 2.0 with VS.NET 2005, a lot of new features have
been introduced which make it possible to increase productivity and web
application design very easy. One of these features is master pages. Master
Pages are the templates which can be used as the foundation for numerous ASP.NET
content pages. With this feature of Master Pages, the productivity has been
increased and also makes it easier to manage ASP.NET 2.0 applications after they
are built.
To Add a Master Page in the application follow the steps:
1: Right Click Solution Explorer | Select Add New Item. This will give the
following dialog box (see Figure 1):
Figure 1 - Add New Item Dialog
2: Select Master Page and click Add. Master Page will be added to your
website (see Figure 2):
Figure 2 - Master Page Added to Site
Master Pages have .master extension, where as content pages have .aspx
extension.
As a developer one can put anything in the master page that one wants to share
throughout the application. This can include header, footer, navigation etc.
which to be used across the entire application. The content page then contains
all the page content except the master pages’ elements.
The Source view of Master Page:
<%@
Master Language
= "VB" CodeFile
= "MasterPage.master.vb"
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>
Untitled Page </title>
</head>
<body>
<form
id = "form1"
runat = "server">
<div>
<asp:contentplaceholder
id =
"ContentPlaceHolder1" runat
= "server">
</asp:contentplaceholder>
</div>
</form>
</body>
</html>
To add a content page, just right Click the Master Page and select Add
Content Page (see Figure 3). Alternatively you can follow the following steps:
Figure 3 - Adding a Content Page
Right Click the Solution Explorer and select Add New Item (see Figure 4)…
Figure 4 - Add New Item Option
Select Web Form and Check Select Master Page (see Figure 5)
Figure 5 - Selecting Master Pages as a New Item
From the Select a Master Dialog, select the master page and click OK(see Figure
6)
Figure 6 - Selecting Master Pages
The Source View of Content Page
<%
@ Page
Language = "VB"
MasterPageFile = "~/MasterPage.master"
AutoEventWireup =
"false" CodeFile
= "Default.aspx.vb" Inherits
= "_Default" title
= "Untitled Page"
%>
<asp:Content
ID = "Content1"
ContentPlaceHolderID =
"ContentPlaceHolder1" Runat
= "Server"></asp:Content>
From the source of Master Page and the Content Page it is evident that
whatever we add in the master page, are not present in the content page. Instead
we have one directive
MasterPageFile
= "~/MasterPage.master"
Which points to the master
file and tells ASP.NET to use the template from that master page file
Even at design time we can see
the gray-out area of the master page but only allowed to put content in the
Content area only (see Figure 7).
Figure 7: A
Content Page at Design Time.
At run-time
ASP.NET engine combine these elements into a single page for the end-user (see
Figure 8). This is possible now because .NET framework 2.0 now supports partial
classes, which helps to take two classes and combine them into one Single class.
Figure 8:
The Master and Content Page at Run time…
We can also
programmatically include the master page in the following way:
VB CODE
Protected
Sub Page_PreInit(ByVal
sender As Object,
ByVal e As
System.EventArgs) Handles
Me.PreInit
Page.MasterPageFile = "~/MasterPage.master"
End
Sub
C# CODE
Protected
void Page_PreInit(object
sender, System.EventArgs e)
{
Page.MasterPageFile = "~/MasterPage.master"
}
In many of the company websites, however, there are not just two layers: one
master page and the content pages. Many divisions and groups exist within the
organization that might want to use variations of master by, in effect, having a
master within a master page. This is called nested master pages.
Main Master Page CODE
<%@
Master Language
= "VB" CodeFile
= "MasterPage.master.vb"
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>
Untitled Page </title>
</head>
<body>
<form
id = "form1"
runat = "server">
<div>
<asp:contentplaceholder
id =
"ContentPlaceHolder1" runat
= "server">
</asp:contentplaceholder>
</div>
</form>
</body>
</html>
Sub Master Page CODE
<%@
Master Language
= "VB" MasterPageFile
= "~/MasterPage.master"
%>
<!DOCTYPE
html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script
runat = "server">
</script>
<html
xmlns = "http://www.w3.org/1999/xhtml" >
<head
runat = "server">
<title>
Untitled Page </title>
</head>
<body>
<form
id = "form1"
runat = "server">
<div>
<asp:contentplaceholder
id =
"ContentPlaceHolder2" runat
= "server">
</asp:contentplaceholder>
</div>
</form>
</body>
</html>
When you create applications
that use a common header, footer, or navigation section on every pages of th
eapplicatio, master pages are the solution. Master pages helps easily to
implement and enable a developer to make changes to each and every page in the
application by changing a single file.
This article described master pages in ASP.NET 2.0 and explained how to build a
nd use master pages with a web application.
|