Click here to Skip to main content
Click here to Skip to main content

RJContentPanel WebControl For Multi-Page Templated Websites

, 20 May 2004
Rate this:
Please Sign up or sign in to vote.
Simple web control that allows you to build multi-page websites quickly using web user controls for the content

Introduction

After moving to .NET, I was building a simple website that would have four or five pages of content, but they should all have the same look. In the past, I would build a template page with the look I desired and build HTML pages for the each page of content. The content pages would be plain HTML and I would use a method to include them into the content area of the main template page depending on the currently selected page.

Now that I was working with .NET, I started to research ways I could accomplish the same task. While I could use similar methods as I used in earlier sites, the Web User Controls seemed to be a better way to handle embedding content from one file into another.

I quickly threw together several user controls filled with content and built my main page with a blank area for the content. At this time point I was stuck. Now that I had the user controls and could drop them on the page, I needed an easy method to switch between them depending on which page of content was to be displayed.

After a bit more research, I decided to build a web control that would render the desired user control and act as a placeholder. While I was at it, I decided to make it even more useful and added the ability to specify a URL parameter that it could read to select the user control without having to keep track of the content page. Thus this control was born.

Demos

I have built three demos that are all the same format, but each uses this control in different methods. They all appear as the example picture above.

ContentPanelSiteOne:

This demo shows the basic functionality of this control. The entire page other than the white content panel (where it says "Home .. Content Page") is in Core.aspx. The content panel is the RJContentPanel control. The default user control is the "Home" which is shown when you first go to the site.

A live demo can be found at: http://GotTheAnswerToSpam.com/ContentPanelSiteOne/Core.aspx.

In the "Controls" folder, there are Home, Products, FAQ and Contact Us user controls. When you first go to the site, the RJContentPanel control defaults to "Home", which is the user control shown in the white area of the page. When you click on the Products link, you will notice that the content area changes and so does the URL. Now it is "Core.aspx?P=Products". That tells the RJContentPanel to display the user control "Products.ascx" (the control appends the ".ascx" extension). Same goes for the other links, where "P=" is set to the user control to display.

This makes it easy to build a multi page site and use a template where only the content changes. You simply drop this on the form you use as a template, set the path to the controls (in this case "Controls/" ), set the default page (in this case "Home") and set the RequestVariable Property to "P". At that point, it is ready to go.

Example sites that use this is:

and

ContentPanelSiteTwo:

This will appear the same as site one, however now, you will not see the parameters when you click on the links. The links post back and in the code, it sets the default page of the RJContentPanel directly and forces the page to rebuild. In the code behind there is:

private void LinkButton1_Click(object sender, System.EventArgs e)
{
   RJContentPanel1.DefaultPage="Home";
   RJContentPanel1.ForceBuildControlsNow();
} 

This method allows the template page to be the only item in the URL without the need for parameters. There are drawback though, as a person cannot save a link to an individual page since it will only point to the Core.aspx file.

Live Demo Link: http://GotTheAnswerToSpam.com/ContentPanelSiteTwo/Core.aspx.

ContentPanelSiteThree:

The first thing you will notice, we now use a different name for the page, instead of going to Core.aspx, we go to Home.aspx. This is just a trick however. The site is similar to ContentPanelSiteTwo, but this one uses dummy pages for navigation. There is now a page for each link and each page contains two lines of code:

HttpContext.Current.Items["TargetPage"]="Home";
Server.Transfer("Core.aspx");

The first line sets a value in the current context Items collection. This value only exists for the duration of the request and can be an easy method to pass data between modules that make up the page. In this case, the value is set to the page our home.aspx page refers to and then transfers control to our normal Core.aspx file. You will find in the Core.aspx file in the OnInit method, it looks for the "TargetPage" item in the current context's item collection and set the RJContentPanel's DefaultPage to the value it contains.

All the pages are built the same way, only the TargetPage name is changed. Makes it very quick to build a number of these files.

Why use both a web form page and a web user control for the content? This makes it easier for some search engines to index your site and some people might find the names friendlier than parameters on the URL.

This does come with a bug though. The Contact Us page on all the demos simple prompts for a name and once entered and you click the submit button, it performs a Response.Write out to the top of the page. Nothing fancy, but it is there to show the action.

