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
<html>
<head>
<title>[Website Name]</title>
</head>
<body>
<form action=”ThisPage.aspx” method=”Post”> and
</form>
</body>
</html> ...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.
this.Controls.Add(this.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”;
this.Form.Controls.Add(this.Header);
// Main region.
Control main = this.FindControl(“Main”);
if (main != null)
this.Form.Controls.Add(main);
// 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”;
this.Form.Controls.Add(this.Header);
// Continue base implementation.
base.CreateChildControls();
}
// Overridden Render method.
protected override void Render(HtmlTextWriter writer)
{
// Render the start HTML.
writer.Write(“<html>
<head>
<title>[Website Title]</title>
</head>
<body>”);
// Render the page contents.
base.Render(writer);
// Render the end HTML.
writer.Write(“</body>
</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
</asp:Panel>Next: Implementing Multiple Editable Regions >>
More ASP.NET Articles
More By John Rebbeck
/ 62 
