How to Add Content Management to Your Existing ASP.NET Web Site

Introduction

I was looking for a Content Management System to power my old ASP.NET web site. I didn't expect it to be that hard to find something reasonably good, but it was hard. So I decided to research the problem and share my experience here.

The fact is that for some reason almost all CMS vendors assume that I am eager to rebuild my web site from scratch. The advertisement focuses on how easy it is to install CMS and how many features there are. It is getting vague when describing how I am supposed to move my existing content to the new system, and it mostly ignores all business functions of my site and all proprietary code I currently have.

Such approach does not look adequate in the second decade of the 21st century. A company web site these days is more than text and pictures - it does business. It has been rebuilt many times already, saturated with unique code and business functionality. Saying that one can easily move a business web site into some prepackaged CMS would not be an accurate assessment.

Content management is just one of many functions of a modern web site. It's not reasonable to throw away all other vital functions just to get this one. Why can't we simply add content management features to an existing web site without sacrificing site's business purpose?

The whole idea of a CMS being the foundation of a web site is outdated. Technology is way past the state when you had to build everything from scratch again and again. Modern systems can evolve, and so should evolve our web sites.

So, here are the reasons why it's hard to find a CMS to enhance existing web site:

1. It is not practical to throw away a web site that already fulfills its business purpose.
2. Business evolves, it is hard to predict which CMS features it will need tomorrow. CMS vendor lock-in can impose unnecessary features on business and deprive business of features it might need in the future.
3. IT departments are reluctant to install yet another software package in their already overpopulated server room. IT departments want to build IT systems their way, not the way imposed by a CMS vendor.
4. We do want to keep our existing web sites. We want the ability to add content management features when we need them without destroying the whole system.

Requirements

So, what kind of technological marvel I was looking for?

It took me a while to recognize the requirements:

1. Drag and Drop. May be not literally, but the idea is the same - I should be able to add content management functionality to web pages without disturbing all other functions of my site.
2. À la carte features. I should be able to add new features into my existing web site when I need them.
3. Configuration over programming. I should be able to configure my way out of most situations. Programming should be the way of last resort.
4. No software to install. I can tolerate a small software piece that I should drop on my servers, but the bulk of the system should reside elsewhere. If this sounds like a cloud-based solution, that's because it probably is.
5. Choice. I want to do everything my way. The system should adapt to whatever IT environment I have, should adapt to the way my web site currently works.

As extreme as these requirements may sound they are actually a tribute to evolution - nowadays technology can afford evolutionary ways. In short - don't replace your existing web site, upgrade it.

Several Ways to add Content Management to a web site

As you can guess, majority of existing Content Management Systems cannot fulfill my dream entirely. But there are ways to get pretty close to the desired result.

Two basic choices:

a) install any well-known CMS side-by-side with your old web site and write code to somehow transfer content from CMS to web site at runtime;

b) use specialized solutions that were designed to inject managed content into existing web sites.

Which solution you choose depends on how you prioritize the requirements, primarily on how much programming and how much interference in your existing web site you are going to tolerate.

Side by Side with Front-end Integration

This is probably the most obvious way - deploy a new web site powered by a CMS of your choice, and show its pages on your old web site using an IFRAME or a JavaScript code.

Update [May 8, 2012]: As some readers pointed out, in most cases integration through IFRAME or AJAX is not really a good idea in terms of Search Engine Optimization. IFRAME integration also requires careful attention to all links in managed text because those links should target parent frame to update the whole page, not only IFRAME content. For real life business web sites specialized solutions like ElasticWCM (see below) would be the primary choice. In such solutions cloud-based system provides all content management features, versioning, permissions - injecting multiple content fields into designated areas on the web page in appropriate language, sometimes according to a publishing schedule. It's hard to beat specialized systems, especially when they are free

Connect through IFRAME

Here you are replacing part of the page with an IFRAME in which you display content from your new CMS.

If on the old web site you had a page like this

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>My Page on old web site</title>
</head>
<body>
   <div>...site header here...</div>
   <h1>Page Title</h1>
   <img alt="my picture" src="picture.jpg" />
   <p>Some text...</p>
   <div>...site footer here...</div>
