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>
<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>
<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.
No comments:
Post a Comment