User Controls for Page Templates
page 1 of 1
Published: 22 Jun 2002
Unedited - Community Contributed
Abstract
An example using ASP.NET User Controls to create simple site-wide page templates.
by Steve Sharrock
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 27005/ 35

User Controls for Page Templates

ASP.NET offers User Controls that are both easy to create and easy to use. However, when web developers familiar with "include" files and other page template techniques start using ASP.NET, it's easy to miss this rather simple solution for providing site-wide page templates. The intent of this article isn't to spend much time explaining ASP.NET User Controls, but rather illustrate an example of their use.

First look at a simple basic HTML page layout that is fairly common. It includes an HTML Table with two rows and three columns. The top row is used to display a site banner (colspan=3), and the second row contains a centered "content" column with a navigation menu-bar on the left and an empty place-holder bar on the right. To illustrate this I've colored each of the table elements differently in the following basic HTML page.

View basic template page

The challenge is how to create a User Control that will break the layout table into two parts allowing you to insert your page's main content within the second column of the second row. The technique we'll use is to create two User Controls; the first produces the "top" of the page and appears before any page content. The second User Control produces the "bottom" of the page and appears following the page's main content. This is a very simple implementation of the same technique used to create these articles here at ASPAlliance, except that on the ASPAlliance site the source text for each control is obtained from a Web Service when the page is loaded.

Top User Control

The first "top" User Control creates the first part of our layout table including the top banner and the navigation side bar. Since we don't want an incomplete <TABLE> at design-time in our User Control (that  breaks off midway in the second row), we use two ASP.LITERAL controls above and below a <DIV> containing the <A> links in our side-bar navigation menu. The TopCtrl.ascx page contains:

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="TopCtrl.ascx.cs"
    Inherits="shark.articles.UserCtrlTemplates.TopCtrl"
    TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<asp:literal id="TopLit" runat="server"></asp:literal><br>
<div style="MARGIN-TOP: 2em; MARGIN-BOTTOM: 2em; MARGIN-RIGHT: 1em;
      TEXT-ALIGN: right">
   <a href="">ASPAlliance</a><br>
   <a href="http://www.microsoft.com">Microsoft</a>
</div>
<a href="http://www.asp.net"><img height="47"
    src="http://www.asp.net/images/poweredbyaspnet.gif" width="109" border="0"></a>
<asp:literal id="BotLit" runat="server"></asp:literal></A>

We create the text for the two Literal Controls in the Page_Load method of the TopCtrl class. Each piece of the <TABLE> structure is simply assigned to the Text property of the Literal Controls that surround the <DIV> navigation elements.

  protected System.Web.UI.WebControls.Literal TopLit;
  protected System.Web.UI.WebControls.Literal BotLit;
  
private void Page_Load(object sender, System.EventArgs e)
{
  TopLit.Text =
   "<TABLE id='TmpltTbl' height='100%' cellSpacing='0' cellPadding='0'" +
   "     width='100%' border='0'>\n" +
   "  <TR bgcolor='Moccasin'>\n" +
   "    <TD valign='middle' align='center' height='80' colspan='3'>\n" +
   "      <div style='width: 100%; filter:shadow(color=Goldenrod)'>\n" +
   "      <h1><em>Bob's Code Shop</em></h1></div>\n" +
   "    </TD>\n" +
   "  </TR>\n" +
   "  <TR valign='top'>\n" +
   "    <TD bgcolor='Gold' width='10%'>\n";

  BotLit.Text =
   "    </TD>\n" +
   "    <TD bgcolor='Ivory' width='400'>\n";
}

Bottom User Control

The user control that creates the bottom of the page needs only to close the template's layout table following the page's main content. The User Control contains only one ASP:LITERAL that gets set in the Page_Load method of the BotCtrl class.

protected System.Web.UI.WebControls.Literal FinalLit;

