by . .
Feedback
|
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days):
31156/
48
|
|
|
|
| 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.
|
|
|
|
|
|
Product Spotlight
|
|
|
