Building an ASP.NET 2.0 Master Page in Three Steps

Introduction

The motivation to create a common look and feel for all the web pages at a site which evolved over a period of time at Microsoft has culminated in this embodiment called a Master Page. This supersedes the previous Microsoft developed strategies such as serve side includes, user controls in VS2003, etc. During the heydays of ASP, include pages delivered similar functionality but were difficult to maintain for larger sites.

A Master Page establishes a common look and feel for all your web pages by providing a template with an editable place holder. The content for the place holder comes from your web page. The concept is really very simple as shown in the next picture. In the website, consider the two files you will be creating, one a Master.master page and another called the myPage.aspx. Master has only the Header and the Footer with an embedded contentplaceholder with HTML markup. The myPage.aspx has just one ASP content placeholder control devoid of any other HTML markup.

However when the user browses to the myPage.aspx, he will see only the myPage.aspx rendered on the browser as shown.

Step 1: Adding a Master.master page to your site

Create a web site and call it http://localhost/Tutorials. This comes with a default.aspx page. Go to the menu item Website and click to get the drop down. From the drop down click on Add New Item... as shown in the following picture.

This gives access to the Visual Studio installed templates window as shown in the next picture.

Highlight Master Page and it will add a MasterPage.master page to your site when you hit the Add button. Before you hit the Add button, however, change the default name to anything different. Here it is named Tutorial.master. Take a look at the source of Tutorial.master, which is shown in the next picture.

Two items distinguish this page from an aspx page. It has the @Master directive, and embedded in its body there is an asp control called contentplaceholder.This is a server control.

The next picture shows the Design view of this Master Page.

The Master Page is like a super template; into it goes the content that will come from a yet-to-be-created web page.

There is yet another difference between a Master Page and a regular ASPX page. Even though it has HTML markup, you cannot browse the master on Explorer! In fact if you right click the Master Page, the View in Browser option is missing.

In principle all the other pages use the Master as their template and add their content to the Master's skeleton. When the page is rendered, the Master and the content from the page will be merged when the client browses the page as explained earlier.

Step 2: Adding some features to the Master

Above and below the ContentPlaceHolder let's add some HTML code so that the source of Tutorial.master appears as shown. What you add to the Master will appear as is in all the pages which reference this Master.

The design view after adding the header and the footer is shown in the next picture. The contentplaceholder is empty, but you will see the header and the footer.

Step 3: Create a web page which uses the Master

If you want to create a page which has the same look and feel as the other pages on the site, you will have to reference the Master. Let us add another aspx page and give it a suitable name. It is called VbDotNet.aspx in this tutorial.

Add a page directive to reference the Master

On the source of this page add an additional directive which will point to the Master as shown in the next picture. MasterPageFile is the menu item which can be chosen from the drop-down which appears when you insert a space after VbDotNet" as shown.

The MasterPageFile attribute has a value which also can be accessed from the drop-down when you type a = sign after MasterPageFile and pause for a moment as shown in the next picture. There is only one Master Page that you created in Step 1. This is what you are going to choose by clicking on this item.

When you click on Tutorial.master a relative path attribute to this file will be added as shown in the next picture.

Adding an asp:content/ control to the page

Onto the VbDotNet.aspx page insert a tag as shown inside the <Form/> tags as shown. It immediately points to the <asp: Content/> control in the drop-down menu that is spawned.

Make use of the drop-down pick list to configure the attributes of this control as shown. It has an ID which is just "ID="content1" as well as other attributes shown in the drop-down. One of the important items you must configure is the ContentPlaceHolderID.

The ContentPlaceHolderID

With the ContentPlaceHolderID being properly referred to the ContentPlaceHolderID in the Master Page, you can plug in whatever content you wish to place in the VbDotNet.aspx page. Another attribute that must be added is the runat="server" as this is a server control. Make sure you have all the values of the attributes under double quotes.

For this tutorial only some links are added inside the <asp:content/> tags as shown with a heading inside the <h3/> tags as shown here and a <ul/> list showing some links. This is the source code of this completed page.

