The ASP.net Master Page – How this works??

February 23, 2011

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>

<body>

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

<div>

<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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: