Working with Master Pages
Working with Master Pages
For many sites, there is a need for reusable way for maintaining a standardized appearance across the entire site. Those sites include common headers, footers and menus.
Master Pages in ASP.NET 2.0 consists of two conceptual elements:
- Master Pages
- Content Pages
At runtime, the ASP.NET engine combines these elements into a single page for the end user.
Master Pages is a feature coming in ASP.NET 2.0, which enables to create sites with a common appearance driven by a single template. You can create a single template page that can be used as a foundation for any number of ASP.NET content pages in your application.
Master Pages
Master page file serves as the template for other pages, and contains the top-level HTML elements like header, navigation, footer, Ad space and common items.
The main differences between standard ASP.NET page to master page:
- <%@ master %> directive
- .master extension
You can add master pages in the same way you add .aspx pages – choose Master Page option when you add new item to your application, as shown in the following figure:
The default master page that created for you contains the following content:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="MasterPages.Site1" %>
<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>
Content Pages
Content Pages are ordinary aspx pages, that contains a reference to a master page. Their purpose is to provides the content for the inherited master page template.
The following code is the content of Default.aspx, which cause the result in the below image. In each asp:content tag you specify for which ContentPlaceHolderID in the master page to insert the content.
<%@ Page="" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MasterPages._Default" MasterPageFile="~/Site1.Master" %>
<asp:content ID="Content1" ContentPlaceHolderID="head" runat="server">
Default page
</asp:content>
<asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
This is the content for the default page.
</asp:content>
One of the implications of this implementation is that master page is just another control in your page, which means it accessible in code:
void Page_Load(object sender, EventArgs e)
{
HtmlForm form = Master.FindControl("form1") as HtmlForm;
if (form != null)
{
}
}
Using Visual Studio 2008 Designer
The great thing in master pages in Visual Studio 2008 is that you can use the designer and switch to code as any .aspx page. For example for the following master page:
<%@ Master="" Language="C#" AutoEventWireup="true" CodeBehind="Site2.master.cs" Inherits="MasterPages.Site2" %>
<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">
<table cellpadding="3" border="1">
<tr bgcolor="yellow">
<td colspan="2">
<h1>My Home Page</h1>
</td>
</tr>
<tr>
<td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
</asp:ContentPlaceHolder>
</td>
<td>
<asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<td colspan="2">
Copyright 2009
</td>
</tr>
</table>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Lets change the Default.aspx page as follow:
<%@ Page="" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MasterPages._Default" MasterPageFile="~/Site2.Master" %>
<asp:content ID="Content1" ContentPlaceHolderID="head" runat="server">
Default page
</asp:content>
<asp:content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
This is the content for the default page.
</asp:content>
<asp:content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder3" runat="server">
ContentPlaceHolder3
</asp:content>
<asp:content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder4" runat="server">
ContentPlaceHolder4
</asp:content>
You can edit the master page using the Visual Studio 2008 Designer as shown in the following figure:
Conclusion
Master pages is a great enhancement to your web pages, and by using a single template page it can be used as a foundation for any number of ASP.NET pages in your site. This template make it easier to develop and manage sites, and supported by the Visual Studio 2008 Designer.