Home arrow ASP.NET arrow Page 2 - Easy ASP.NET Page Templates

Easy ASP.NET Page Templates

It's a good idea to keep highly reused code seperate from your page content. In this article John shows us everything we need to know to get started with templates in our ASP.NET pages... the easy way!

Author Info:
By: John Rebbeck
Rating: 4 stars4 stars4 stars4 stars4 stars / 259
December 29, 2002
  1. · Easy ASP.NET Page Templates
  2. · ASP.NET Pages
  3. · Implementing Multiple Editable Regions
  4. · JavaScript
  5. · Conclusion

print this article

Easy ASP.NET Page Templates - ASP.NET Pages
(Page 2 of 5 )

An ASP.NET web form consists of 2 files by default -- the .aspx file, which usually contains the design (in HTML format) and the code-behind .aspx.cs (or .aspx.vb, etc. depending on the language you use) file, which usually contains the functionality as C#, VB.NET, or other .NET compatible code. The .aspx file inherits the .aspx.cs file which in turn inherits the System.Web.UI.Page class.

To add consistent functionality or design using ASP.NET page templates, you create a custom based Page class that inherits System.Web.UI.Page and then have all of your .aspx.cs file classes inherit it.

This effectively adds a layer between the System.Web.UI.Page and your front-end pages, thus giving you the ability to add consistency throughout your web site as well as custom functionality.

The following image compares the class inheritance of the default and the template page class structures:

Introduction to a Basic Template
Using the basic template technique, the base Page class renders all

<title>[Website Name]</title>
<form action=”ThisPage.aspx” method=”Post”>



...HTML code, so it must be removed from the actual ASPX pages. The base Page also renders all common controls and interface features as well as providing and/or executing common functionality.

The ASPX page will contain only the <%@ Page … %> directive and a control with the ID set to something specific that is recognized by the base Page class (my preferred is 'Main'). Multiple controls with different names can also be used or multiple controls in the same region can be grouped by a Panel or a PlaceHolder control. Set this up to suit your application and page layout.

The CreateChildControls method of the base Page class executes custom code that searches the derived page for controls with the chosen IDs and if found adds them to the desired location.

Building a Basic Template
Create a new class called Page, BasePage, CustomPage, or whatever you want to call it and make it inherit the System.Web.UI.Page class:

public class Page : System.Web.UI.Page

Set all your pages' code-behind classes to inherit this class:

public class MyPage : Page

Declare a HtmlForm control and all common controls (Header, Footer, etc.) as fields in the base Page class.

Override the CreateControlsMethod and add code to programmatically build all the base controls on the page, then search for controls with IDs matching the chosen control IDs (i.e. 'Main') and add them to the desired locations. Note that in this example the editable region control is being added to the Form properties Controls collection. Controls can be added to any controls collection of virtually control whether it be in your form, your footer, your header, a side column, below a menu, anywhere at all.

Override the Render method to render the base HTML tags (ie. <head>, <title>, <body>, <form>, etc.) and to render the contents of the page between the body tags:

// Libraries in use.
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace Example.Web.UI
public class Page : System.Web.UI.Page
// Fields and Properties
protected HtmlForm Form = new HtmlForm();
protected Table Header = new Table();
protected Table Footer = new Table();

// Constructor.
// ...

// Overridden CreateChildControls method.
protected override void CreateChildControls();
// Form.

// Header.
this.Header.Rows.Add(new TableRow());
this.Header.Rows[0].Cells.Add(new TableCell());
this.Header.Rows[0].Cells[0].Text = “[Header Text]”;
this.Header.Rows[0].Cells[0].CssClass = “PageHeader”;

// Main region.
Control main = this.FindControl(“Main”);
if (main != null)

// Footer.
this.Footer.Rows.Add(new TableRow());
this.Footer.Rows[0].Cells.Add(new TableCell());
this.Footer.Rows[0].Cells[0].Text = “[Footer Text]”;
this.Footer.Rows[0].Cells[0].CssClass = “PageFooter”;

// Continue base implementation.

// Overridden Render method.
protected override void Render(HtmlTextWriter writer)
// Render the start HTML.
<title>[Website Title]</title>

// Render the page contents.

// Render the end HTML.

Using the Basic Template
In the ASPX, page remove all default HTML leaving only the <%@ Page … %> directive. Add controls with IDs matching the chosen control IDs (ie. ‘Main’) and add all page specific content content:

<%@Page ... >
<asp:Panel ID=”Main”>
add your page specific content here...
notice the ID of the panel

blog comments powered by Disqus

- How Caching Means More Ca-ching, Part 2
- How Caching Means More Ca-ching, Part 1
- Reading a Delimited File Using ASP.Net and V...
- What is .Net and Where is ASP.NET?
- An Object Driven Interface with .Net
- Create Your Own Guestbook In ASP.NET
- HTTP File Download Without User Interaction ...
- Dynamically Using Methods in ASP.NET
- Changing the Page Size Interactively in a Da...
- XML Serialization in ASP.NET
- Using Objects in ASP.NET: Part 1/2
- IE Web Controls in VB.NET
- Class Frameworks in VB .NET
- Cryptographic Objects in C#: Part 1
- Sample Chapter: Pure ASP.Net

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials