Using UserControls as templates for web pages

Use this class instead of the System.Web.UI.Page class to use a custom control as a template for the pages of your site. The class works basically by moving the controls from the custom control to the page and the controls from the page to a container control in the custom control.

How do I use it?

First create a custom control (ascx) with the HTML for the template (the whole HTML page including the <form runat="server"> tag). In this template you have to add a control that will be used as a container for the aspx pages. It can be any control (div, span, table cell) and must have the runat="server" attribute.

Template Sample

<%@ Control Language="vb" AutoEventWireup="false" Codebehind="template.ascx.vb" 
    Inherits="WebTemplate.Template" 
    TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>$Title$</title>
</head>
<body>
  <form id="TemplateForm" method="post" runat="server">
    <h1>$Title$</h1>
    <div runat="server" id="content"></div>
  </form>
</body>
</html>

In this sample the div with id="content" will be used as the container for the pages. The template works like any other custom control. You can add server controls to it and catch their events in the codebehind class. Also note that there are three "template variables": $Title$, $Url$ and $App$. These "variables" are replaced with the page title, the page url and the application path before the page is sent to the cliente. You can use them in any part of the html (for example you can use $App$ in the src attribute of a image tag).

To use the template from application pages inherit the page from Edanmo.Web.UI.TemplatePage instead of System.Web.UI.Page. Since TemplatePage inherits from System.Web.UI.Page you won't have to change anything in the page code. After you have changed the parent class you can edit your pages in the designer as usual (the template won't be shown by the designer). Using the properties window you can set the following properties:

The Title property is the value that will be used for $Title$ template variable. If you don't set it the title will be get from the <title> tag of the page.

Use ContainerId property to set the Id of the control in the template that will be used as the page container. The default value is "content". If you left it empty the <form> tag will be used as the container.

The TemplatePath property contains the virtual path to the template ascx file. The default is "~/template.ascx".

How it works

In the OnInit method of the page, after the base method is called the template control is loaded. After the custom control is loaded I get the container control from its controls collection. Then all the child controls of the page <form> are moved to the container control. After all the controls are in the template control the page controls collection is cleared and the template control is added to it. The final step is to set the response filter that will replace the template variables before the page is sent to the client.

Using UserControls as templates for web pages.

How do I use it?

How it works