devxlogo

Introducing ASP.NET 2.0 Master Pages

Introducing ASP.NET 2.0 Master Pages

SP.NET 2.0 introduces a new concept known as Master Pages, in which you create a common base master file that provides a consistent layout for multiple pages in your application. To create a Master Page, you identify common appearance and behavior factors for the pages in your application, and move those to a master page. In the master page, you add placeholders called ContentPlaceHolders where the content (child) pages will insert their custom content. When users request the content pages, ASP.NET merges the output of the content pages with the output of the master page, resulting in a page that combines the master page layout with the output of the content page. In this article, you’ll take a look at the theory behind the master pages and see how to leverage the new Master Pages feature in a Web application. Along the way, you’ll also see some of the advanced concepts of master pages, such as accessing master page controls from code in content pages, nesting master pages, and configuring master page for an entire Web application.

Master Pages Architecture
To use Master Pages in your ASP.NET Web application, you create a Master Page for the site layout and design and create Content Pages for each content resource, and then connect the content pages to the master pages using the new controls and attributes supplied by ASP.NET 2.0. After you make that connection, ASP.NET will serve up the page by merging the content from the master page with the content of the content pages.

What You Need
The Master Pages feature is available only in ASP.NET 2.0, which ships with Visual Studio.NET Whidbey, Alpha Edition or later.

The master page defines content areas using the ContentPlaceHolder control, and the content pages place their content in the areas identified by the ContentPlaceHolder control in the master page. Pages that use a master page to define the layout may place content only in the areas defined by the ContentPlaceHolder, thus ensuring a consistent site design. Master pages have a .master file extension. Apart from the content required to define the standard look and feel of the application, the master pages also contain all the top-level HTML elements for a page, such as ,

, and
. Finally, each master page contains one or more content placeholders that define regions into which the child pages render content.

Walkthrough: Creating Master and Content Pages

Figure 1. Master Page Picker Dialog: The Master Page Picker lists all the master pages available in the current Web site, letting you pick the master page you want to use.

In Visual Studio.NET Whidbey, you create a master page by opening the Add New Item dialog box, and selecting the Master Page item from the list. For this example, create a new project, add a master page, and then modify the master page code so it looks like the code in Listing 1.

The code in Listing 1 looks similar to a normal ASP.NET page; it contains simple HTML and ASP.NET controls. The main difference between this page and a standard ASP.NET page is the use of the Master directive and the file suffix .master. Note the use of the ContentPlaceHolder control, which dictates where content pages can insert content. The id attribute uniquely identifies the placeholder, allowing you to put more than one placeholder in a master page. The master page can contain code as well as content, which allows it to render contents dynamically, or perform other generic processing. The code defines a header, a left navigation bar, and the page body using HTML table elements. The page body table contains an asp:contentplaceholder control, which you’ll link to all the content pages so that the content pages can insert their own content. Any content page that uses the master page in Listing 1 will automatically inherit the header, left navigation and the body from the master page.

After creating the master page, create a content page that leverages the master page. To create a content page using Visual Studio .NET Whidbey, select the Content Page item from the Add New Item dialog box. You’ll see the Master Page Picker dialog box (see Figure 1) that lists all the master pages available in the Web application.

After creating the content page, modify it to look like the following code.

                       

The content page code is very simple and straightforward. First define the Page directive, in which you must specify a new attribute named master used to identify the name of master page associated with the content page. The page contains an asp:content control linked to the master page’s asp:contentplaceholder using the contentplaceholderid attribute. In the Page_Load event, the code sets the text of the server-side Label control defined within the asp:content control. If you navigate to the Design view of the content page, you will find that you can see the master page content, but they’re grayed out. You can edit only the content within the asp:content control (see Figure 2).

Accessing Master Page Controls from Content Pages
Although Master Pages provide the common content for all the pages, sometimes you may need to access master page controls from within content pages and modify their values. To access the master page controls from a content page, invoke the Page.Master property, which returns a reference to the master page. Using that reference, you have direct access to the controls in the master page. This is a very powerful feature that gives content pages complete control over the content rendered through the master pages. There are two ways you can access the controls available in the master page.
  • In the first approach, you expose the controls in the master page using public properties. This means you need to create one property for each control that should be made available to the content pages.
  • In the second approach, you get a reference to the master page controls in a standard way?using the FindControl method?which is available because the Master class derives from System.Web.UI.Page class.

The following code shows an example that accesses a control in the master page from a content page.

                Master Page                        
Left Navigation

The preceding code is very similar to the code in Listing 1; however this version contains a server side control named “Header” in the header section. The following code shows how to access the Header control from a content page.

              This content is generated from the content page.   

The preceding code starts by specifying the name of the master file to use. The Page_Load event?invokes the FindControl method of the Master class, passing it the name of the master page control to find. The code casts the returned value to a Label control and then sets its Text value.

Apart from accessing all the controls of the master page, you can also access the public properties and methods exposed by the master page from the content pages using an early-bound approach. This early-bound approach not only increases the performance but also provides compile time type-checking, resulting in increased developer productivity.

Nesting Master Pages
There are times where you may want to provide overall branding and appearance for your Web site, but at the same time provide sub-sites whose appearance must be consistent. To accomplish this, you need to nest one master page within another page, a process called “Nesting Master Pages”. Nesting support is built-in, which means you don’t have to do anything special to reap the advantages of nested master pages; a content page that uses a sub-master page will automatically receive content from all the master pages in the hierarchy.

Consider the MSDN Web site as an example to understand how you can use the nested master page architecture to provide a consistent look and feel. As you probably know, MSDN is the home for several developer centers that cover the .NET framework, ASP.NET, Visual Studio, Security, Web services, and Windows Server 2003, among others. Using the master pages architecture, you could implement a consistent look and feel across all the developer centers. For example, you can have the main MSDN page derive from a root master page. Each developer center can have its own master page, each of which uses the root master page as its master. This means a content page in any of the developer centers will inherit the root master page look and feel settings that provide overall MSDN branding, and will also inherit the custom look and feel specific to that developer center. This nested approach?provides each developer center with the freedom to develop customized content while maintaining a consistent overall branding for the entire site. The downloadable code for this article provides an example of nested master pages.

Configuring Master Pages
So far, you’ve used the master attribute of the Page directive in the content pages to specify the name of the master page. Even though this approach works, it requires you or your developers to specify the master attribute in each page. You can eliminate that requirement by specifying the name of the master file in the web.config file under the pages element. After adding the entry to your web.config file, all the pages in that Web application will automatically use the designated master page. For example, the following web.config file entry specifies that all the pages in the Web application should use IntroMaster.master as their default master page.

                           

You’re not limited by setting the default master page in the web.config file. Even when you use this method to specify the name of a default master page, you can still override the global value by specifying a different master page in the master attribute of the Page directive. Any values you specify using the Page directive takes precedence over the web.config file entry.

To sum up, ASP.NET’s new Master Pages feature provides a clean approach to encapsulate common functionality and content a centralized location, allowing other pages to inherit from those master pages, thereby greatly reducing the maintenance. Using master pages, you can also create one set of controls and code and apply the results to all your content pages. Apart from providing a fine-grained control over the layout of the content pages, master pages also expose an object model that allows you to access the master page controls, properties and methods from content pages.

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist