Introduction
If you are a Microsoft Web Developer, I bet, you have, in more cases than one, found yourself either looking for an out-of-the-box framework which allows you to create templates to maintain a consistent look and feel with easy navigation in your website, or you have just developed something which allows you to do this yourself. This article introduces web developers to a new feature called "Master Pages" which comes with ASP.NET 2.0 and provides a standardized way to have templates incorporated in your website so that you don't have to re-invent the wheel.
Background
Typically in the past if Microsoft web developers like us needed to develop a web site which had a consistent look and feel and content which changed from page to page, we resorted to different techniques which allowed us to achieve something close to a template driven solution. Classic ASP developers resorted to Server Side Includes, ASP.NET 1.1 developers used User Controls, and Web Designers used third party solutions like Macromedia Dreamweaver templating which was a client side solution and involved use of a tool to update all HTMLs which use a particular template when the template was updated.
With "Master Pages" in ASP.NET 2.0 and Visual Studio .NET 2005, Microsoft gives an out-of-the-box standardized way for achieving the same results and at the same time enjoying complete integration with the Visual Studio .NET IDE and WYSIWYG development! In this article we take a dive into Master Pages and introduce ourselves to a Hello World project using Master Pages!
The article that follows will describe additional code concepts like exposing properties from Master Pages which allows modification of Master Page Controls from within Content pages and using themes, but for now let's get started with the Master Page basics!
Getting Started With Master Pages
The first step to getting started with ASP.NET Master Pages is to create a "Blank site" in your Visual Studio .NET 2005 IDE. Once a blank project has been created right click the project and add a new item. From the list of item types that you can create, choose a "Master Page" to create a new master page. The following screen shot illustrates this:
Master Pages (files with ".master" extension) are templates which will provide a "structure" to the content pages. A typical case which can be used to describe master pages is a case where the left navigation page and the top part of the website remains fixed for all pages while the content part keeps changing depending on the link the user clicks. In this example, the top panel and left panel would typically be implemented in a master page. The part that keeps changing from link to link will be implemented as a content place holder control in the master page. The following screen shot illustrates a simple master page design that I created where the site header and navigation panel will be fixed for the entire site but the content will keep changing from page to page:
Another thing to note here is that a Content Place Holder control is automatically created by Visual Studio which allows you to define the default content for that content area. This is useful if a "Content Page" which uses this template does not provide any content for this area. In other words this content will be used if the content page using this template does not override the content.
Once I've laid out my basic site design in the master page and decided which sections are a part of a template and which sections keep changing from page to page, I move ahead and start defining my content pages. To add a content page for a master page, I just right click the master page and click "Add Content Page". Once I've added a new content page, a new "aspx" file is created for me. As mentioned earlier, an advantage of using Master Pages is that it seamlessly integrates with the Visual Studio IDE. Essentially, one advantage I get is while editing Content Pages, I still get to see the "whole picture" of my website but I am not allowed to modify parts that belong to the template. As the following screenshot illustrates, while developing my content pages, I can still see the parts that are being extracted from the master page (the top and the left panel) but these are grayed out and I am not allowed to modify these while working on the content page!
We follow the same procedure to create another content page based on the master page. Once we've created a content page for the "Other Links" page (in the attached project I called this MyLinks.aspx) by using the same procedure described above, we modify the master page to update my navigation panel hyperlinks. In the screenshot that follows I've just updated my master page with a link using an <a> </a> tag to point to my newly created content page. The link "Home" is made to point to the first content page (Default.aspx) that I had created and "Links" now points to MyLinks.aspx. The following screenshot illustrates the changes made to the master page; where essentially just two static pieces of text on the navigation panel are now hyperlinked to content pages.
Once this is done and the changes are saved, these changes are instantly reflected on my content pages! As the following screenshot illustrates, I am modifying Default.aspx, which is a content page but all changes made to the master page or the template are automatically reflected in the content page!
Looking Under the Hood
Taking a peek at how Visual Studio generates the code for master pages is usually helpful in better understanding how Master Pages work. A lot of this will be covered in the second part of this article that goes into the advanced concepts of Master Pages but here are a few basic concepts.
When you create a master page, Visual Studio automatically inserts a content place holder for the master page. As the 'default content' to the content place holder the source code of the master page is modified and new code is generated inline. The following code snippet illustrates this:
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
<span style="font-size: 10pt; font-family: Tahoma">This is the default content.
It shows up when there is no content to override this content.</span>
</asp:contentplaceholder>
The content files on the other hand are just responsible for providing content and referencing the master page. Thus, the link between which content page uses which master for its layout is maintained. The following code snippet illustrates this:
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<span style="font-size: 10pt; font-family: Tahoma">
This is the content of my first Page!!!</span>
</asp:Content>
In the above code snippet, the MasterPageFile attribute of the Page tells .NET which master page is being used for this content page. It must be noted here that when a user visits the website, he will essentially be navigating to the content pages (aspx files). So, from a broader prospective, the aspx pages or content pages are actually responsible for extracting the code from master pages, rendering the layout of the master page HTML and then merging the content HTML in the correct places. This concept takes a little time to getting used to but is particularly useful while debugging problems with content pages.
Points of Interest
This is something we've all been doing in the past using customized technologies but it's really exciting to have a "Microsoft Approved" out-of-the-box solution to address this problem a web developer faces almost everyday in his life!
History
Initial draft. All comments / suggestions are welcome at rajivpopat@hotmail.com.
