How to Use Master Pages

Looking for an easy way to include banners, navigation menus, and content from other pages within an application? You might want to use master pages. This article, the first of two parts, introduces you to their creation. It is excerpted from chapter three of the book Murach’s ASP.NET 2.0 Upgrader’s Guide: VB Edition, written by Anne Boehm and Joel Murach (Murach, 2005; ISBN: 1-890774-36-7).

Contributed by
Rating: 4 stars4 stars4 stars4 stars4 stars / 36
December 01, 2005
Rate this Article:
MEH MEH++


SEARCH ASP FREE
TOOLS YOU CAN USE

advertisement

How to create master pages

A master page is a page that provides a framework within which the content from other pages can be displayed. Master pages make it easy to include banners, navigation menus, and other elements on all of the pages in an application. In the topics that follow, you’ll learn how to create master pages in your ASP.NET applications.

A is a page that provides a framework within which the content from other pages can be displayed. Master pages make it easy to include banners, navigation menus, and other elements on all of the pages in an application. In the topics that follow, you’ll learn how to create master pages in your ASP.NET applications.

An introduction to master pages

Figure 3-1 shows the basics of how master pages work. As you can see, the page that’s actually sent to the browser is created by combining elements from a master page and a content page. The content page provides the content that’s unique to each page in the application, while the master page provides the elements that are common to all pages. In this example, the master page (MasterPage.master) provides a banner at the top of each page, a simple navigation menu at the side of each page, and a message that indicates how many days remain until Halloween at the bottom of each page.

In addition, the master page contains a content placeholder that indicates where the content from each content page should be displayed. In this example, the content page is the Order.aspx page, and its content is displayed in the content placeholder in the central portion of the master page.

Notice that the name of the content page is Order.aspx, the same as the Order page that you saw in chapter 2. In other words, when you use master pages, the individual pages of your web application become the content pages. You’ll learn how to create content pages or convert existing ASP.NET pages to content pages in figure 3-6.

 

The Cart application with a master page (figure 3-1)
 

Description

  • A master page provides a framework in which the content of each page on a web site is presented. Master pages make it easy to create pages that have a consistent look.
  • The pages that provide the content that’s displayed in a master page are called content pages.
  • The content of each content page is displayed in the master page’s content placeholder.

How to create a master page

As figure 3-2 shows, you create a master page by using the Website->Add New Item command. Master Page is listed as one of the templates in the Add New Item dialog box. Select this template, select Visual Basic as the language, and click Add to create the master page. The default name for a master page is MasterPage.master.

The master page created from the template includes a ContentPlaceHolder control that will contain the content page, but nothing else. You’ll learn more about the ContentPlaceHolder control in the next figure. For now, just realize that it marks the location on the rendered page where the content from the content page will be displayed.

You can develop the master page by adding elements outside of the ContentPlaceHolder control. For example, to create the master page in figure 3-1, you add an image for a banner above the placeholder, navigation links to the left of the placeholder, and a label to display the days remaining until Halloween below the placeholder. Typically, you’ll use an HTML table to specify the layout of these elements.

Note that an application can contain more than one master page. This allows you to create an application that has two or more sections with distinct page layouts. For example, you may want to use one master page for all of the content pages in the online shopping section of a web site, and another master page for the content pages in the customer service section.

In addition, you should realize that a master page can have more than one content placeholder. This lets you create a page layout that has custom content in two or more different areas of the page. To create an additional content placeholder, you simply drag the ContentPlaceHolder control from the Standard tab of the Toolbox onto the master page and give it a unique ID.

A new master page in Design view (figure 3-2)
 

