If you have a Web site, you surely would have faced the problem of maintaining a consistent layout and look to the pages. ASP.NET 2.0 provides a feature to help you do this.
Version 2.0 of the .NET Framework has a truckload of new features, and a significant part of these are in ASP.NET 2.0. Among the new features in ASP.NET 2.0, the one that excites me the most and that I feel will be the most useful, is Master Pages.
This is a series of three articles in which I will cover master pages in-depth—right from an introduction to master pages to migrating an ASP.NET 1.1 application to use master pages. I will also talk of the common problems you might encounter.
Using Master Pages to Create a Consistent Layout
The different pages in a Web site typically have the same look and feel; for example, the header, footer, and menu bar would be the same for the pages although the content changes from page to page. The way this was achieved was by copying common code and ASPX file sections in the different pages, including files, using user-defined controls, using frames, and so on. ASP.NET 2.0 provides a solution for this. You can use master pages to create a consistent page layout for your Web site or for a group of related pages. On the master page, you place the common UI elements and code; you then can create individual content pages that contain the content you want to display. When users request the content pages, those pages merge with the master page to produce output that combines the layout of the master page with the content from the content page.
A Simple Example
Here is an example that would give a clear picture of the use of master pages. This sample is a scaled-down version of a typical Web site; it has just two pages: a Home page and an About Us page. Both these pages have a consistent look to them; they have the same header and footer. The common part is put into the master file. The concept of master pages will be explained using this example.
Figure 1: The sample Web site's Home page. The common UI elements and code will be moved to a master page.
Figure 2: The sample Web site's About Us page. The common UI elements and code will be moved to a master page.
The Master Page
A master page is an ASP.NET file with the extension .master, such as SiteMaster.master. The master page is similar to a regular ASPX page but with the following changes:
- Instead of the @ Page directive, there is a special @ Master directive.
- For an ordinary ASPX page, the class in the code-behind file inherits from System.Web.UI.Page whereas for the master page the class in the code-behind file inherits from System.Web.UI.MasterPage. Both these changes are taken care of by Visual Studio when you create your Web form and master page through it.
As on an ordinary ASPX page, on the master page one can put static text, HTML elements, and server controls. Master pages will have one or more ContentPlaceHolder controls. The pages in a Web site that share a common look and feel use the same master page and on this master page the common UI elements and code is put. The content pages (ASPX pages) have Content controls that provide content for the ContentPlaceHolder controls of the master pages. The master page for the sample Web site is:
Figure 3: SiteMaster.master b: the master page for your sample Web site.
public partial class SiteMaster : System.Web.UI.MasterPage
Note: Because there is no common code in the sample, the SiteMaster class is empty. Also, notice that the master page class is derived from the class MasterPage and not the Page class, as happens in an ordinary ASPX class.
Once you have moved the common UI elements and code to the master page, only the page specific part will remain in the ASPX pages. This page-specific content is placed within the content control. In an ASPX page that has a master page, no content can be outside the content control; otherwise, ASP.NET would not know how to merge this page with the master page. For the ASPX page, you specify which master page to use in the page's @ Page directive by including a MasterPageFile attribute that points to the master page to be used. The content pages for your Home and About Us pages are:
<%@ Page MasterPageFile="~/SiteMaster.master"
Title="Home Page" %>
Welcome to Falconsoft Systems - a company formed by people
having worked in the industry for a good many years. <p />
<%@ Page MasterPageFile="~/SiteMaster.master"
Title="About Us Page" %>
About Us - A group of IT professionals who shared a common
vision and outlook to software design and development came
together to form this company. <p />
public partial class AboutUs : System.Web.UI.Page
Along with layout and code that applies to all pages, the master page can also supply default content, which can be overridden by content pages or displayed if not overridden. This is achieved by simply inserting the content within the ContentPlaceHolder element. For example, your MySite.master page could have the following default content:
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
Welcome to my site, where you'll find lots of interesting stuff.
Creating Master Pages through Visual Studio
In Visual Studio 2005, the way one creates an ASP.NET application has been changed a little. It can be created from File->New->Web Site. Another change made is that it's not mandatory to have IIS on the ASP.NET development machine because Visual Studio installs an ASP.NET Development Server in which the application can run.
After creating a new Web site, one can add a master page from Website->Add New Item. The Add New Item screen is shown below:
Figure 4: The Add New Item screen to add a master page to the Web project
After the master page has been added, you can add a Web form that uses the master page. To do this, check the Select master page option in the Add New Item screen, as shown below:
Figure 5: Check the Select master page option to add a Web form that uses a master page
Runtime Behavior of Master Pages
The client never requests the master page directly and the master page is not known to the client. The client requests the content page (ASPX pages); if there is a master page associated with it, the master page is merged into the content page and treated as a control in the content page. ASP.NET processes a page request in the following sequence:
- ASP.NET fetches the page.
- ASP.NET determines whether the content page references a master page.
- If so, ASP.NET fetches the master page associated with the content page.
- ASP.NET merges the master page into the content page and treats it as a control in the content page.
- ASP.NET renders results to the browser.
Some Useful Links
1. This book has a great chapter on master pages. (You can download master page chapter for free!)
A First Look at ASP.NET v 2.0
2. The master pages section on ASP.NET Web:
Visual Web Developer 2005 Express Edition Guided Tour