What is a master page? – a master page is the aspx file that comprises of the markup that is common throughout the whole website being built with the ASP.net. For instance, most of the websites we might have noticed having a common header, footer and in few cases even the left or right side blocks. In cases like these, we can make use of the concept named Master page.

How it works? – The master page is a aspx template built as a common usage for the other content pages of our website. All we need is a single master page, defining the common areas and its markup, and the other content pages giving the markup of only the content area that varies in each of the page. The below figure might give you a clear picture of how effective your master page concept might work.

How we refer the areas in master page? – all we do in a master page is to add the master page content and its markups, and leave the changing content area with a control called as the ContentPlaceHolder. Each and every content place holder might have a name to it, such taht we can make a rference to these while making up the content aspx pages.

Here is an illustration to make it simple for you-

Step1 (create a master page)

Go for a new web project from the files menu on the top of your Visual Studio. Then as is shown above, select ASp.net Web Site, and your Language to C# (or VB as per your comfort). As the IDE opens, go in the solution explorer window, and right click over the project name to find the option “Add new item..” which opens the below window.

From here select the Master Page, name it Site.master. The site.master comprises of the below markup code as below,

<%@ Master Language=”C#” AutoEventWireup=”true” CodeFile=”Site.master.cs” Inherits=”Site” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”> <title>Untitled Page</title>

<asp:ContentPlaceHolder id=”head” runat=”server”> </asp:ContentPlaceHolder></head>


<form id=”form1″ runat=”server”>


<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>  </asp:ContentPlaceHolder>

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

A ContentPlaceHolder control named ContentPlaceHolder1 – this ContentPlaceHolder control appears within the Web Form and serves as the region for the content page’s user interface.

A ContentPlaceHolder control named head – this ContentPlaceHolder control appears within the <head> server control and can be used to declaratively add content to the <head> element.

This is the basic master page layout. Lets try out an example, i have added the below markup code to my master page,

<form id=”form1″ runat=”server”> <div id=”topContent”> <a href=”Default.aspx”>Master Pages Tutorials</a> </div>  <div id=”mainContent”> <asp:ContentPlaceHolder id=”MainContent” runat=”server”> </asp:ContentPlaceHolder> </div>  <div id=”leftContent”> <h3>Lessons</h3>     <ul> <li>TODO</li> </ul>
<h3>News</h3>     <ul> <li>TODO</li> </ul> </div>  <div id=”footerContent”> <img src=”Images/PoweredByASPNET.gif” alt=”Powered by ASP.NET!” /> </div> </form>

Also have added a css stylesheet as style.css, this is added and shall discuss in another article later, but is simply done through the solution explorer and linked with the page at the header with the <link>, as <link href=”styles.css” rel=”stylesheet” type=”text/css” />.

I have added few css styles,

#topContent {    text-align: right;    background-color: #600;    color: White;    font-size: x-large;    text-decoration: none;    font-weight: bold;    padding: 10px;    height: 50px;}
#leftContent {    width: 230px;        padding: 10px;    font-size: 90%;    text-align: left;    position: absolute;    top: 60px;    margin-top: 10px;    left: 0px;}
#mainContent {    text-align: left;    margin-left: 250px;    padding: 10px;}
#footerContent {    text-align: center;    padding: 5px;}

Just we have got a sample master page ready.

Step2(Creating your content page)

As usual to add a new item, right click on to the explorer and we have the add item window, where we are to slect the Web Form, as is shown below.

Note: Do have a selection on the Select Master page check box.

then we get this window following by,

The default markup in the content page are as below,

<%@ Page Language=”C#” MasterPageFile=”/Site.master” AutoEventWireup=”true” CodeFile=”About.aspx.cs” Inherits=”About” Title=”Untitled Page” %>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”head” Runat=”Server”></asp:Content><asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” Runat=”Server”></asp:Content>

which lists down all the ContentPlaceHolder from the master page, such that we can add different content in different content web forms and tie them all to a single master page. This is simple, easier and less error prone method to manage a web alyout. All your feed backs are welcome.



October 15, 2009

Hello all….

<Strictly Restrictions are Prohibited>


This blog has everything to be shared here.. every one’s views, comments, quotes and articles are most welcome here.. I love to stay on internet and its like my virtual world where i love to share and learn a lot. So hope everyone gets their chance of sharing and learning here. Lets not make it much of a boring blog, there fore i am to blog even on all the entertainment, sports and every other thing that would excite us and make us sit straight :) :)

I request every visitor to my blog to please make some thing great which really makes this a great place to live in. Hope every one of you find my blog an interesting place to upload and visit :)

%d bloggers like this: