Click here to Skip to main content
15,125,351 members
Articles / Web Development / ASP.NET
Posted 19 Sep 2002


304 bookmarked

ASP.NET Page Templates - Using Inheritance

Rate me:
Please Sign up or sign in to vote.
4.76/5 (135 votes)
19 Sep 20028 min read
A tutorial showing how to create page templates that use object-oriented inheritance.

Page Inheritance Class Diagram


Anyone who has developed commercial websites has run into the problem of creating a template for the site. For most sites a large percentage of the HTML is the same or similar for all pages. The header, navigation, and footer elements of a typical site layout appear on almost every page.

Some developers will put that markup in every page's source file. Anyone who's had to maintain a site put together this way knows how difficult it is to make site-wide changes. You end up depending on massive search and replace operations, which can be difficult to do without creating markup errors that require hand-tuning to repair.

In traditional ASP programming, like many other server-based programming environments, this was typically solved using an include file. The page is divided into logical sections representing the header, left navigation, body, and footer elements. A separate include is created for each of the common elements and the body section is placed in the actual ASP page. The page then includes the appropriate files to build up the look and feel of the page. This is a significant improvement over the previous approach, but still creates a few maintenance problems.

First of all, the individual ASP files must contain the code necessary to include the correct support files. This makes each page's content strongly coupled to the site's template. It also means that when you add a new page to the site, you must remember to setup all the correct includes in the right order.

An additional problem happens when you decide to make a significant look-and-feel change to the site. If you're lucky, you may be able to make all of your changes in the include files. Most of the time, however, the tight coupling between the include files and the ASP pages means that you end up having to edit each and every ASP page as well.

With the introduction of ASP.NET, developers have been giving a powerful new set of tools to help resolve these problems. ASP.NET uses an object-oriented development paradigm. In practical terms this means that every page is a class that derives from System.Web.UI.Page. This class provides a number of services to the web developer including caching, rendering, response and request access, etc.

So the question is: How can we best take advantage of the object-oriented nature of ASP.NET when creating websites? Is there a better way to create templates than using include-files?

Web User Controls

One of the first things a developer notices when getting started with ASP.NET is that a new style of control has been introduced: Web User Controls. User Controls allow a developer to encapsulate a common chunk of HTML or server-side code into a component that can be reused on many different pages.

User controls are not used in a page using the #include directive. Instead that are either placed in the ASPX file as a custom tag (with the Register directive) or from server-side code with the LoadControl statement.

This article is not going to go into the details of creating and using User Controls; there are many other sources that cover that topic. They are, however, and improvement over the old include-file approach and deserved mention here.

They don't solve all of the problems discussed above though. If, for example, you encapsulate your page header in a user control, you still have to remember to use it on each and every page in the site. If you decide you need to add another user control to another part of your site, then once again you end up editing every page to get that user control embedded.

Also, depending on the layout of the pages in your site, you may end up having some formatting or positioning markup in each page to make sure that the User Control is exactly where you want it on the page. This markup is common to every page and we should be able to find a way to have that code exist in only one place.

Simple Page Inheritance

If you're familiar with object-oriented programming then you are probably already seeing something familiar. When you have a chunk of code that occurs in more than one class, it is common practice to refactor that code by creating a base class and moving that code "up" one level in the inheritance chain. Why not do that here?

Since all ASPX pages derive from System.Web.UI.Page, we should be able to create a base class that sits between our page class and the Page class. This class will be responsible for producing the template used in our site. Then our page classes will derive from the base class and will only contain the markup and server controls needed for their specific task. To illustrate this, let's create an example base class called PageBase and then derive a page class from it. (All of the examples in this article are written in C#, but you should easily be able to convert them to VB.NET or any other .NET language.)