Description

  • To add a master page to a project, choose the Website->Add New Item command. Then, in the Add New Item dialog box, select Master Page from the list of templates, specify the name of the master page you want to create in the Name text box (the default is Master Page.master), and select the programming language. Then, click Add.
  • The content placeholder appears as a control in the Web Forms Designer. Although you can change the position of the content placeholder, you can’t edit its contents from the master page. Instead, you add content to the master page by creating content pages as described later in this chapter.
  • Any elements you add to the master page outside of the content placeholder will appear on every content page that uses the master page.
  • Although most master pages have just one content placeholder, you can create more than one content placeholder if you need to. In that case, each placeholder displays a portion of the content of each content page.
  • An application can have more than one master page, and each content page specifies which master page should be used to display the content page.
  • The aspx file for a master page uses the extension .master. The code-behind file uses .master.vb.

The aspx code for a new master page

The listing at the top of figure 3-3 shows the aspx code that’s generated when you create a master page using the Master Page template. As you can see, this code is similar to the aspx code generated for a regular ASP.NET web page, with two important differences.

First, instead of a Page directive, the code begins with a Master directive. This indicates that the file contains a master page rather than a regular ASP.NET page. Second, the Div element that normally contains the content for the page now contains a ContentPlaceHolder control.

Notice that the master page file is itself a well-formed HTML document with html, head, and body elements. The body element includes a form element, which in turn contains the ContentPlaceHolder control. Any elements you add to the master page should appear within the form element, but outside of the ContentPlaceHolder control.

The aspx code for a new master page (figure 3-3) 

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!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>
    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
    </asp:contentplaceholder>
  </div>
  </form>
</body>
</html>

Attributes of the Master page directive

Attribute Description
Language Specifies the language used for any code required by the page.
CodeFile Specifies the name of the code-behind file.
Inherits Specifies the name of the page class defined in the code-behind file.

Attributes of the ContentPlaceHolder control 

Attribute

Description

ID

Specifies the name of the content placeholder.

Runat

Specifies that the control is a server-side control.

Description

  • A master page must begin with a Master page directive and should include at least one ContentPlaceHolder control.
  • Any HTML or aspx elements that you add to the master page will be displayed on every page that uses the master page along with the ContentPlaceHolder control.

The aspx code for the Halloween Store master page

Figure 3-4 shows the complete aspx code for the master page in figure 3-1. Although this listing fills the entire page, there’s nothing complex about it. So you shouldn’t have any trouble understanding its elements.

The banner at the top of the page is displayed using an image control. After the banner, a table element controls the layout of the rest of the page. The first row of this table specifies a height of 400 pixels. It has three cells. The first cell contains a simple navigation menu built using <a> tags. The background color for this cell is set to red. The second cell is a small (10 pixel) spacer cell that gives some space between the navigation menu and the content. And the third cell contains the content placeholder.

The second row defines the footer that appears at the bottom of the page. It also has three cells, each the same width as the cells in the first row. However, the height of this row is set to 25 pixels. The third cell in this row contains a label control named lblMessage. This label will be used to display the number of days that remain until Halloween.

The aspx code for the master page (figure 3-4)

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!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>Murach's ASP.NET 2.0 Upgrader's Guide: Chapter 3 Master Page Application</title>
</head>
<body>
 
<form id="form1" runat="server">
  <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/banner.jpg" /><br />
  <table cellpadding="2" cellspacing="0"<
    <tr height="400">
      <td style="width: 157px" valign="top" bordercolor="red" bgcolor="red">
        <br />
        <a href="Order.aspx">
          <span style="color: #ffffff"><b>Home</b></span>
        </a><br /><br />
        <a href="Cart.aspx">
          <span style="color: #ffffff"><b>Your Shopping Cart</b></span>
        </a><br /><br />
        <a href="Service.aspx">
         
<span style="color: #ffffff"><b>Customer Service</b></span>
        </a><br /><br />
        <a href="About.aspx">
          <span style="color: #ffffff"><b>About Us</b></span> 
        </a></td> 
      <td style="width: 10px"></td>
      <td style="width: 704px" valign="top">
        <asp:contentplaceholder id="Main" runat="server">
        </asp:contentplaceholder> 
      </td>
    </tr>
    <tr height="25">
      <td bgcolor="red" bordercolor="red" style="width: 153px" valign="top"></td>
      <td style="width: 10px"></td>
      <td style="width: 704px" valign="top">
        <asp:Label ID="lblMessage" runat="server"></asp:Label>
      </td> 
    </tr>
  </table>
  </form>