In this demo, if you click on the submit button, the page in the URL changes. This is due to a feature (bug to me) in the forms processing in ASP.NET. There is a simple method around it. You can replace your HtmlForm with:

using System;
using System.Web;
using System.Web.UI;

namespace ActionlessForm
{ 
   public class Form : System.Web.UI.HtmlControls.HtmlForm
   { 
      protected override void RenderAttributes(HtmlTextWriter writer)
      {
         writer.WriteAttribute("name", this.Name);
         base.Attributes.Remove("name");
         writer.WriteAttribute("method", this.Method);
         base.Attributes.Remove("method");
         this.Attributes.Render(writer);
         base.Attributes.Remove("action");

         if (base.ID != null)
            writer.WriteAttribute("id", base.ClientID);
      } 
   }
} 

This I found this while looking at URL rewriting at:

http://msdn.microsoft.com/asp.net/using/building/web/default.aspx?pull=/library/en-us/dnaspp/html/URLRewriting.asp

Live Demo Link: http://GotTheAnswerToSpam.com/ContentPanelSiteThree/Home.aspx.

Usage

Using the control is simple. Just drop the control on your form and set the following three Properties:

RequestVariable:

If you wish to use the method in ContentPanelSiteOne where it tracks the content page based on a URL parameter, you would set this to the name of that parameter. In the demo it was set to "P".

DefaultPage:

This is the page that will be displayed if there is either no RequestVariable set or it has no value. If you are not using the URL parameter method, this will be the value you set to switch content controls.

ControlFolder:

Set this to the virtual path (not physical) of the folder were you user controls are stored. In the demos this was set to "Controls/".

Methods

ForceBuildControlsNow()

This is the only method Added. You would use this if the form is already created and you wish to switch to another user control. There are also times when you might want to access controls in the user control from the host page and want to ensure the that user control is created.

Conclusion

The control itself is quite simple and surprisingly requires very little code to perform this task. At this point, there is still one problem I would like to find a way around. When you have graphics in your user control that is displayed via this control, you will have to use the full path. It does not path properly to the images. This only happens if the graphics are located in the folder with your controls or under them.

** IF YOU FIND THIS USEFUL, you are encouraged to stop by www.HintsAndTips.com and share a few tips that you have discovered. Member ship is free. The tips do not have to be on programming, they can be on almost any topic.

Version History:

1.0.1599.2341 - May 18, 2004

  • General clean up of code
  • Added saving of settings to ViewState
  • Removed the requirement to end the ControlFolder path name with a "\"

1.0.1512.38470 - February 21, 2004

  • Initial public release

Most recent sources can always be found at www.RJSoft.com/Products/

License

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

Share

About the Author

Rocky Moore
President
United States United States
Computer geek since the beginning of time, well, at least since 1981. Started with the Commodore VIC-20 with 3.5K RAM. Past two decades spent with C/C++, MFC and now totally consumed with .NET and C#.
 
Business owner here in beautiful southern Oregon with mountains, clean air and pure water. Great outdoors to enjoy when I can get away from the computers.
 
Web sites of interest:
 
HintsAndTips.com
TheAwakening.com
My Blog: www.ReflectedThought.com
www.SilverlightCity.com
www.TheSaintsInLight.com
www.TheSilverlightDirectory.com
www.TheWPFDirectory.com

Comments and Discussions

 
Generalslow Pinmemberstuempfig18-Apr-05 21:36 
GeneralRe: slow PinmemberRocky Moore19-Apr-05 0:30 
Generaliframe PinmemberTaha Zayed17-Jan-05 22:04 
GeneralRe: iframe PinmemberRocky Moore19-Jan-05 6:56 
GeneralPage is Loading twice Pinmemberhkjadav6-Jul-04 18:27 
GeneralRe: Page is Loading twice PinmemberRocky Moore7-Jul-04 21:51 
QuestionCan Tab Clicked Event Actived at Client Side? Pinmembercairabbit27-May-04 14:51 
AnswerRe: Can Tab Clicked Event Actived at Client Side? PinmemberRocky Moore27-May-04 16:06 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 21 May 2004
Article Copyright 2004 by Rocky Moore
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid