| |
| Download
the source code
Please change the extension of the file
to .zip after downloading. |
| |
Introduction
Today most of the web application has consistent web site design
across its applications. In classic ASP, developers used include
files for this purpose. But in ASP.NET, there are many ways
to do this. This article explores the methodology of using Page
Templates to maintain consistent web design. Page Templates
are created by Inheriting from a base Page Class (System.Web.UI.Page).
At the end of this article, I have given links for articles
that explains about different Page Template Techniques. |
| |
| Consistent Web site design
in ASP.NET |
| |
| In ASP.NET we have lots of options
for having consistent web site design. Here are the few methods, |
| |
| 1. |
#Includes |
| 2. |
User Controls |
| 3. |
Custom Controls |
| 4. |
Frames |
| 5. |
Page Templates. |
|
| |
| To know the advantages and disadvantages
about these methods, refer the following URL |
| |
| http://www.aspalliance.com/wisemonk/view.aspx?id=AN090322 |
| |
| Page templates USING Inheritance |
| |
| A typical ASP.NET inherits from
a code behind class, which in turn inherits from the Page Class
of the .NET Framework's System.Web.UI namespace. This class
(which ultimately inherits from a class called Control) provides
all of the events, methods, and properties that the ASP.NET
runtime uses to render the page on the browser. This is shown
in Figure - 1, |
| |
Figure - 1 |
| |
| Although the .aspx page can
contain all HTML necessary to render the page, each page on
a site often contains common elements that include headers,
footers, menus, and navigation. These elements are typically
placed in server-side includes or repeated inline; in an ASP.NET
application, they are placed in Web User Controls and referenced
on each page. |
| |
| Unfortunately, these approaches
all require that the process of including the elements on all
pages. An elegant alternative is to take advantage of the inheritance
hierarchy, coupled with the event processing model of the Page
class, by creating a page template class. A page framework class
is simply one that derives from the Page class and is then used
as the base class for new forms. So now the Page hierarchy will
look like as shown in Figure - 2, |
| |
Figure - 2 |
| |
| To create a page template class,
a new class needs to be created in an application and derive
it from Page Class. Add HTML content common to every page (such
as an HTML table to produce the layout and Web User Controls),
and add handlers for the various events, such as Init and PreRender,
that programmatically create and add the appropriate controls
to the Controls collection of the page. When a form is modified
to inherit from your page template class, it will include both
the HTML rendered by the page template class and that present
in the form. |
| |
| Creating Page Template Using
Inheritance |
| |
| I have taken a sample web application
for which I need to create page templates. Page Layout for that
application is show below, |
| |
 |