</body>
</html>

you would change it to contain an iframe referencing a page on your new CMS:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <div>...site header here...</div>
   <title>My Page on old web site</title>
</head>
<body>
   <iframe src="[New CMS page URL goes here]" width="900" height="600" frameborder="0"></iframe>
   <div>...site footer here...</div>
</body>
</html>

You should change the size of the iframe to match your web site design.

Connect through JavaScript

jQuery made it really easy to load content from a different page.

Steps:

1. On the CMS page identify or create an Html element (most likely DIV) holding managed content, that will be the source of data. Let's say its ID is "content".

2. On content pages in your old web site define a DIV that will hold managed content, assign some ID to it, for example "container".

3. Add JavaScript code retrieving Html from "content" DIV on the CMS page and populating "container" div on the web site page:

$(function() {
   $('# container').load('cmsPageUrl #content');
});

Many content management systems create an RSS feed for the page content, that represents another option - you can query that RSS using JavaScript. jFeed https://github.com/jfhovinne/jFeed - a jQuery RSS/Atom plugin makes it easy.

Note, that in both described cases your CMS will also be accessible to Internet users if they figure out the URL to it. If that is not what you want you should probably consider back-end integration, where you can hide CMS from public view.

Side by Side with Back-end Integration

Technical details of this solution greatly depend on the type of CMS you are going to use.

An example of rather sophisticated solution would be integration with MS SharePoint Foundation.

You can use SharePoint as your backend storage with rich HTML editor, advanced permission management and collaboration features.

Steps:

1. Install SharePoint Foundation 2010 (free download from Microsoft site: http://www.microsoft.com/en-us/download/details.aspx?id=5970)

2. Create new SharePoint farm, then new Web Application and Site Collection with blank site in the root.

3. In the root site create a custom list, call it "MyPages". In that list Title field will hold page name that you will use in your queries to identify the page.

4. In your custom list define new HTML text field, which will hold content of your page. Call the field "PageHtml"

5. Somewhere in the old website's project create a function that will retrieve the value of the PageHtml field:

public class MyContent
{
   public static SPListItem GetPageItem(string pageName)
   {
      using (SPSite site = new SPSite("http://mySpSiteUrl"))
      {
         using (SPWeb web = site.OpenWeb())
         {
            string listUrl = web.ServerRelativeUrl + "/lists/MyPages";
            SPList list = web.GetList(listUrl);
            SPQuery query = new SPQuery();
            query.Query = string.Format("<Where><Eq><FieldRef
Name='Title'/><Value Type='Text'>{0}</Value></Eq></Where>", pageName);
            query.ViewFields = "<FieldRef Name='Title' /><FieldRef Name='PageHtml' />";
            SPListItemCollection items = list.GetItems(query);
            if (items != null && items.Count > 0)
            {
               return items[0];
            }
         }
      }
      return null;
   }
} 

Now, on any page of your old ASP.NET web site you can call this function to retrieve the page Html and display it instead of hardcoded content. The SharePoint site will provide you with all content management functionality.

Using Specialized Systems

There are a few systems on the market designed to update existing web sites.

One approach is to connect third-party CMS to the back-end storage and let it to update web site files behind the scenes. Examples here: CushyCMS and Instant Update CMS. This is rather unsophisticated method, depriving you from many features that a modern content management system must have. Also, making direct changes in the site's source files would most likely violate software deployment process in most companies.

With raising popularity of cloud-based solution new type of content management systems start emerging. Such systems establish connection with your web site, keeping content database in the cloud, and injecting content into web pages at runtime through well-encapsulated content controls.

A good example is ElasticWCM http://www.elasticwcm.com. From the developer's point of view ElasticWCM is just a free set of ASP.NET controls packed in a single DLL. Placing those controls on web pages is all that is needed to convert an ASP.NET web site to a multilingual content management system without writing a single line of code. And because it's free, anyone can play with it to see if it works for a particular solution.

Points of Interest

One place to watch is the Windows Azure Marketplace. There are free solutions out there that might help you to augment your web site with useful functionality.