<%@ Page Language="VB" 
AutoEventWireup="false" 
CodeFile="VbDotNet.aspx.vb" 
Inherits="VbDotNet" 
MasterPageFile="~/Tutorial.master"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>VISUALBASIC.NET</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<b><asp:Content ID="content1" 
ContentPlaceHolderID="ContentPlaceHolder1" 
runat="server"></b> <h3 style="color:Maroon">

Welcome to the Visual Basic .NET Tutorials</h3>
<ul>
<li><a href="/c/a/VB.NET/Exploring-the-Dialogs-Controls-in-Vb-Net/">
Exploring the Dialogs Controls in Vb.Net </a></li>
<li><a href="http://www.codeproject.com/vb/net/Migration.asp"> 
On Migrating a VB Project to VB.NET</a></li>
<li><a href="/c/a/VB.NET/Creating-a-VBNET-Client-for-a-ColdFusion-

Web-Service/">
VB.NET Client for a ColdFusion Web Service</a> </li>
</ul> </asp:Content>
</div>
</form>
</body>
</html>

The design view of this page is as shown in the next picture. The content that is coming from the Master has been grayed out as shown. Whatever is colored blue in the above source code is displayed.

The ContentPlaceHolder page cannot have the name space and other markup tags. If you were to browse the page as is, you will get run time server errors since the ContentPlaceHolder page, which is in this case the VbDotNet.aspx, cannot have other markups. It should have <asp:Content/> as the topmost control. The cleaned-up source code for the VbDotNet.aspx page should be as shown, with no markups and no namespace reference.

<%@ Page Language="VB"
AutoEventWireup="false"
CodeFile="VbDotNet.aspx.vb"
Inherits="VbDotNet"
MasterPageFile="~/Tutorial.master"%> <asp:Content ID="content1" 
ContentPlaceHolderID="ContentPlaceHolder1"
runat="server"> <h3 style="color:Maroon">Welcome to the Visual Basic 

.NET Tutorials</h3>
<ul>
<li><a href="/c/a/VB.NET/Exploring-the-Dialogs-Controls-in-Vb-Net/">
Exploring the Dialogs Controls in Vb.Net </a></li>
<li><a href="http://www.codeproject.com/vb/net/Migration.asp">
On Migrating a VB Project to VB.NET</a></li>
<li><a href="/c/a/VB.NET/Creating-a-VBNET-Client-for-a-ColdFusion-

Web-Service/">
VB.NET Client for a ColdFusion Web Service</a> </li>
</ul>
</asp:Content>

When you view this in the browser, you will see the following displayed, the top and bottom coming from the Master and the content in the middle from the VbDotNet page's content.

Adding another web page (ContentPlaceHolder)

Every other web page at this site using the Master will be a ContentPlaceHolder page. This next page, DTS.aspx was designed very rapidly following the same procedure indicated above. An image was added to the Master Page so that every page will have the logo. This displays as shown here. Compared to using Usercontrols in VS2003 this process is very rapid.

Here is the source of the Master that produced the above content. Some changes were made to the original Tutorial.master file. An image folder was created in the web site and an image was brought into the folder from the computer. An image control was added to the page and its URL was set to reference the image folder (shown in blue).

<%@ Master Language="VB" 
CodeFile="Tutorial.master.vb" 
Inherits="Tutorial" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div> <asp:Image ID="Image1" runat="server" 
ImageUrl="~/images/Htek.jpg" />
<span style="color: #3300ff">
<span style="font-size: 32pt">
Welcome to Tutorials Haven<br />
<br />
</span></span> <asp:contentplaceholder 
id="ContentPlaceHolder1" 
runat="server">
</asp:contentplaceholder> </div> <h4>Copy Right©Jay 2006</h4>

 </form>
</body>
</html>

This next picture shows the web site directory showing all the relevant pages used in this tutorial.

Summary

Using the Master Page technique to get a common look and feel for the web pages on a website can be easily and rapidly implemented with the VS 2005 IDE. It is vastly superior to earlier procedures used to obtain the same effect. Although a bare bones Master was used, it is possible to provide a rich user experience by using the various other objects from the vast toolbox repository and other objects.