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