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