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
