Page Templates
 
Published: 03 Sep 2002
Unedited - Community Contributed
Abstract
There are many ways to get a consistent design across your website and one of these ways is by using page templates. Basically, this involves inheriting from the Page class and implementing your own style in it. This article will take a look at how to use page templates on your site.
by . .
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 28624/ 66

Introduction

Introduction

There are many ways to get a consistent design across your website (and this is discussed in another article) and one of these ways is by using page templates. Basically that means that you are inheriting from the Page class and implementing your own style to it. This article will take a look at how you can use page templates on your site.

The Page Class and Page Templates

Your page essentially inherits from a code-behind class and that in-turn inherits from the Page class. The Page class is your ASP.NET page and when compiled, it compiles your page to an object of this class so it can run. The class contains all of the stuff needed to get your page processed and displayed.

Where do page templates fit into all of this?
Page templates are more or less inserted between the code-behind layer and the Page class layer. So going backwards -

  • You page inherits from a code-behind class
  • Which then inherits from your template class (optional)
  • Which then inherits from the Page class

If you check out the documentation for the members of the Page class, you will see numerous methods, properties and events that you have used before (most noticeably the Load event). When you inherit the Page class you essentially get to use the members to create your template and then use that template as what your code-behind inherits from.

Code-Behind Pages

Code-Behind Pages

Pages without code-behind are another story. They are compiled into a code-behind class when run, but you cannot actually tell it to inherit from another class which is why code-behind pages are better for this.

Code-behind pages are the "raw page code" and allow you to do all of this fancy inheritance from the Page class.

Take a look at your code-behind page -

Public Class cdo
Inherits
System.Web.UI.Page

You can see here that the code-behind class is just an inherited Page class as well (sure is a useful class eh?)

Well, enough of this stuff, let's get into these page classes.

Simple Page Inheritance

Simple Page Inheritance

You can probably make an educated guess at what you have to do to make a page template, but either way this first demo is going to give you a sample page for you.

Imports System
Imports
System.Web.UI
Imports
System.Web.UI.WebControls

Namespace
AGASPTemplates
Public
Class HeaderTemplate : Inherits
Page

Public
SampleText As New
Label()

Private
Sub Page_Init(ByVal sender As Object, ByVal e As
EventArgs)
Quicktext("<html><body>")
SampleText.Text = "There is no content"

Controls.Add(SampleText)
Quicktext("</body></html>")

End
Sub

Private
Sub Quicktext(ByVal text As String
)
Controls.Add(
New LiteralControl(text))
End
Sub

End
Class
End
Namespace

This looks very much like a code-behind page doesn't it? All it does is just slap together a page with a Label on it. If we add it directly as a code-behind, it will look like :

<%@ Inherits="AGASPTemplates.HeaderTemplate" Src="TemplateCode.vb" %>

Live Demo

In case you are not familiar with that line of code -

  • Inherits specifies the Page class to inherit the code from.
  • Src specified the code file to dynamically compile (with the inherited code in it). This saves you from re-compiling the file into a library every time you make a change.

 

Code-Behind Inheritance

Code-Behind Page Inheritance

Now what about code-behind pages? Well, they are basically exactly the same. See the sample below.

Public Class CodeBehind : Inherits HeaderTemplate
Public
Sub Page_Load(ByVal sender As Object, ByVal e As
EventArgs)
MyBase
.SampleText.Text = "Hello there"
End
Sub
End Class

This is part of the same namespace that you created before. If you run it on an ASPX page like

<%@ Inherits="AGASPTemplates.CodeBehind" Src="TemplateCode.vb" %>

Live Demo

Now, if you look at the demo, you will see that there is a problem. The page still shows - "This is a page template sample" on it. This is because of the page execution order.

A bit more...

A bit more

Take a look at the next piece of code.

Imports System
Imports
System.Web.UI
Imports
System.Web.UI.WebControls

Namespace
TemplatedDesign
Public
Class PageTemplate : Inherits
Page
Public
title As New
PlaceHolder()
Public
body As New
PlaceHolder()

Public
Sub Page_Init(ByVal sender As Object, ByVal e As
EventArgs)
QuickText("<html><head>")
Controls.Add(title)
QuickText("</head><body>")
Controls.Add(body)
QuickText("</body></html>")

End
Sub

Public Sub QuickText(ByVal text As String)
Controls.Add(
New LiteralControl(text))
End
Sub

End Class

Public Class CodeBehind : Inherits PageTemplate

Public
Sub Page_Load(ByVal sender As Object, ByVal e As
EventArgs)
MyBase
.title.Controls.Add(New
LiteralControl("<title>Template Test</title>"))
MyBase
.body.Controls.Add(LoadControl("samplecontrol.ascx"))
End
Sub

End Class

Public Class UserCodeBehind : Inherits UserControl

Public WithEvents Things As RadioButtonList
Public
WithEvents SelThing As
Label

Public Sub EventHappen(ByVal sender As Object, ByVal e As EventArgs)
SelThing.Text = "You selected : " & Things.SelectedItem.Text

End
Sub

End Class
End
Namespace

 

 

A bit more... (cont.)

A bit more (cont.)

That code included a base template, a code-behind file and a user control's code-behind file.

The basic template creates the HTML tags and then the code-behind populates them. The code-behind also calls LoadControl which then loads the user control to the page. The UserCodeBehind class then takes care of the user control and the event that happens inside it.

User control code -

<%@ Control Inherits="TemplatedDesign.UserCodeBehind" Src="full1.vb" %>
<form runat="server">
<P>
<asp:Label id="SelThing" runat="server"></asp:Label></P>
<P>
<asp:RadioButtonList AutoPostBack="True" OnSelectedIndexChanged="EventHappen" id="Things" runat="server">
<asp:ListItem Value="Apples">Apples</asp:ListItem>
<asp:ListItem Value="Pears">Pears</asp:ListItem>
<asp:ListItem Value="Mangos">Mangos</asp:ListItem>
<asp:ListItem Value="Spikey Fruit">Spikey Fruit</asp:ListItem>
</asp:RadioButtonList></P>
</form>

See the demo here.

Forms

Forms

You may (well, should have) taken a look at that code and said - "Hey, why is the form tag inside the user control" (or something to that effect). Well, yes, the form is inside the user control and this will cause problems if you want to have other web server controls on the page.

However there is the HtmlForm class to the rescue.      

Imports System.Web.UI.HtmlControls
...

Public
webform As New HtmlForm()
...
Controls.Add(LoadControl("samplecontrol.ascx"))

That should solve all of your problems with that.

Summary

Well, this article should have been detailed enough to show you the basics of creating a page template and it should be obvious how they can benefit your site. If in doubt, check out my other article, Consistent Website Design, on the topic.



User Comments

No comments posted yet.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-03-01 5:39:07 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search