Tuesday, 7 October 2008

Using Master Pages in ASP.NET 2.0

Master Pages are one of the key features of ASP.NET 2.0 that enables developer to easily manage standard look and feel through out whole web site. Below article discuss few key features of it and usage of it.

Content Place Holder Controls ASPX Control


Master Pages distinct those selves from normal Web forms by having following features.

* Master page is identified by @Master directive

<%@ Master Language="VB" CodeFile="mainlayout.master.vb" Inherits="mainlaout" %>

* Have to have <header> and <body> tags

* Can contain ContentPlaceHolder ASPX control

Content Place Holder control allows to define areas where each individual page (which uses this master page) decide content to be included. In other words if master page is a template ares defined by these controls are variable to be replace by using pages.

E.g.

 <table>
  <tr>
   <td>
    <asp:contentplaceholder id="sideContent" runat="server"> </asp:contentplaceholder>
   </td>
   <td>
    <asp:contentplaceholder id="mainContent" runat="server"></asp:contentplaceholder>
   </td>
  </tr>
 </table>

Master page can have any other normal controls also.


Content ASP Control

Content controls are use to plug content into "Content Place Holder" areas of master pages on normal pages where master page is used. On these pages, only editable areas are where you have put Content controls. Rest of the page is decided by the master page (this can be easily see in Visual Studio 2005 designer).


<asp:content id="HomeMain" contentplaceholderid="mainContent" runat="Server">
</asp:content><h1> This is a example header </h1>
.... (any other control))



You can place any standard HTML or ASP control inside Content controls and they will be rendered on that particular client page with rest of the master page controls.


PreInit Method

When browser request a particular page (which uses a master page) master page controls are injected to the standard page and placed correctly in hierarchy of controls. This process happens after page "PreInit" event occur and before page "Init" event occur.

There fore you can programatically manipulate content in master page in side the PreInit event handler method.

You can even change the master page of the processing page.

E.g.

Me.MasterPageFile = "~/myotherlayout.master"


URL Rebasing

Since master page and serving page can be in different directories and master page inject controls into serving page, there could be occasions where we find broken links/paths.

For example consider following scenario.

Master page location: /root/mysite/mainlayout.master
Serving page location: /root/mysite/pages/myhome.aspx
Image location: /root/mysite/images/myheader.png

We have defined a image in master page as follows

<img src="http://www.blogger.com/images/myheader.png" alt="1" />


When serving page (myhome.aspx) renders by ASPX engine, first master page contents are injected into the serving page. There fore above image tag also will be injected into the serving page. When above image tag injected to serving page, relative path defined in the src attribute direct browser to wrong place (i.e. /root/mysite/pages/images/myheader.png).

In order to solve this we can make image tag server control. All server control paths are rebased while inject processing is happening.

E.g.

<img src="http://www.blogger.com/images/myheader.png" runat="server" alt="2"/>



Setting Headers and Titles

Since header part of the page is contained in master page, there is no way to manipulate in web form using normal methods (by putting

However there are few ways you can set Title of the web form.

1. Using title attribute in @Page directive
E.g.
<%@ Page Language="VB" MasterPageFile="~/mymainlayout.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Title="Home Page" %>

2. Using Title property of the web form

E.g.
Me.Title = "My Home Page"


Site Wide Masters

There are 3 ways to associate master pages with a web form.

1. Using Master attribute in @Page directive

E.g.

<%@ Page Language="VB" MasterPageFile="~/mymainlayout.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" Title="Home Page" %>

2. Setting MasterPageFile property of the web form in "PreInit" method or earlier

E.g. (shown above)

3. Define default master page for all web forms in web configuration file

E.g.

<configuration> <system.web> <pages master="mymainlayout.master">
</pages> </system.web>



That's the very basic about master pages, hoping to write more as I get my self more familiar with master pages.

No comments: