Working with Master Pages

Visual inheritance is a great new enhancement to your Web pages provided by new additions to ASP.NET 2.0. In effect, you can create a single template page that can be used as a foundation for any number of ASP.NET content pages in your application. These templates, called master pages, increase your productivity by making your applications easier to build and to manage after they are built. This chapter takes a close look at how to utilize master pages in your applications to the fullest extent. But first, I explain the advantages of master pages.

Why Do You Need Master Pages?

Most Web sites today have common elements used throughout the entire application or on a majority of the pages within the application. For instance, if you look at the main page of the Reuters News Web site (found at www.reuters.com), you see common elements that are used throughout the entire Web site. These common areas are labeled in Figure 6-1.

screen shot, notice a header section, a navigation section, and a footer section on the page. In fact, pretty much every page within the entire application uses these same elements. Even before master pages, you had ways to put these elements into every page; but in most cases, these other means posed difficulties.

Some developers simply copy and paste the code for these common sections to each and every page that requires them. This works, but it’s rather labor intensive. And if you use the copy-and- paste method, whenever a change is required to one of these common sections of the application, you have to go into each and every page to make the change. That’s not much fun!

In the Active Server 3.0 days, one popular option was to put all the common sections into what was called an include file. You could then place this file within your page like this:

<!-- #include virtual=”/myIncludes/header.asp” -->

Chapter 6

Header

Secondary

Navigation

Common
Page
Items	Ad Space

Footer

Figure 6-1

In this The problem with using include files was that you had to take into account the HTML tags in the header include file. These tags had to be closed in the main document or in the footer include file. It was usually difficult to keep all the HTML tags in order, especially if multiple people worked on a project. Web pages sometimes displayed strange results because of inappropriate or nonexistent tag closings or openings. It was also difficult to work with include files in a visual designer. Using include files didn’t allow for the developer to see the entire page as it would appear in a browser. The developer ended up developing the page in sections and hoping that the pieces would come together as planned.

174

Working with Master Pages

With the introduction of ASP.NET in 2000, developers started using user controls to encapsulate common sections of their Web pages. For instance, you could build a Web page that included header, navigation, and footer sections by simply dragging and dropping these sections of code onto each page that required them. This approach is shown in Figure 6-2.

This technique worked, but it also raised some issues. First, as you can tell from the screen shot, user controls cause problems similar to those related to include files. When working in the Design view of your Web page, the common areas of the page display only as gray boxes in Visual Studio .NET. This makes it harder to build a page. You cannot visualize what the page you are building actually looks like until you compile and run the completed page in a browser. Another problem with user controls was that you have to open and close HTML tags properly just as you did with include files. I personally like the use of user controls better than include files, but they aren’t always perfect template pieces for use throughout an application.

In light of these issues, the ASP.NET team has come up with the idea of master pages — an outstanding new way of applying templates to your applications. These pages keep a more distinct line between the common areas that you carry over from page to page and the content areas that are unique on each and every page. Working with master pages is easy and fun. Take a look at some of the basics of master pages in ASP.NET 2.0.

Figure 6-2

175

Chapter 6

The Basics of Master Pages

Master pages are an easy way to provide a template that can be used by any number of ASP.NET pages in your application. In working with master pages, you create a master file that is the template to be used by a subpage or content page. Master pages use a .master file extension and the content pages use the .aspx file extension, but are declared content pages within the file’s Page directive.

Anything that you want to encapsulate within the template should be put into the .master file. This can include the header, navigation, and footer sections that are used across the Web application. The content page then contains all the page content except for the master page’s elements. At runtime, the ASP.NET engine combines these elements into a single page for the end user. Figure 6-3 shows a diagram of how this process works.

Master Page	Content Page
MyMaster.master	Default.aspx

M

C

M C

Combined Page

Default.aspx

Figure 6-3

One of the nice things about working with master pages is that you can visually see the template in the IDE when you are creating the content pages.

Because you can see the entire page while you are working on it, it is much easier to develop any content pages that use this template. When working in this manner, all the templated items are shown in shaded gray and are not editable while you are working on the content page. The only items that can be altered are clearly shown in the template. These workable areas, called content areas, are also defined in the master page itself. Within the master page, you specify the areas of the page that the content pages can use. You can have more than one content area in your master page if you want. Figure 6-4 shows the master page with a couple of content areas shown.

176