|
Developing Master Pages to Rapidly Develop a Site That has a
Consistent Look & Feel
Overview
With the introduction of ASP.NET 2.0 a concept known as Master Pages allows you
to create a "Master" page that provides a consistent look and feel for
pages in your web application. Creating a Master Page involves moving common
page elements into the Master Page Template. Within the Master Page you provide
areas where content will be rendered by the child pages later in the
application as they are served to the end user. This rendered page is a
combination of the Master Page and the content rendered via the content place
holders defined in the Master Page Template.
In this article, you'll take a look at the theory behind the master pages and
see how to leverage the new Master Pages feature in a Web application. Along
the way, you'll also see some of the advanced concepts of master pages, such as
accessing master page controls from code in content pages, nesting master
pages, and configuring master page for an entire Web application.
Architecture
To use Master Pages in your ASP.NET Web application, you create a Master Page
for the site layout and design and create Content Pages for each content
resource, and then connect the content pages to the master pages using the new
controls and attributes supplied by ASP.NET 2.0. After you make that
connection, ASP.NET will serve up the page by merging the content from the
master page with the content of the content pages.
The master page defines content areas using the ContentPlaceHolder control, and
the content pages place their content in the areas identified by the
ContentPlaceHolder control in the master page. Pages that use a master page to
define the layout may place content only in the areas defined by the
ContentPlaceHolder, thus ensuring a consistent site design. Master pages have a
.master file extension. Apart from the content required to define the standard
look and feel of the application, the master pages also contain all the
top-level HTML elements for a page, such as html, head, and form. Finally, each
master page contains one or more content placeholders that define regions into
which the child pages render content.
Creating Master and Content Pages
In Visual Studio.NET Whidbey, you create a master page by opening the Add New
Item dialog box, and selecting the Master Page item from the list. For this
example, create a new project, add a master page, and then modify the master
page code.
The code looks similar to a normal ASP.NET page; it contains simple HTML and
ASP.NET controls. The main difference between this page and a standard ASP.NET
page is the use of the Master directive and the file suffix .master. Note the
use of the ContentPlaceHolder control, which dictates where content pages can
insert content. The id attribute uniquely identifies the placeholder, allowing
you to put more than one placeholder in a master page. The master page can
contain code as well as content, which allows it to render contents
dynamically, or perform other generic processing. The code defines a header, a
left navigation bar, and the page body using HTML table elements. The page body
table contains an asp:contentplaceholder control, which you'll link to all the
content pages so that the content pages can insert their own content. Any
content page that uses the master page will automatically inherit the header,
left navigation and the body from the master page.
After creating the master page, create a content page that leverages the master
page. To create a content page using Visual Studio .NET Whidbey, select the
Content Page item from the Add New Item dialog box. You'll see the Master Page
Picker dialog box that lists all the master pages available in the Web
application. After creating the content page, modify it to look like the
following code.
<%@ page language="C#" master="~/Intro.master" %> <script
runat="server"> void Page_Load(object sender, System.EventArgs e) {
lblMessage.Text = "This content is generated from the content page"; }
</script> <asp:content id="Content1"
contentplaceholderid="middleContent" runat="server"> <asp:label
runat="server" id="lblMessage"></asp:label> </asp:content>
The content page code is very simple and straightforward. First define the Page
directive, in which you must specify a new attribute named master used to
identify the name of master page associated with the content page. The page
contains an asp:content control linked to the master page's
asp:contentplaceholder using the contentplaceholderid attribute. In the
Page_Load event, the code sets the text of the server-side Label control
defined within the asp:content control. If you navigate to the Design view of
the content page, you will find that you can see the master page content, but
they're grayed out. You can edit only the content within the asp:content
control.
Accessing Master Page Controls from Content Pages
Although Master Pages provide the common content for all the pages, sometimes
you may need to access master page controls from within content pages and
modify their values. To access the master page controls from a content page,
invoke the Page.Master property, which returns a reference to the master page.
Using that reference, you have direct access to the controls in the master
page. This is a very powerful feature that gives content pages complete control
over the content rendered through the master pages. There are two ways you can
access the controls available in the master page.
-
In the first approach, you expose the controls in the master page using public
properties. This means you need to create one property for each control that
should be made available to the content pages.
-
In the second approach, you get a reference to the master page controls in a
standard way—using the FindControl method—which is available because the Master
class derives from System.Web.UI.Page class.
The following code shows an example that accesses a control in the master page
from a content page.
<%@ master language="C#" %> <html> <head
id="Head1" runat="server"> <title>Master Page</title>
</head> <body> <form id="Form1" runat="server"> <table
id="header" style="WIDTH: 100%; HEIGHT: 80px" cellspacing="1" cellpadding="1"
border="1"> <tr> <td width="100%" style="TEXT- ALIGN: center">
<asp:label runat="server" id="Header"> This is the default header in the
Master Page</asp:label> </td> </tr> </table> <b/>
<table id="leftNav" style="WIDTH: 108px; HEIGHT: 100%" cellspacing="1"
cellpadding="1" border="1"> <tr> <td style="WIDTH: 100px"> Left
Navigation </td> </tr> </table> <table id="mainBody"
style="LEFT: 120px; VERTICAL- ALIGN: top; WIDTH: 848px; POSITION: absolute;
TOP: 94px; HEIGHT: 100%" border="1"> <tr> <td width="100%"
style="VERTICAL-ALIGN: top"> <asp:contentplaceholder id="middleContent"
runat="Server"> </asp:contentplaceholder> </td> </tr>
</table> </form> </body> </html>
The preceding code version contains a server side control named "Header" in the
header section. The following code shows how to access the Header control from
a content page.
<%@ page language="C#" master="~/ExposeHeader.master" %> <script
runat="server"> void Page_Load(object sender, System.EventArgs e) { Label
headerLabel = (Label) Master.FindControl("Header"); headerLabel.Text = "This
label content is set through the Page_Load event of the child page"; }
</script> <asp:content id="Content1"
contentplaceholderid="middleContent" runat="server"> This content is
generated from the content page. </asp:content>
The preceding code starts by specifying the name of the master file to use. The
Page_Load event invokes the FindControl method of the Master class, passing it
the name of the master page control to find. The code casts the returned value
to a Label control and then sets its Text value. Apart from accessing all the
controls of the master page, you can also access the public properties and
methods exposed by the master page from the content pages using an early-bound
approach. This early-bound approach not only increases the performance but also
provides compile time type-checking, resulting in increased developer
productivity.
Nesting Master Pages
There are times where you may want to provide overall branding and appearance
for your Web site, but at the same time provide sub-sites whose appearance must
be consistent. To accomplish this, you need to nest one master page within
another page, a process called "Nesting Master Pages". Nesting support is
built-in, which means you don't have to do anything special to reap the
advantages of nested master pages; a content page that uses a sub-master page
will automatically receive content from all the master pages in the hierarchy.
Consider the MSDN Web site as an example to understand how you can use the
nested master page architecture to provide a consistent look and feel. As you
probably know, MSDN is the home for several developer centers that cover the
.NET framework, ASP.NET, Visual Studio, Security, Web services, and Windows
Server 2003, among others. Using the master pages architecture, you could
implement a consistent look and feel across all the developer centers. For
example, you can have the main MSDN page derive from a root master page. Each
developer center can have its own master page, each of which uses the root
master page as its master. This means a content page in any of the developer
centers will inherit the root master page look and feel settings that provide
overall MSDN branding, and will also inherit the custom look and feel specific
to that developer center. This nested approach provides each developer center
with the freedom to develop customized content while maintaining a consistent
overall branding for the entire site.
Configuring Master Pages So far, you've used the master attribute of the Page
directive in the content pages to specify the name of the master page. Even
though this approach works, it requires you or your developers to specify the
master attribute in each page. You can eliminate that requirement by specifying
the name of the master file in the web.config file under the pages element.
After adding the entry to your web.config file, all the pages in that Web
application will automatically use the designated master page. For example, the
following web.config file entry specifies that all the pages in the Web
application should use IntroMaster.master as their default master page.
<configuration> <system.Web> <pages master="IntroMaster.master"
/> </system.Web> </configuration>
To sum up, ASP.NET's new Master Pages feature provides a clean approach to
encapsulate common functionality and content a centralized location, allowing
other pages to inherit from those master pages, thereby greatly reducing the
maintenance. Using master pages, you can also create one set of controls and
code and apply the results to all your content pages. Apart from providing a
fine-grained control over the layout of the content pages, master pages also
expose an object model that allows you to access the master page controls,
properties and methods from content pages.
Sources:
Thiru Thangarathinam – Devx.com
Master Your Site Design with Visual Inheritance and Page Templates - MSDN
Magazine June 2004
|