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.
No comments:
Post a Comment