Section 2.2. Use a Master Page as a Content Page Template

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.

1. 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

   
   
   

2. 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.

   ---

3. 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

   
   
   

4. 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.

   ---

5. 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

   
   
   

6. 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  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  ContentPlaceHolder 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  ContentPlaceHolder     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.