ASP.NET 2.0: A Developeramp;#039;s Notebook [Electronic resources] نسخه متنی

2.2. Use a Master Page as a Content Page Template

Note: Using Master Pages and visual inheritance, you can give all
your web site Content pages a common look and feel.

Once you've created a Master page,
you can create Content pages for your site
that use the Master page as a template.

2.2.1. How do I do that?

Note: A Content page is a Web Form that uses a Master
page.

In this lab, you will add Content
pages to your project and give them a consistent look and feel by
using the Master page you created in the previous lab. You will then add controls
to a Content page and see how ASP.NET combines the content of the
Master page and Content pages at runtime.

First, let's create some pages for your web site.
Using the project created in the previous lab, add a new Web Form.
Right-click the project name in Solution Explorer and select Add New
Item.... On the Add New Item page, select Web Form and use its
default name (Default2.aspx). Check the
"Select master page" checkbox at
the bottom of the dialog (see Figure 2-6).

Figure 2-6. Creating a Content page by selecting a Master page

You will be asked to choose a Master page to use for your form.
Select MasterPage.master (see Figure 2-7).

Figure 2-7. Selecting a Master page

Note: A Content page can have only one Master page.

Click OK and Visual Studio displays the new page,
Default2.aspx, with the
contents of the Master page grayed out (see Figure 2-8), indicating that the content of the Master
page cannot be edited in the Default2.aspx form.
Notice that the page is created with a Content control.

Figure 2-8. Creating a new Content page

You can customize the new page, Default2.aspx,
by adding controls to the Content control. Note that you cannot
modify the Master page in this page.

Note: The Content control is the location where you populate the
content of the page.Tip: To edit the Master page, you can either right-click the Master page
content and select Edit Master, or simply go to the Solution Explorer
and double-click the Master page. Both actions will load the Master
page for editing.

To add content to the Content control, you
can directly drag and drop controls
onto it. You can also type directly into the Content control. Try
adding some text to the Content control (see Figure 2-9).

Figure 2-9. Populating the Content page

To test the Content page, press F5. Your page should resemble the one
shown in Figure 2-10.

Figure 2-10. Displaying the Content page in Internet Explorer

Tip: Recall that the Master page contains a ContentPlaceHolder control.
You can place content in the ContentPlaceHolder control in the Master
page if you want to. If you do so, however, the content within
ContentPlaceHolder will appear in the Content page
when the page is loaded, unless the Content page overrides it by
populating its own Content control.

2.2.2. What just happened?

What you have created is a Web Form
(Default2.aspx) that inherits from a Master page
(MasterPage.master). The beauty of a Master page
is that you can create the content of a page template once and other
Web Forms can then inherit from it. If the content of a Master page
is changed, those changes will automatically show up in any page that
inherits from it.

Note that if a page uses a nested Master page, such as the
MasterPage2.master, you won't
be able to view the page in Design View (as visual editing of nested
Master pages is not supported in Visual Studio 2005). You can only
edit a nested Master page in Source View.

To see how a Content page that uses a nested Master page looks, add a new
Web Form to the project (name it
SqlArticle.aspx) and select
MasterPage2.master as its Master page.

Populate the SqlArticle.aspx page by entering
the HTML and text shown in Figure 2-11. Note that
you have to manually populate the Content control.

Figure 2-11. Editing a page that uses a nested Master page in Source View

When the page is loaded in IE (by pressing F5), you will see the
content of the two Master Pages combined (see Figure 2-12).

Figure 2-12. Loading a page that uses nested Master Pages

2.2.3. What about...

...converting an existing web page to a Content
page?

When you look at the source of a normal Web Form (one that does not
use a Master page), you will notice that it contains the usual bits
of HTML you expect to find on an ASP.NET page as well as a
<form> element:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 
Inherits="Default_aspx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/
DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>

However, a Content page does not contain the usual elements that make
up an ASP.NET page (such as <html>,
<body>, or <form>).
Instead, you'll see an <asp:Content> element,
which
represents the Content control and its properties. The
<asp:Content> control encapsulates whatever controls (and
contents) you drop onto the Content's control.

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" 
AutoEventWireup="false" CodeFile="Default3.aspx.vb" 
Inherits="Default3_aspx" title="Untitled Page" 
%>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
...
...
</asp:Content>

To convert a Web Form to a Content page, you simply need to add the
MasterPageFile attribute to its Page directive and then remove all
other HTML elements from the page. Here's a sample
Page directive that does the job:

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master"  
AutoEventWireup="false" CodeFile="Default.aspx.vb" 
Inherits="Default_aspx" %>

The Page directive simply converts the
Default.aspx page of this lab to a Content page.
What about the Content control, which is needed to display the
content unique to the page? You can add it in code, like this:

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master"  
AutoEventWireup="false" CodeFile="Default.aspx.vb" 
Inherits="Default_aspx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" 
runat="server">
</asp:Content>

Or, you can click on the Create Custom Content link in the Context
Tasks menu, which you'll find on the right side of
the Content control (see Figure 2-13).

Figure 2-13. Creating a new Content control

Tip: If you don't specify the Content control in code,
you will still see the Content control in Design View. You will be
unable to add controls to the Content control unless you click on the
Create Custom Content link in the Content Tasks menu of the Content
control.

...applying a Master page to an entire
site?

To require that all pages at a site use a particular Master page by
default, just add the <pages> element to the
Web.config file for the site:

<system.web>
<pages masterPageFile="MasterPage.master" />
...

A page that does not specify a value for the MasterPageFile attribute
in its Page directive will use the
MasterPage.master Master page by default. To
override the default Master page setting in
Web.config, simply add the MasterPageFile
attribute to the Page directive of the web page in question and
assign it the name of another file.

...detecting the browser type and switching
Master pages on the fly?

If your application targets users with different browsers, you may
need to create separate Master pages so each can be optimized for a
specific browser. In this case, you need to be able to dynamically
switch your Master page during runtime. To do so, add the following
code to the PreInit event of the Content page:

Protected Sub Page_PreInit(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles Me.PreInit
If (Request.Browser.IsBrowser("IE")) Then
MasterPageFile = "MasterPage.master"
ElseIf (Request.Browser.IsBrowser("Mozilla")) Then
MasterPageFile = "MasterPage_FireFox.master"
Else
MasterPageFile = "MasterPage_Others.master"
End If
End Sub

The preceding code assumes you have three different Master pages:
MasterPage.master (for IE),
MasterPage_FireFox.master (for FireFox), and
MasterPage_Others.master (for all other
browsers). The page will check the type of browser requesting the
page and then apply the appropriate Master page to it.

Besides switching the Master page programmatically, you can also do
this declaratively:

<%@ Page Language="VB" 
MasterPageFile="~/MasterPage_Others.master" 
ie:MasterPageFile="~/MasterPage.master"
mozilla:MasterPageFile="~/MasterPage_FireFox.master"
...

2.2.4. Where can I learn more?

Scott Guthrie (Product Manager of ASP.NET at Microsoft) has written a
blog on how to vary the Master page based on browser type:
http://blogs.msdn.com/scottgu/archive/2004/11/20/267362.aspx.