</body>
</html>

Description

  • Most master pages include elements like banners and navigation controls.
  • It’s common to use tables to provide the layout for the elements on the master page, including the content placeholder.

The code-behind file for the master page

Master pages have events just like regular ASP.NET pages. So it’s important to realize that most of these events are raised after the corresponding events for the content page are raised. For example, the Page Load event for the master page will be processed after the Page Load event for the content page. Likewise, any control events for the content page are processed before any control events for the master page. Note, however, that both the content page and the master page Load events are processed before any of the control events are processed.

Figure 3-5 shows the code-behind file for the master page in figure 3-4. This code-behind file includes a Page_Load procedure that’s executed when the master page loads. As you can see, this procedure calls a procedure named DaysUntilHalloween, which calculates and returns the number of days remaining until October 31. Then, an appropriate message is assigned to the Text property of the lblMessage label.

The code behind file for the master page (figure 3-5) 

Partial Class MasterPage
  Inherits System.Web.UI.MasterPage

  Protected Sub Page_Load(ByVal sender As Object, _
      ByVal e As System.EventArgs) Handles Me.Load
    Dim iDaysUntil As Integer = DaysUntilHalloween() 
    If iDaysUntil = 0 Then
      lblMessage.Text = "Happy Halloween!"
    ElseIf iDaysUntil = 1 Then
      lblMessage.Text = "Tomorrow is Halloween!" 
    Else lblMessage.Text = "There are only " & iDaysUntil _
      & " days left until Halloween!"
    End If
  End Sub

  Private Function DaysUntilHalloween() As Integer
    Dim dtmHalloween As Date = New DateTime(DateTime.Today.Year, 10, 31)
    If DateTime.Today > dtmHalloween Then
      dtmHalloween.AddYears(1)
    End If
    Dim tsTimeUntil As TimeSpan = dtmHalloween - DateTime.Today
    Return tsTimeUntil.Days
  End Function

End Class

Description

  • Master pages have events just like regular ASP.NET pages. For this master page, the Page Load event is used to display the number of days remaining until Halloween.
  • Most events for the content page are raised before the corresponding events for the master page. For example, the Page Load event for the content page is raised before the Page Load event for the master page. Similarly, events for controls in the content page are raised before events for controls in the master page.
blog comments powered by Disqus
ASP.NET ARTICLES

- Implementing ASP.NET 4.0 Page.MetaDescriptio...
- ASP.Net Development Tips
- Intro to Sessions in ASP.Net
- Google Maps API Introduction in ASP.NET usin...
- Creating an ASP.NET 3.5 Gridview Image Galle...
- Encrypt QueryString in ASP.NET 3.5 using VB....
- ASP.NET 3.5 Drop Down List Controls
- Connect to Access Database with ASP.Net
- Secure Audio Streaming with ASP.Net and Flash
- Dynamic Sitemap and Navigation in ASP.Net
- Implement Gzip and Deflate Compression in AS...
- Run ASP.Net in Ubuntu with Apache
- ASP.Net Mono Website Contact Forms
- ASP.Net URL Rewriting Methods
- Murach`s ASP.NET 4 Web Programming with C# 2...

ASP Web Hosting ASP.Net Web Hosting Windows Web Hosting
 
 
 

ASP Free Forums 
 RSS  Tutorials RSS
 RSS  Forums RSS
 RSS  All Feeds
Site Map 
Request Media Kit
Write For Us Get Paid 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Privacy Policy 
Support 


© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 3 - Follow our Sitemap
Most Popular Topics
All ASP.Net Tutorials