A Master
Page enables you to share the same content among multiple content pages
in a website. You can use a Master Page to create a common page layout.
For example, if you want all the pages in your website to share a
threecolumn layout, you can create the layout once in a Master Page and
apply the layout to multiple content pages.
You
also can use Master Pages to display common content in multiple pages.
For example, if you want to display a standard header and footer in each
page in your website, then you can create the standard header and
footer in a Master Page. By taking advantage of Master Pages, you can
make your website easier to maintain, extend, and modify. If you need to
add a new page to your website that looks just like the other pages in
your website, then you simply need to apply the same Master Page to the
new content page. If you decide to completely modify the design of your
website, you do not need to change every content page. You can modify
just a single Master Page to dramatically change the appearance of all
the pages in your application.
In
this chapter, you learn how to create Master Pages and apply Master
Pages to content pages. It describes how you can apply a Master Page to
an entire application by registering the Master Page in the web
configuration file. It also explores different methods of modifying
content in a Master Page from individual content pages. For example, you
learn how to change the title displayed by a Master Page for each
content page.
Finally,
you learn how to load Master Pages dynamically. Loading Master Pages
dynamically is useful when you need to co-brand one website with another
website, or when you want to enable individual website users to
customize the appearance of your website.
Creating Master Pages
You
create a Master Page by creating a file that ends with the .master
extension. You can locate a Master Page file any place within an
application. Furthermore, you can add multiple Master Pages to the same
application.
For example, Listing 5.1 contains a simple Master Page.
Notice
that the Master Page in Listing 5.1 looks very much like a normal
ASP.NET page. In fact, you can place almost all the same elements in a
Master Page that you could place in an ASP.NET page, including HTML,
server-side scripts, and ASP.NET controls.
VISUAL WEB DEVELOPER NOTE
You
create a Master Page in Visual Web Developer by selecting the Website
menu option, Add New Item, and selecting the Master Page item. There are
two special things about the Master Page in Listing 5.1.
First, notice that the file contains a <%@ Master %> directive instead of the normal <%@ Page %> directive.
Second, notice that the Master Page includes two ContentPlaceHolder controls.
When
the Master Page is merged with a particular content page, the content
from the content page appears in the areas marked by ContentPlaceHolder
controls. You can add as many ContentPlaceHolders to a Master Page as
you need.
The
Master Page in Listing 5.1 creates a two-column page layout. Each
ContentPlaceHolder control is contained in a separate <div> tag.
Cascading Style Sheet rules are used to position the two <div>
tags into a two-column page layout (see Figure 5.1).
The content page in Listing 5.2 uses the Master Page that was just created
When you open the page in Listing 5.2 in a web browser, the contents of the page are merged with the Master Page.
VISUAL WEB DEVELOPER NOTE
In
Visual Web Developer, you create an ASP.NET page that is associated
with a particular Master Page by selecting Website, Add New Item, and
selecting Web Form. Next, check the check box labeled Select Master
Page. When you click Add, a dialog box appears that enables you to
select a Master Page.
The
Master Page is associated with the content page through the
MasterPageFile attribute included in the <%@ Page %> directive.
This attribute contains the virtual path to a Master Page.
Notice
that the content page does not contain any of the standard opening and
closing XHTML tags. All these tags are contained in the Master Page. All
the content contained in the content page must be added with Content
controls.
You
must place all the content contained in a content page within the
Content controls. If you attempt to place any content outside these
controls, you get an exception. The Content control includes a
ContentPlaceHolderID property. This property points to the ID of a
ContentPlaceHolder control contained in the Master Page. Within a
Content control, you can place anything that you would normally add to
an ASP.NET page, including XHTML tags and ASP.NET controls.
Creating Default Content
You
don’t have to associate a Content control with every ContentPlaceHolder
control contained in a Master Page. You can provide default content in a
ContentPlaceHolder control, and the default content will appear unless
it is overridden in a particular content page.
For
example, the Master Page in Listing 5.3 includes an additional column,
which displays a banner advertisement (see Figure 5.2). The banner
advertisement is contained in a ContentPlaceHolder control named
contentAd.
The
content page in Listing 5.4 uses the Master Page in Listing 5.3. It
does not include a Content control that corresponds to the contentAd
control in the Master Page. When you open the page in a browser, the
default banner advertisement is displayed.
Of
course, you do have the option of adding a Content control that
overrides the default content contained in the contentAd control in the
Master Page. For example, you might want to display different banner
advertisements in different sections of your website.
Using Images and Hyperlinks in Master Pages
You
must be careful when using relative URLs in a Master Page. For example,
you must be careful when adding images and links to a Master Page.
Relative URLs are interpreted in different ways, depending on whether
they are used with HTML tags or ASP.NET controls.
If
you use a relative URL with an ASP.NET control, then the URL is
interpreted relative to the Master Page. For example, suppose that you
add the following ASP.NET Image control to a Master Page:
<asp:Image ImageUrl=”Picture.gif” Runat=”Server” />
The
ImageUrl property contains a relative URL. If the Master Page is
located in a folder named MasterPages, then the URL is interpreted like
this:
/MasterPages/Picture.gif
Even
if a content page is located in a completely different folder, the
ImageUrl is interpreted relative to the folder that contains the Master
Page and not relative to the content page. The situation is completely
different in the case of HTML elements. If an HTML element such as an
<img> or <a> tag includes a relative URL, the relative URL
is interpreted relative to the content page. For example, suppose you
add the following <img> tag to a Master Page:
<img src=”Picture.gif” />
The
src attribute contains a relative URL. This URL is interpreted relative
to a particular content page. For example, if you request a content
page located in a folder named ContentPages, the relative URL is
interpreted like this:
/ContentPages/Picture.gif
Using
relative URLs with HTML elements is especially tricky because the URL
keeps changing with each content page. If you request content pages from
different folders, the relative URL changes. There are three ways that
you can solve this problem.
First,
you can replace all the HTML elements that use relative URLs with
ASP.NET controls. An ASP.NET control automatically reinterprets a
relative URL as relative to the Master Page.
NOTE
Relative
URLs used by ASP.NET controls in a Master Page are automatically
reinterpreted relative to the Master Page. This process of
reinterpretation is called rebasing. Only ASP.NET control properties decorated with the UrlProperty attribute are rebased.
Second,
you can avoid relative URLs and use absolute URLs. For example, if your
application is named MyApp, then you can use the following <img>
tag to display an image file located in the MasterPages folder:
<img src=”/MyApp/MasterPages/Picture.gif” />
The
disadvantage of using absolute URLs is that they make it difficult to
change the location of a web application. If the name of your
application changes, then the absolute URLs will no longer work and
you’ll end up with a bunch of broken images and links. The final option
is to use the Page.ResolveUrl() method to translate an application
relative URL into an absolute URL. This approach is illustrated with the
page in Listing 5.10. The Page.ResolveUrl() method is used with the
<img> tag in the body of the Master Page, which displays the
website logo.
Registering Master Pages in Web Configuration
You
can apply a Master Page to every content page in a particular folder or
every content page in an entire application. Rather than add a
MasterPageFile attribute to individual content pages, you can add a
configuration option to the web configuration file. For example, the web
configuration file in Listing 5.12 applies the SimpleMaster.master
Master Page to every page contained in the same folder (or subfolder) as
the web configuration file.
The
Master Page is applied only to content pages. If a page does not
contain any Content controls—it is a normal ASP.NET page—then the Master
Page is ignored. You can override the Master Page configured in the web
configuration file in the case of a particular content page. In other
words, a MasterPageFile attribute in a content page takes precedence
over a Master Page specified in the web configuration file.
Loading Master Pages Dynamically
You can associate different Master Pages dynamically with a content page. This is useful in
two
situations. First, you can enable the users of your website to
customize the appearance of the website by loading different Master
Pages. You can display a menu of Master Pages, and allow your users to
pick their favorite layout.
Another
situation in which loading Master Pages dynamically is useful concerns
co-branding. Imagine that your company needs to make its website look
like a partner website. When users link to your website from the partner
website, you don’t want users to know that they are traveling to a new
website. You can maintain this illusion by dynamically loading different
Master Pages based on a query string passed from a partner website.
The
page in Listing 5.20 contains two links. Both links include a query
string parameter named master, which represents the name of a Master
Page. When you click the first link, the Dynamic1.master Master Page is
loaded (see Figure 5.7) and when you click the second link, the
Dynamic2.master Master Page is loaded (see Figure 5.8).
Notice
that the page in Listing 5.20 includes a Page_PreInit() event handler.
This handler grabs the value of the master query string parameter and
assigns the value of this parameter to a Profile property. Next, the
value of the Profile property is assigned to the page’s MasterPageFile
property. Assigning a value to the MasterPageFile property causes a
Master Page to be dynamically loaded.
Because
the name of the Master Page is assigned to a Profile property, the
selected Master Page loads for a user even if the user returns to the
website many years in the future. The Profile object automatically
persists the values of its properties for a user across multiple visits
to a website. The Profile is defined in the web configuration file
contained in Listing 5.21.
