ASP.Net Web Forms Templates – Part 1

Posted on February 3, 2011 
Filed Under .Net Code, CSharp, Web Development | 1 Comment

Normal “templates” with ASP.Net web forms uses the App_Themes folder and then places skin and css files so that different templates can be used. The problem with this, as I outlined in the introduction, if you set up a master page, there isn’t much you can do to change the complete layout of the site unless you modify that master page. When you have to maintain a single code base for an entire project, modifying this per customer is virtually impossible.

A solution to this problem is to move that master page out somewhere that a web designer can easily change but not have it affect the main site. For this part, there are a few simple steps:

  1. Create a folder for the templates
  2. Create a configuration setting for a current template
  3. Create a base page that will set the proper template

First we will create a folder to store the templates and move our master page there. Keep in mind that this can be pretty flexible. You can have multiple master pages. To keep this simple, however we are just going to use one.

You cannot use the App_Themes folder as you are not allowed to put a master page in there. Also, my recommendation for these master pages is to not have any code behind files. Keep it simple and only have the page.Master and nothing else. Code can be added to the markup if needed and in the next part of this series, I will outline how to build out a template API so that designers can get to your site functionality pretty easy. For now, just keep in mind that once you get rid of the code behind file, you will need to create a base master page class that these master pages inherit from. See below:

namespace ASPNetTemplates.CMS
{
  public class BaseMasterPage : System.Web.UI.MasterPage
  {
  }
}

And in the master page:

<%@ Master Language="C#" AutoEventWireup="true" Inherits="ASPNetTemplates.CMS.BaseMasterPage" %>

Once the folder for the templates have been added (I called it Themes), create another folder called Default and move your master page there. This will be our default theme. You should also place any CSS and image files into this default folder. Feel free to organize, but make sure you update the paths to these files. If you happen to need to use any of the images within your main content pages, make sure to set a standard (and document it) path. That way every template has the same path to the image files. It’s also a good idea to standardize the names of these files unless you build out a a full template setup where there is a theme settings file that specifies which image is for what component of the site. Additionally, get rid of any code behind. If you already have a complicated master page that has lots of code behind (like I dealt with) you will need to start on an API to bring the functionality you need back to the page.

Just so that we can see success when we are done, create a second template folder and make a copy of your master, css, and images into this folder. Change the master page in this template so that you will know it’s using a different master page when we switch templates.

For the next step, we need to set up a configuration of some sort so that the template can be switched. Ideally this will include a admin page to change the template. For now, we will just create a simple settings class that will hold our current template setting. Then we have this class save and load our settings. See below:

Settings.cs – 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Xml.Serialization;
using System.Xml;

namespace ASPNetTemplates.CMS.SiteSettings
{
  public class Settings
  {
    public string CurrentTemplate { get; set; }

    public static Settings CurrentSettings
    {
      get
      {
        Settings siteSettings = LoadSettings();
        if (siteSettings == null)
          siteSettings = new Settings();

        return (siteSettings);
      }
    }

    public static Settings LoadSettings()
    {
      Settings siteSettings = null;

      using (var file = System.IO.File.Open(string.Format("{0}{1}//{2}", HttpContext.Current.Request.PhysicalApplicationPath, "App_Data", "Settings.xml"), System.IO.FileMode.OpenOrCreate))
      {
        var xmlSer = new XmlSerializer(typeof(Settings));
        try
        {
          siteSettings = (Settings)xmlSer.Deserialize(file);
        }
        catch (InvalidOperationException)
        {
          // An invalid operation exception is thrown if the settings.xml file doesn't exist or is blank.
        }
      }

      return (siteSettings);
    }

    public static void SaveSettings(Settings siteSettings)
    {
      using (var file = System.IO.File.Open(string.Format("{0}{1}//{2}", HttpContext.Current.Request.PhysicalApplicationPath, "App_Data", "Settings.xml"), System.IO.FileMode.OpenOrCreate))
      {
        var xmlSer = new XmlSerializer(typeof(Settings));
        xmlSer.Serialize(file, siteSettings);
      }
    }
  }
}

Settings.xml –



  Default

Now the final step is where the magic happens. To make things easy, so we don’t have to add code in each of our pages, we will make a base class that each of our pages will inherit from. This is the place where we will be setting the master page to use. This is pretty easy to do. See below:

namespace ASPNetTemplates.CMS
{
  public class BasePage : System.Web.UI.Page
  {
    protected override void OnPreInit(EventArgs e)
    {
      base.OnPreInit(e);

      this.MasterPageFile = string.Format("\\Themes\\{0}\\Site.Master", CMS.SiteSettings.Settings.CurrentSettings.CurrentTemplate);
    }
  }
}

Then in our pages we just inherit from this class –

namespace ASPNetTemplates
{
  public partial class _Default : CMS.BasePage
  {
    protected void Page_Load(object sender, EventArgs e)
    {
    }
  }
}

If all goes well you should be able to run the site and be presented with your default template. Now, to see the magic happen, change the settings.xml file to reflect the other template you set up and rerun the application.

Using Master Pages as Templates in ASP.Net WebForms – Introduction

Posted on February 3, 2011 
Filed Under .Net Code, Web Development | 1 Comment

I maintain a fairly simple CMS that our customers use for their public facing web site. Most of the CMS is pretty straight forward. Create, publish, edit content, etc. I took over this project as it was originally designed by an outside contractor. For the most part, the meat of the application is the same, aside from some changes here and there to optimize code reuse, optimize performance, add features, etc.

Since this CMS was designed to be installed as public facing sites, it was built to have templates so that each site could maintain their own unique look and feel. This was done in a pretty standard way that most ASP.Net sites are created. The site is created with a master page that helps maintain the same look and feel through the whole site and then in the App_Themes folder, the CSS files change the way the site looks. Code was added so that the theme can be switched on the fly.

This worked excellent for many years, however recently we had been getting many requests on completely changing the layout and placing content in places that were not designed to have content. Others wanted their main content to look much different than what we could support.

So, I set out to devise a way of doing templates that would allow the web designer complete control over the site templates. This small series is going to show (in a simplified way, mind you) how I built the new templates to give the web designer more control over the overall design of the site.

As I add posts to the series, I will add them to the bottom of this post.

ASP.Net Web Forms Templates – Part 1

Gr1d – Persistent multiplayer online programming game.

Posted on December 19, 2010 
Filed Under .Net Code, CSharp, VB.Net | Leave a Comment

Gr1d is a persistent multiplayer online programming game. It takes it’s roots in games like RoboCode but with persistence (your agents run all the time, even while you sleep) and you compete with a ton of other players at the same time.

The code can be written in any .Net compatible language and has a full API.

Go here to check it out! There is a competition starting on the 19th of December, 2010.

Global Application Settings Override (Now with examples!)

Posted on July 29, 2010 
Filed Under .Net Code, CSharp, VB.Net, Windows Deployment | 4 Comments

My previous posting about TableAdapter connection strings was a pretty big hit with a lot of people. It’s still being referenced on the MSDN forums from time to time when someone needs a solution to the problem of having a connection string for a TableAdapter in the app.config that they need to override at runtime.

Since that post was in VB.Net and over 2 years old now, I’ve decided to resurrect it and work up a quick sample project with both C# and VB.Net code. Someone had request C# and I have no idea why I didn’t include it when I did that post, but better late than never!

Click here for the sample solution. (VS2010) If you don’t have that version of visual studio, you can download the express version from Microsoft, or just open the projects individually in VS2008.

Next Page →