Master
Pages in ASP.NET Whidbey
This
article is continuation to the article on
Consistent Web Site Design Using Page Templates where you have seen how
to maintain consistent web site design using page templates. In this article,
you are going to see how simple to do that in ASP.NET Whidbey using ASP.NET
Master Pages.
Master Pages Overview
ASP.NET
master pages allow you to create a consistent layout for the pages in your
application. A single master page defines the look and feel and standard
behavior that you want for all the pages (or a group of pages) in your
application. You can then create individual content pages that contain the
content you want to display. When users request the content pages, they merge
with the master page to produce output that combines the layout of the master
page with the content from the content page. Master pages provide functionality
that developers have traditionally created by copying existing code, text, and
controls elements repeatedly, using framesets, using include files for common
elements, using ASP.NET user controls, and so on.
Various
advantages of Master Pages are
1.
They allow you to centralize the common functionality of your pages so that you
can make updates in just one place.
2.
They make it easy to create one set of controls and code and apply the results
to a set of pages. For example, you can use controls on the master page to
create a menu that applies to all pages.
3.
They give you fine-grained control over the layout of the final page by
allowing you to control how the placeholder controls are rendered.
4.
They provide an object model that allows you to customize the master page from
individual content pages.
How it is working?
Before
you can understand how master pages is working, you just the see code snippets
of master page and content page. Then you can easily understand how master
pages is working in ASP.NET. Here is the code for master
page(MasterPage.Master)
<%@ master language="VB"
compilewith="MasterPage.master.vb" classname="ASP.MasterPage_master" %>
<html>
<head runat="server">
<title>Untitled Page</title>
<link type="text/css" rel="stylesheet"
href=Style.css />
</head>
<body>
<form runat="server">
<table height="20%" border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr valign="middle">
<td height="20%" width="70%"
align="left" style="HEIGHT: 61px"><h1> MSDN
India </h1> </td>
</tr>
<tr valign="bottom">
<td height="12%" width="75%">
<asp:table id="Menu" runat="server"></asp:table>
</td>
<td valign="bottom" align="right"
class="nUserName" width="70%" height="10%">
<asp:label id="UserName" runat="server"
font-bold="True"></asp:label>
</td>
</tr>
<tr class="nTabBar">
<td width="100%" colspan="2"
height="19%" align="right">
<table
border="0" cellpadding="0" cellspacing="0" width="100%" >
<tr>
<td width="85%" align="right"> </td>
<td width="3%" align="right">
<asp:image id="SignOut" runat="server"
imageurl="Images\SignOut.gif"></asp:image>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width=100% height=80% border=1px >
<tr>
<td width=15% valign =top >
<table>
<tr>
<td>
<asp:hyperlink id="HyperLink1" runat="server"
navigateurl="MyDetailPage.aspx">
Menu1</asp:hyperlink>
</td>
</tr>
<tr>
<td>
<asp:hyperlink id="HyperLink2" runat="server"
navigateurl="MyDetailPage.aspx">
Menu2</asp:hyperlink>
</td>
</tr>
<tr>
<td>
<asp:hyperlink id="HyperLink3" runat="server"
navigateurl="MyDetailPage.aspx">
Menu3</asp:hyperlink>
</td>
</tr>
</table>
</td>
<td
width=85% valign=top >
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server" >
</asp:contentplaceholder>
</td></tr>
</table>
</form>
</body>
</html>
Here
is the code for content page(mydetailpage.aspx)
<%@
page language="VB" master="~/MasterPage.master"
compilewith="MyDetailPage.aspx.vb" classname="ASP.MyDetailPage_aspx" %>
<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1"
runat="server">
<asp:label id="Label1" runat="server"
font-bold="True">This is my content page.</asp:label>
</asp:content>
As
you have seen, master page is an ASP.NET file with the extension .master, such
as MasterPage.Master with a predefined layout that can include
static text, HTML Elements, and server controls. The master page also contains
all the top level elements like <form> elements. Since top level elements
are included in master page, no need to include it in content pages. You can
define the layout for your website in master page in which you can place your
contents using content pages like mydetailpage.aspx.
On
the master page you also include one or more content placeholders that define
regions where replaceable content will appear. You define the content for the
placeholders by creating individual content pages, which are ASP.NET pages that
are bound to a specific master page. In the content page, you create the
content for the page by adding Content controls and mapping them to content
placeholder controls on the master page. For example, the master page might
have content placeholder called ContentPlaceholder1 . In the content page, you
can create a Content controls that is mapped to ContentPlaceholder1.
After
creating Content controls, you add text and controls to them as you would with
any page or user control. In a content page, anything not inside the Content
controls except script blocks will cause a run-time. You can perform any tasks
in a content page that you do in an ASP.NET page. For example, you can generate
content for the Content control using server controls and database queries or
other dynamic mechanisms. You can create multiple master pages to define
different layouts for parts of your site, and a different set of content pages
for each master page.
You
use master pages by requesting the content page in the browser. When ASP.NET
processes the request, it performs the following steps:
1.
Fetches the page.
2.
Checks whether the content page references a master page.
3.
If so, fetches the master page associated with the content page.
4.
Merges the contents into the content placeholders on the master page.
5.
Renders the result to the browser.
Creating Master Pages using VS.NET Whidbey
VS.NET Whidbey provides various support for VS.NET Whidbey. For example, when
you develop content pages, it will show master pages layout in design view. So
that it will be easier for you to develop content pages based
on outside layout. When you select "Add New Item" option in a
project, you can select which type of asp.net file you want from the list of
options like "Master Page", "Master Page with Code separation", "Content Page",
"Content Page with Code Separation". When you select content page in this list,
it will give you option for selecting a master page to embed with this
content page. Then in the design view of content page, you can drag and drop
the element or server controls in the corresponding contentplace holder in
master page layout.
Conclusion
In
this article you have seen how to maintain consistent layout for a website
using Master Pages in ASP.NEt Whidbey. This article is just an introduction to
Master Pages, there are lots of other features in Master Pages like nested
master pages, customizing master pages from content pages, event handling of
master pages. With the help of article you can start with Master page, then you
can try those features.
|