| |
| This interface contains one
header with a logo image, Tool Bar. We also have Menu in the
left side. The code snippet for creating a Page Template class
for this is shown below. |
| |
| Public
Class BasePageClass
Inherits Page
' HTML title
Private _title As System.Web.UI.LiteralControl
= New System.Web.UI.LiteralControl("MSDN India")
' Stylesheet file location
' Private _styleSheet As System.Web.UI.LiteralControl
= New System.Web.UI.LiteralControl("myDefaultStyleSheet.css")
Private _styleSheet As System.Web.UI.LiteralControl
= New System.Web.UI.LiteralControl("Styles.css")
' Common site web user control.
Protected TopBar As TopBar
Protected SideMenu As SideMenu
'
Temporary control collection to hold parsed controls.
' Placeholder for the HTML HEAD section.
Protected Head As PlaceHolder = New
PlaceHolder
' Placeholder for the body/content
section of the form all controls on inheritors will
be added to Me.
Protected Body As PlaceHolder = New
PlaceHolder
' Standard form for the page
Protected MainForm As System.Web.UI.HtmlControls.HtmlForm
= New System.Web.UI.HtmlControls.HtmlForm
' Gets or sets HTML title for the
page
Protected Property Title() As String
Get
Return Me._title.Text
End Get
Set(ByVal value As String)
Me._title.Text =
value
End Set
End Property
' Gets or sets stylesheet location
Protected Property StyleSheet() As
String
Get
Return
Me._styleSheet.Text
End Get
Set(ByVal value As String)
Me._styleSheet.Text
= value
End Set
End Property
' Receives the objects parsed from
the ASPX page and adds them to a Private control collection
' <param name="obj">Parsed
object.</param>
Protected Overrides Sub AddParsedSubObject(ByVal
obj As Object)
' If this is the
first time here, instantiate our control collection
Me.Body.Controls.Add(CType(obj,
System.Web.UI.Control))
End Sub
' Page init calls Private method LoadControls,
which adds IDs to template controls, loads the TopBar
control, and defines the template
page layout
' <param name="e">Page
init event arguments</param>
Protected Overrides Sub OnInit(ByVal
e As EventArgs)
Me.LoadControls()
MyBase.OnInit(e)
End Sub
' Adds IDs to template controls, loads
the TopBar control, and defines the template page layout
Private Sub LoadControls()
' Load TopBar control this is just
an example of how to use a user control w/ the template
actual control not included in sample
Me.TopBar = CType(Me.LoadControl(Me.Request.ApplicationPath
& "/TopBar.ascx"), TopBar)
Me.SideMenu = CType(Me.LoadControl(Me.Request.ApplicationPath
& "/SideMenu.ascx"), SideMenu)
'Me.SideMenu.MyIndex = HttpContext.Current.Request.QueryString("MyIndex")
' Add IDs to template controls
Me.Head.ID = "HEAD"
Me.TopBar.ID = "TopBar"
Me.MainForm.ID = "MainForm"
Me.Body.ID = "BODY"
Me.SideMenu.ID = "SideMenu"
' ''''''
' Begin page layout
' ''''''
' Add standard HTML,
title, & stylesheet tags
AddStaticText("<!DOCTYPE
HTML PUBLIC ""-//W3C//DTD HTML 4.0 Transitional//EN"">"
& _
"<html>"
& vbCrLf & _
"<head>"
& vbCrLf & _
"<title>")
Me.Controls.Add(Me._title)
AddStaticText("</title>"
& vbCrLf & _
"<link type=""text/css""
rel=""stylesheet"" href=""")
Me.Controls.Add(Me._styleSheet)
AddStaticText(""">"
& vbCrLf)
' Add Head to the
HEAD section
Me.Controls.Add(Me.Head)
' Close Head section
open body section
AddStaticText( _
"</head>"
& vbCrLf & _
"<body>"
& vbCrLf)
Dim oTable As New
Table
oTable.Height =
New Unit(100, UnitType.Percentage)
oTable.Width = New
Unit(100, UnitType.Percentage)
'oTable.BorderWidth
= New Unit(1, UnitType.Pixel)
oTable.BorderStyle
= BorderStyle.None
oTable.GridLines
= GridLines.Vertical
Dim
oRow As New TableRow
oRow.Height = New
Unit(20, UnitType.Percentage)
Dim oCell As New
TableCell
oCell.ColumnSpan
= 2
oCell.Controls.Add(Me.TopBar)
oRow.Cells.Add(oCell)
oTable.Rows.Add(oRow)
Dim oRow1 As New
TableRow
oRow1.Height = New
Unit(80, UnitType.Percentage)
Dim oCell1 As New
TableCell
oCell1.Controls.Add(Me.SideMenu)
oCell1.Width = New
Unit(10, UnitType.Percentage)
oCell1.HorizontalAlign
= HorizontalAlign.Left
oCell1.VerticalAlign
= VerticalAlign.Top
oRow1.Cells.Add(oCell1)
Dim oCell2 As New
TableCell
oCell2.Width = New
Unit(90, UnitType.Percentage)
oCell2.Controls.Add(Me.Body)
oCell2.HorizontalAlign
= HorizontalAlign.Left
oCell2.VerticalAlign
= VerticalAlign.Top
oRow1.Cells.Add(oCell2)
oTable.Rows.Add(oRow1)
Me.MainForm.Controls.Add(oTable)
'Me.MainForm.Controls.Add(Me.Body)
Me.Controls.Add(Me.MainForm)
' close standard
body & HTML tags
AddStaticText( _
"</body>"
& vbCrLf & _
"</html>"
& vbCrLf)
End Sub
'
Helper method to add literal controls to page
Private Sub AddStaticText(ByVal
output As String)
Me.Controls.Add(New
LiteralControl(output))
End Sub
End Class |
|
| |
| This class exposes two public
properties called Title and StyleSheet. Title is used to set
the title for the page and SytleSheet property is used if any
stylesheet is required for that particular page. There are two
user controls sidemenu and topbar, which are used to implement
header and side menu in the Page Layout. Other than this there
is one place holder called Body, where all the controls are
getting added. |
| |
| If controls are added directly
to Page Controls Collection, then all these controls would not
participate in PostBack and would not raise corresponding events.
Hence for controls to participate in Postback and to maintain
its ViewState during PostBack, all the controls should be placed
in a HTML Form Server control. Hence AddParsedSubObject is overridden.
In this event handler, instead of adding controls to Page class,
we are adding to temporary control collection which is Page
Place Holder. This Page Place holder (control collection) is
then added to HTML Form Server Control. |
| |
| These controls are instantiated
in Page_Init method i.e. added to Page Controls collections.
Hence in this class Page_Init method is overridden to add controls.
In this event handler only all the HTML and elements which are
required for consistent layout across pages are added. Hence
the HTML headers are added first and then the body tag. The
layout of the page is created using Table control. The controls
(header and menu) are placed in the table layout. This Table
Control is added HTML Form Server Control. Finally the HTML
Form control is added to Page Control Collection. |
| |
| Advantages of Page Templates |
| |
| 1. |
Page Templates are very
simple to implement, developers need to inherit this base
page template class in the code behind file instead of
Page Class. |
| |
|
| 2. |
Changes required in Page
Layout can be easily done without changing all the files
in the application. |
| |
|
| 3. |
Header and Menu user controls
can be cached. Hence performance is also good. |
| |
|
| 4. |
The web pages can be bookmarked. |
|
| |
| Disadvantages of Page Templates |
| |
| 1. |
Since HTML Form, Head, body
tag is added in Page template. This should not be there
in each aspx page. |
| |
|
| 2. |
If the aspx page is not
having Body tag, then html IntelliSense would not work
properly. (however a HTML and a body tag can be added
during design and then removed later on). |
| |
|
| 3. |
Absolute positioning cannot
be used in the web page design. |
|
| |
| There are various workarounds
available for these problems. Best approach is given by Paul
in the following site: |
| |
| http://www.aspalliance.com/PaulWilson/Articles/?id=2 |
| |
| Conclusion |
| |
| Implementing page template is
very simple. The disadvantages highlighted can be solved using
various workarounds. Suggestion here is to use Page templates
for designing the screens for Web application which requires
consistent layout across its application. |
| |
| References |
| |
| |
| |
| Download
the source code
Please change the extension of the file
to .zip after downloading. |
| |
- Saravana
Kumar
Microsoft India Community Star |