private void Page_Load(object sender, System.EventArgs e)
{
  FinalLit.Text =
   "</TD>\n" +
   "    <TD bgcolor='Goldenrod' width='10%'> </TD>\n" +
   "  </TR>\n" +
   "</TABLE>\n";
}

Using the Template

The final step is to include our two User Controls in a sample page as a template to render our layout-table surrounding our content. For this we simply add a new Web Form to our project and include the TopCtrl before our content and the BotCtrl as the last element on the new form. Using Visual Studio, all we need to do is drag the TopCtrl.ascx and BotCtrl.ascx pages onto the design surface of our new Web Form.

<%@ Register TagPrefix="uc1" TagName="TopCtrl" Src="TopCtrl.ascx" %>
<%@ Register TagPrefix="uc1" TagName="BotCtrl" Src="BotCtrl.ascx" %>

<body>
<form id="TestPage" method="post" runat="server">
<uc1:TopCtrl id="TopCtrl1" runat="server"></uc1:TopCtrl>
<P>This is my test page that begins with a TopCtrl and finishes
with a BotCtrl. The main content here is surrounded with the table-layout
producing our top banner and side-bars.</P>
<uc1:BotCtrl id="BotCtrl1" runat="server"></uc1:BotCtrl>
</form>
</body>

The final test page using our template controls is very easy to create. You can view the final page here:

View the final template

Summary

This is a simple example that hopefully will point new ASP.NET developers toward relying on User Controls, rather than "include files" or other template techniques. Of course a lot could be added to our sample. Here are a few ideas for enhancement.

  • Use a more sophisticated navigation menu, perhaps a TreeView Control.
  • Make the menu items dynamic by examining a "property" of the TopCtrl that can be set as an attribute in the User Control tag.
  • Get the tables to work properly on Netscape 6 (hint - 100% height is an issue).
  • Use the AdRotator to shuffle some images in the right side-bar.
  • Most important of all, have fun experimenting with ASP.NET.

While I hope the article and examples are self-explanatory, you can download the files for further examination here:

UserCtrlTemplates.zip

Send your comments and let me know what you think of this article: steve@sharkcode.com

Steve Sharrock -   www.AspAlliance.com/shark / www.SharkCode.com



User Comments

Title: one query   
Name: zubin
Date: 2006-12-29 12:14:04 PM
Comment:
This article is nice.
i h've got a query
Can we include .ascx file in asp page?
please do mail me in zubinjoshi@gmail.com
Thanks in advance..
Title: If caller is running on IIS5.0 and Usercontroller is running on IIS6.0?   
Name: Lhq
Date: 2006-12-18 4:38:09 PM
Comment:
Hi, Steven

This is fantastic!

Do you know if caller is running on IIS5.0 and ASP.NET Usercontrol is running on IIS6.0, Does it still work?

You reply would be highly appreciated!

Bestt regards
Lhq
Lynn_lin1999@hotmail.com
Title: Very good article   
Name: Kalpesh
Date: 2006-12-07 1:09:51 AM
Comment:
Hi Steve,
Thanks for written such nice article.
I really help it a lot.
Its that I looking for.
Thanks again..!

-Kalpesh
Title: User control page template   
Name: Hoang
Date: 2006-06-25 10:41:03 PM
Comment:
i am feel very nice. thanks you so much
Title: Excellent !!   
Name: sai
Date: 2006-04-19 12:23:36 AM
Comment:
Really a very excellent article..
Title: web page template   
Name: Bob
Date: 2006-03-29 4:41:20 PM
Comment:
Fantastic!

Was thinking of implementing frames in my ASP.Net pages but then found your article, a much more practical solution!

Very well explained!!
Title: Thanks!   
Name: Ajmr
Date: 2006-02-03 4:52:08 PM
Comment:
That's just what I was looking for. Plain and simple!






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2017 ASPAlliance.com  |  Page Processed at 2017-09-21 4:38:40 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search