Web Programming guide – Creating a Master page in ASP.NET

Currently I’m developing a system using ASP.NET web form model, with 3.5 .NET application framework, Visual Studio 2008 and Microsoft SQL server 2005  .

Let’s get into the topic

What is a master page? According to my understanding, it is a page that allow you to design how to put your content into the pages in a standardize format, is like a basic structure or framework. It enable you to customize your page layout. With this, you can just focus on the content page.

here is a sample (Site.Master):


here is the code for Site.Master:

<%@ Master Language=”C#” AutoEventWireup=”true” CodeBehind=”Site.master.cs” Inherits=”SCM_TEST2.Styles.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&#8221; xml:lang=”en”>
<head runat=”server”>
<title></title>
<link href=”../Styles/Site.css” rel=”stylesheet” type=”text/css” />
<asp:ContentPlaceHolder ID=”HeaderContent” runat=”server”></asp:ContentPlaceHolder>
</head>
<body>
<form runat=”server” id=”MyForm”>
<div id=”outer”>
<div id=”header”>
<div style=”float: left;”>
<h1>Main Menu</h1>
<h2>Submenu</h2>
</div>
<div style=”float: right; vertical-align:middle; padding-top:2cm>
<br /><br />
<table cellpadding=”0″ cellspacing=”0″ border=”0″ >
<tr style=”vertical-align:middle;” >
<td align=”center” style=”width: 65px”>
<a id=”A1″ href=”../Account/Login.aspx” runat=”server”>
<br />
<asp:LoginView ID=”MenuLoginView” runat=”server”>
<AnonymousTemplate>
Sign In
</AnonymousTemplate>
<LoggedInTemplate>
Log Out
</LoggedInTemplate>
</asp:LoginView>
</a>
</td>

<td align=”center” style=”width: 65″>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
</tr>
</table>
</div>
</div>
<div >

</div>
<div id=”content”>
<div id=”rightColumn”>
</div>
<div id=”mainContent”>
<div id=”centerColumn”>
<asp:ContentPlaceHolder ID=”MainContent” runat=”server”></asp:ContentPlaceHolder>
</div>
</div>
<div id=”leftColumn”>
<h3></h3>
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>

<LayoutTemplate>
<ul ID=”itemPlaceholderContainer” runat=”server” style=”font-family: Verdana, Arial, Helvetica, sans-serif;”>
</ul>
<div style=”text-align: left;background-color: #FFCC66;font-family: Verdana, Arial, Helvetica, sans-serif;color: #333333;”></div>
</LayoutTemplate>
</div>

</div>
<div id=”footer”><p>Copyright &copy; 2010</p></div>
</div>
</form>
</body>
</html>

As we can see from the code there is <asp:ContentPlaceHolder ID>  to determine the layout where the content will be inserted into it. In this example I have use 2 content control: HeaderContent and MainContent. You can also set the tags using Styles.css for the layout and formatting purposes.

With the master page, we can now proceed to the content page. By selecting the ‘Web Content Form’ from the project to bind with the master page.

Here is the sample (Default.aspx):

Here is the code for Default.aspx (Main Content):

<%@ Page Title=”” Language=”C#” MasterPageFile=”~/Styles/Site.Master” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs”

Inherits=”SCM_TEST2.Default” %>
<asp:Content ID=”HeaderContent” ContentPlaceHolderID=”HeaderContent” runat=”server”>
</asp:Content>
<asp:Content ID=”MainContent” ContentPlaceHolderID=”MainContent” runat=”server”>
<html>
<h2>
<AnonymousTemplate> Title</AnonymousTemplate>
<LoggedInTemplate><p>This is a test.</p></LoggedInTemplate>
</h2>
</html>
</asp:Content>

MasterPageFile has bind the Site.master master page to Default.aspx content page. You can create more content page with the same master page. Good Luck!!

If you like to look more into it, you can visitASP.NET Master Page Tutorials

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