Home arrow ASP.NET arrow Page 3 - Easy ASP.NET Page Templates
ASP.NET

Easy ASP.NET Page Templates


It's a good idea to keep highly reused code seperate from your page content. In this article John shows us everything we need to know to get started with templates in our ASP.NET pages... the easy way!

Author Info:
By: John Rebbeck
Rating: 4 stars4 stars4 stars4 stars4 stars / 259
December 29, 2002
TABLE OF CONTENTS:
  1. · Easy ASP.NET Page Templates
  2. · ASP.NET Pages
  3. · Implementing Multiple Editable Regions
  4. · JavaScript
  5. · Conclusion

print this article
SEARCH DEVARTICLES

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.
// ...
}
}
}

blog comments powered by Disqus
ASP.NET ARTICLES

- How Caching Means More Ca-ching, Part 2
- How Caching Means More Ca-ching, Part 1
- Reading a Delimited File Using ASP.Net and V...
- What is .Net and Where is ASP.NET?
- An Object Driven Interface with .Net
- Create Your Own Guestbook In ASP.NET
- HTTP File Download Without User Interaction ...
- Dynamically Using Methods in ASP.NET
- Changing the Page Size Interactively in a Da...
- XML Serialization in ASP.NET
- Using Objects in ASP.NET: Part 1/2
- IE Web Controls in VB.NET
- Class Frameworks in VB .NET
- Cryptographic Objects in C#: Part 1
- Sample Chapter: Pure ASP.Net

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials