Professional Documents
Culture Documents
Marking Up Master Pages
Marking Up Master Pages
To add a master page to a web project, right-click your web project in the Solution Explorer window, select
Add New Item, and select the Master Page item type from the Add New Item dialog. The listing below shows a
sample master page in source view.
<%@ Master Language="VB" CodeFile="otc.master.vb" Inherits="otc" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="~/StyleSheet.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" Value="Home"/>
<asp:MenuItem NavigateUrl="~/Experiments.aspx"
Text="Experiments" Value="Experiments"/>
</Items>
</asp:Menu>
<div>
<div id="main">
<asp:ContentPlaceHolder ID="mainContent" runat="server" />
</div>
<div id="right">
<asp:ContentPlaceHolder ID="sideContent" runat="server" />
</div>
<div id="footer">
<asp:Literal ID="Footer" runat="server" Text="OdeToCode.com" />
</div>
</div>
</form>
</body>
</html>
A master page looks very similar to an ASPX file, except a master page will have a .master file extension
instead of a .aspx extension, and uses an @ Master directive instead of an @ Page directive at the top. Master
pages will define the <html>, <head>, <body >, and <form>, tags. A new control, the ContentPlaceHolder
control also appears in our master page. You can have one or more ContentPlaceHolder controls in a master
page. ContentPlaceHolder controls are where we want our ASPX web forms to place their content.
Just like any ASPX form, our master page can contain code in a <script> block, or in a code-behind file, and
can respond to page lifecycle events. The MasterPage class (from the System.Web.UI namespace) derives from
UserControl and will have all of the usual events: Init, Load, PreRender, etc. The following listing shows how
weve added a Page_Load event handler to modify the color of the menu control on the page, and weve also
added a property to allow setting and retrieving the text inside the footer.
Partial Class otc
Inherits System.Web.UI.MasterPage
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Menu1.BackColor = Drawing.Color.LemonChiffon
End If
End Sub
Public Property FooterText() As String
Get
Return Footer.Text
End Get
Set(ByVal value As String)
Footer.Text = value
End Set
End Property
End Class
Plugging In Content
The ASPX web forms we use to put content into master pages are plain .aspx files, although with a few
differences. When you add a new ASPX web form to a project youll have the option of associating the web
form with a master page. Doing so will place a MasterPageFile attribute in the @ Page directive for the web
form. The attribute points to the .master file youve selected (you can have multiple master pages in a web
project). The source code below is for a default.aspx file using the otc.master master page we defined earlier.
<%@ Page Language="VB" MasterPageFile="~/otc.master"
AutoEventWireup="false"
CodeFile="Default.aspx.vb"
Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="mainContent" runat="Server">
<h1>mainContent</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque auctor, dui a
accumsan faucibus, erat dolor rhoncus massa, a hendrerit nulla purus eu dui. Morbi
eget ligula. Proin sapien augue, sagittis vel, blandit sed, lobortis et, nulla.
Nullam laoreet blandit erat. Ut egestas. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Pellentesque ut wisi at tellus placerat vestibulum. Aliquam at
lacus non justo vulputate suscipit. Quisque mattis, arcu sed tempus fermentum, diam
neque varius elit, vel eleifend nibh urna a pede.
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="sideContent" runat="Server">
<h4>sideContent</h4>
Donec hendrerit. Aliquam at massa. Pellentesque sed justo. Donec interdum ipsum
vitae nisl. Maecenas ac quam non lacus posuere convallis. Mauris nibh. Quisque mattis,
arcu sed tempus fermentum, diam neque varius elit, vel
</asp:Content>
<%@ Page Language="VB" MasterPageFile="~/otc.master" AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="mainContent" runat="Server">
<h1>mainContent</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque auctor, dui a accumsan faucibus, erat dolor
rhoncus massa, a hendrerit nulla purus eu dui. Morbi eget ligula. Proin sapien augue, sagittis vel, blandit sed,
lobortis et, nulla. Nullam laoreet blandit erat. Ut egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Pellentesque ut wisi at tellus placerat vestibulum. Aliquam at lacus non justo vulputate suscipit. Quisque
mattis, arcu sed tempus fermentum, diam neque varius elit, vel eleifend nibh urna a pede.
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="sideContent" runat="Server">
<h4>sideContent</h4>
Donec hendrerit. Aliquam at massa. Pellentesque sed justo. Donec interdum ipsum vitae nisl. Maecenas ac
quam non lacus posuere convallis. Mauris nibh. Quisque mattis, arcu sed tempus fermentum, diam neque varius
elit, vel
</asp:Content>
A web form associated with a master page is called a content page. A content page may only contain markup
inside of Content controls. If you try to place any markup or controls outside of the Content controls, youll
receive a compiler error: Only Content controls are allowed directly in a content page that contains Content
controls.
Each Content control in a content page maps to exactly one of the ContentPlaceHolder controls in the Master
Page. You do not need to define a content control for every ContentPlaceHolder control in the master. If a
Content control doesnt exist for a place holder, the master page will simply render the default content inside of
the ContentPlaceHolder of the master page (we did not define any in this example).
The runtime examines the ID of each Content control and finds a ContentPlaceHolder with a matching ID.
When the runtime finds the match it will take the markup and controls inside the Content control and insert
them into the ContentPlaceHolder of the master page. Even though our Content controls in this example do not
contain any server side controls, like GridView controls and Calendar controls, any ASP.NET control can
appear inside the Content areas.
One benefit to working with master pages in the Visual Studio IDE is the built-in design support for master
pages. The screen below shows our default.aspx form in a design time view. The Content controls are the only
editable sections of the form. The master page markup displays in design view, but since we are editing
default.aspx and not otc.master in the screen shot, the sections defined by the master page are un-editable and
ghosted out. This gives designers and developers a clear idea of content versus the layout structure defined by
the master page.
The second screen shot above shows our default.aspx web form in action. Weve used a .css style sheet (shown
below) to position the <div> tags on the page. The approach will give us a great deal of flexibility. We can make
changes to the layout of the site simply by editing the CSS or master page, whichever makes the most sense for
the change we need to make. In either case, we will never have to duplicate the <div>s on any of our web
forms, the layout is controlled entirely in the master page.
The second screen shot above shows our default.aspx web form in action. Weve used a .css style sheet (shown
below) to position the <div> tags on the page. The approach will give us a great deal of flexibility. We can make
changes to the layout of the site simply by editing the CSS or master page, whichever makes the most sense for
the change we need to make. In either case, we will never have to duplicate the <div>s on any of our web
forms, the layout is controlled entirely in the master page. body
{
font-size: smaller;
}
#main
{
float: left;
width: 67%;
background: #fff;
border-right: 1px solid #000;
margin-right: 15px;
padding-bottom: 10px;
padding-right: 10px;
}
#footer
{
clear: both;
width: 100%;
text-align: center;
font-size: 10px;
padding: 3px;
border-top: 3px solid #333;
background-color: #cccc99;
}
#footer
{
clear: both;
width: 100%;
text-align: center;
font-size: 10px;
padding: 3px;
border-top: 3px solid #333;
background-color: #cccc99;
}
Conclusions
Master pages provide a key component to any web application, namely the ability to organize a consistent
layout into reusable templates. These master page templates offer full designer support and programmatic
interfaces to meet the demands of most applications.