Easy ASP.NET Page Templates - Implementing Multiple Editable Regions
(Page 3 of 5 )
The basic template technique allows you to have 1 area that is editable by the page, but what if you want to have multiple?
All you need to do is to decide on the ID/name of your new editable regions, then tell your base Page class to recognise, retrieve, and render them in the right position (just like in the first example), then add new controls to your ASPX file that use the chosen IDs:
// Libraries in use.
// ...
namespace Example.Web.UI
{
public class Page : System.Web.UI.Page
{
// Fields and Properties.
// ...
protected Table Middle = new Table();
protected TableCell LeftColumn = new TableCell();
protected TableCell CenterColumn = new TableCell();
protected TableCell RightColumn = new TableCell();
// Constructor.
// ...
// Overridden CreateChildControls method.
protected override void CreateChildControls();
{
// Form.
// ...
// Header.
// ...
// Middle.
this.Middle.Rows.Add(new TableRow());
this.Middle.Rows[0].Cells.Add(this.LeftColumn);
this.Middle.Rows[0].Cells.Add(this.CenterColumn);
this.Middle.Rows[0].Cells.Add(this.RightColumn);
// Left column region.
Control leftCol = this.FindControl(“LeftCol”);
if (leftCol != null)
this.LeftColumn.Controls.Add(leftCol);
// Main region.
Control main = this.FindControl(“Main”);
if (main != null)
this.CenterColumn.Controls.Add(main);
// Right column region.
Control rightCol = this.FindControl(“RightCol”);
If (rightCol != null)
this.RightColumn.Controls.Add(rightCol);
// Footer.
// ...
// Continue base implementation.
// ...
}
// Overridden Render method.
// ...
}
} Example:
<%@Page ... >
<asp:Panel ID=”LeftCol”>
this will show up on the left
</asp:Panel>
<asp:Panel ID=”Body”>
this will show up in the center
</asp:Panel>
<asp:Panel ID=”RightCol”>
this will show up on the right
</asp:Panel> Now that we have our editable regions rendering our page specific content appropriately in the page template, we should add a few more useful features such as changeable page title, managed StyleSheets, JavaScript, etc.
Page Title To allow the page title to change for different pages, you just have to set up a private string field called title with a default value (i.e. Your web site name), a protected string property called Title to reference it, then on your page you can either leave it the default or change it specifically for that page.
In the Render method, instead of rendering a hard-coded value as your title, we will replace it with a reference to the private title field which contains the desired page title.
An unfortunate implication of having the title set up like this is that you must set the value programmatically on your page rather than in HTML view -- it's nothing to worry about though:
// Libraries in use.
// ...
namespace Example.Web.UI
{
public class Page : System.Web.UI.Page
{
// Fields and Properties.
// ...
private string title = “Welcome to My Website!”;
protected string Title
{
get { return this.title; }
set { this.title = value; }
}
// Constructor.
// ...
// Overridden CreateChildControls method.
// ...
// Overridden Render method.
protected override void Render(HtmlTextWriter writer)
{
// Render the start HTML.
writer.Write(“<html>
<head>
<title>{0}</title>
</head>
<body>”,
this.title);
// Render the page contents.
// ...
// Render the end HTML.
// ...
}
}
} For information on using string formats (used in the above example to add the page title between the <title> tags in the Render method) look up string formatting.
Cascading StyleSheets Why do we add stylesheets to every page when every page uses the same stylesheet most of the time? To add managed stylesheets, we will want a couple of common ones to be automatically added by our page template but we also want the ability to add page specific ones if necessary.
To hold the stylesheets that have been added to the page, we will use a StringCollection from the System.Collections.Specialized namespace. Add a private StringCollection field to the base Page class, add a protected property to reference it and then add the functionality in the Render method to compile this list into HTML references and render them along with everything else:
using System;
using System.Collections.Specialized;
using System.Text;
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
{
protected HtmlForm Form = new HtmlForm();
// Fields and Properties.
// ...
private StringCollection styleSheets = new StringCollection();
protected StringCollection StyleSheets
{
get { return this.styleSheets; }
set { this.styleSheets = value; }
}
// Constructor.
// ...
// Overridden CreateChildControls method.
// ...
// Overridden Render method.
protected override void Render(HtmlTextWriter writer)
{
// Compile the list of StyleSheets.
StringBuilder styleSheetsBuilder = new StringBuilder();
foreach (string styleSheet in this.styleSheets)
{
styleSheetsBuilder.Append(“<LINK href='”);
styleSheetsBuilder.Append(“[MyCssDirectory]”);
styleSheetsBuilder.Append(styleSheet);
styleSheetsBuilder.Append(“' type='text/css' rel='stylesheet'>”);
}
// Render the start HTML.
writer.Write(“<html>
<head>
<title>{0}</title>
{1}</head>
<body>”,
this.title,
styleSheetsBuilder.ToString());
// Render the page contents.
// ...
// Render the end HTML.
// ...
}
}
}Next: JavaScript >>
More ASP.NET Articles
More By John Rebbeck
/ 88 