using System;
using System.Web.UI;
public class PageBase : System.Web.UI.Page
    private string _pageTitle;
    public string PageTitle
        get { return _pageTitle; }
        set { _pageTitle = value; }

    protected override void Render(HtmlTextWriter writer)
        // First we will build up the html document, 
        // the head section and the body section.
        writer.Write( @"
                    <title>" + PageTitle + @"</title>
                <body>" );

        // Then we allow the base class to render the 
        // controls contained in the ASPX file.
        base.Render( writer );

        // Finally we render the final tags to close
        // the document.
        Writer.Write( @"
            </html>" );

Let's take a look at a few interesting points illustrated in this base class. First of all, we expose a property called PageTitle that will contain the title for the page. This property's contents are written out in the <title> section of the page. Also notice the '@' symbol used before the string literals. While not explicitly required for this example, the '@' symbol is a C# token that says the following string literal should not have escape sequences expanded. If we didn't do this, we would have to escape our slash characters. If you are working in VB.NET you don't have to worry about this.

Now we will create an ASPX page that derives from PageBase. I'll be using code-behind pages, so we have two files. The first file has a file extension .ASPX and contains the markup for the page.

<%@ Page language="c#" Codebehind="SimplePageInheritance.aspx.cs" AutoEventWireup="false" 
       Inherits="SimplePageInheritance" %>
<form id="SimplePageInheritance" method="post" runat="server">
    <h1>This is Page 1</h1>
        This page demonstrates Simple Page Inheritance where the content is rendered 
        using the base class' Render() method. You cannot use Server Controls that 
        postback in the base class, they can only be used in the .ASPX page itself.

Notice that there is no markup for "standard" content like <html>, <head> and <body> because they will be rendered in the base class. The code-behind class defines the SimplePageInheritance class referenced in the Page declaration.

public class SimplePageInheritance : PageBase
    public SimplePageInheritance()
        PageTitle = "Simple Page Inheritance";

Pretty cool, eh? This solution solves all of the problems with include-based templates mentioned earlier. For some situations, however, it doesn't solve everything. For those we need Advanced Page Inheritance.

Advanced Page Inheritance

The biggest problem with the Simple Page Inheritance system is that you cannot put any server controls that cause a post-back in the template base class. The reason for this is related to the position of the <form> tag. In Simple Page Inheritance, the <form> tag is included in the derived ASPX page. Therefore any markup rendered by the base class will be either before or after the ASPX file markup. This might occur if, for example, we wanted a search system included in the template.

There are many different ways we could solve this problem. For this example, we will move the <form> tag from the ASPX file to the base class. We can't just render the <form> tag as a string literal either, because in ASPX files, the form is actually processed on the server before the markup is sent to the browser. So we have to create a Form object and insert it into the Controls collection of the page.

using System;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;    
public class AdvancedPageInheritanceBase : System.Web.UI.Page
    protected override void OnInit(System.EventArgs e)
        BuildPage( GenerateHtmlForm() );

    protected void BuildPage( HtmlForm form )
        // Build the page and include the generated form

        this.Controls.AddAt( 0, new LiteralControl( @"
                    <title>" + PageTitle + @"</title>
            ") );

        this.Controls.Add( form );

        this.Controls.Add( new LiteralControl( @"

    private HtmlForm GenerateHtmlForm()
        HtmlForm form = new HtmlForm();
        return form;

    private void AddSearch( HtmlForm form )
        searchBox = new TextBox();
        Button searchButton = new Button();
        searchButton.Text = "Search";
        searchButton.Click += 
            new EventHandler( this.OnSearchButtonClicked );
        form.Controls.Add( searchBox );
        form.Controls.Add( searchButton );
        form.Controls.Add( new LiteralControl("<br>") );

    protected void OnSearchClick( object sender, EventArgs e )
        // Do the search here

    private void AddControlsFromDerivedPage(HtmlForm form)
        int count = this.Controls.Count;
        for( int i = 0; i<count; ++i )
            System.Web.UI.Control ctrl  = this.Controls[0];
            form.Controls.Add( ctrl );
            this.Controls.Remove( ctrl );

Remember that I said there are many ways to solve the <form> tag placement problem. In this solution we create an HtmlForm control, populate it with the contents of the ASPX page and then insert it into the template.

This system works very well and allows us to create ASPX pages that are completely independent of the template. Here is the ASPX file:

<%@ Page language="c#" Codebehind="AdvancedPageInheritance.aspx.cs" 
       Inherits="PageInheritanceSample.AdvancedPageInheritance" %>
<h1>Advanced Page Inheritance</h1>
<p>This demonstrates the Advanced Page Inheritance Technique.</p>

The code-behind file is no different than the one used in the Simple Page Inheritance example. Notice that our ASPX file doesn't have a <form> tag in it.


I was surprised to find that there is almost no performance difference when using page inheritance. Using Microsoft Application Center Test, I ran page load tests on three different versions of similar page structures:

  • The first page used user controls to encapsulate the header, left navigation and footer sections. It did not use any page inheritance.
  • The second page had the same look & feel and the same content but used the method outlined in Simple Page Inheritance.
  • The third page had a similar look & feel (it included a search box like in the example code) and used the method outlined in Advanced Page Inheritance.

The following table shows the results after loading each page continuously for 5 minutes on my development workstation. As you can see, the differences are minimal.

Page # of Requests Avg. Response Time (ms) Avg. Requests per Sec.
WebUserControl.aspx 16,693 10.53 55.64
SimplePageInheritance.aspx 16,636 10.54 55.45
AdvancedPageInheritance.aspx 16,965 10.20 56.55


Developing websites and web applications that are easy to maintain has always been a challenge. Over time the techniques used have evolved from almost nothing to modern object-oriented techniques like those presented in this article. These techniques can be used by anyone with a basic understanding of object-oriented programming and will almost certainly help you produce better factored, easier to maintain code.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Peter Provost
Web Developer
United States United States
Peter Provost has been programming computers since he was 10 years old. Currently a C# and C++ junkie, he has been developing on the Windows platform since Windows 286.

Peter is a Software Design Engineer with Microsoft's patterns and practices team where he works on guidance for .NET developers.

Peter maintains an active weblog about technology, .NET and other interesting stuff at

Comments and Discussions

Questionabout html form on submit Pin
Wildhorsend8-Jul-12 22:24
MemberWildhorsend8-Jul-12 22:24 
Questionthe house boat Pin
varsha( 22:51
Membervarsha( 22:51 
QuestionCan u Tell me where is main function Pin
prateekfgiet5-Dec-11 19:40
Memberprateekfgiet5-Dec-11 19:40 
Generalklkl Pin
VidishaPatel20-Apr-11 2:21
MemberVidishaPatel20-Apr-11 2:21 
GeneralSMS server Pin
SaranRam23-Dec-08 21:40
MemberSaranRam23-Dec-08 21:40 
GeneralRe: SMS server Pin
suresh_kumar_s2-May-10 22:08
Membersuresh_kumar_s2-May-10 22:08 
GeneralRe: SMS server Pin
prateekfgiet5-Dec-11 19:38
Memberprateekfgiet5-Dec-11 19:38 
Questiongridview Pin
kpg1231-Jun-08 8:20
Memberkpg1231-Jun-08 8:20 
GeneralA page with multiple code files Pin
supreetkaur1-May-08 1:11
Membersupreetkaur1-May-08 1:11 
QuestionDesign time support for (persistent) custom properties? Pin
Vladimir Kelman18-Apr-08 14:11
MemberVladimir Kelman18-Apr-08 14:11 
GeneralUsing parts of code in a demo Pin
chris_ashford27-Feb-08 13:34
Memberchris_ashford27-Feb-08 13:34 
QuestionError 50 The type or namespace name 'PageBase' could not be found (are you missing a using directive or an assembly reference?) Pin
remoteportal26-Oct-07 11:26
Memberremoteportal26-Oct-07 11:26 
GeneralRe: Error 50 The type or namespace name 'PageBase' could not be found (are you missing a using directive or an assembly reference?) Pin
edzus200723-Apr-08 16:50
Memberedzus200723-Apr-08 16:50 
QuestionConstructor Arguments in Base Class? Pin
kmerrell18-Sep-07 11:30
Memberkmerrell18-Sep-07 11:30 
Questionabout literal control Pin
shiv_bahadur21-Feb-07 3:30
Membershiv_bahadur21-Feb-07 3:30 
AnswerRe: about literal control Pin
Hainesy828-Mar-07 22:41
MemberHainesy828-Mar-07 22:41 
GeneralASP.NET Page Templates - Using Inheritance [modified] Pin
GeniousSal30-Nov-06 2:37
MemberGeniousSal30-Nov-06 2:37 
Questionbody on load ="MyFuction();" Pin
Sebastian Luis4-Jul-06 18:58
MemberSebastian Luis4-Jul-06 18:58 
GeneralControls count gives another result than the number of Items in Controls Pin
HouseDude9-Jun-06 7:29
MemberHouseDude9-Jun-06 7:29 
GeneralDifficult implementation Pin
Arch4ngel5-Apr-06 11:54
MemberArch4ngel5-Apr-06 11:54 
GeneralRe: Difficult implementation Pin
Hainesy829-Mar-07 2:14
MemberHainesy829-Mar-07 2:14 
GeneralUpdate for .NET 2.0 - Master Pages Pin
Tim Abell21-Dec-05 23:39
MemberTim Abell21-Dec-05 23:39 
GeneralAny idea about creating and adding the pages at runtime. Pin
sinanju8-Dec-05 16:36
Membersinanju8-Dec-05 16:36 
QuestionWhat happens to the HTML in the base? Pin
Anonymous18-May-05 8:47
MemberAnonymous18-May-05 8:47 
GeneralProblems with dynamic table controls Pin
ignusfast16-May-05 15:34
Memberignusfast16-May-05 15:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.