Building a Simple CMS for your static website in ASP.NET

Problem Statement

It is interesting to note that most of the websites over the internet are small websites with 10-100 pages of static html content. And, in most of the scenarios, its not easy to update those websites by their webmasters or owners.

Converting a simple static website into a CMS is not a very good idea unless you want to spend a lot on your static website.

Proposed Solution

A simple solution to this problem is to install a generic file manager script on your website so that a website owner could.

Browse the files on the server.
Edit the html files online in such a way that he's using an advanced html editor.

About this Tutorial

This tutorial elaborates the technical aspects of implementing that CMS in ASP.NET using C#. The tutorial is for beginner-level ASP.NET developers to induce their problem-solving capabilities in ASP.NET. It can also act as a good case study for learning ASP.NET. Screenshots and code snippets are mentioned where-ever necessary. Moreover, you can also download the complete CMS VS 2005 Project Files.

Let's start.

Reading the list of files and folders on your web server.

It's very easy to read information on directories or files on a given directory on web sever. The class used for this purpose are DirectoryInfo and the methods are GetFiles and GetDirectories.

All you need is the current directory on which you want to perform those tasks. You can get this information through Server.MapPath or by explicity typing the absolute path as arguments.

For example: Look at the code

DirectoryInfo dirInfo = new DirectoryInfo(MyDir);
FileInfo[] info = dirInfo.GetFiles();
DirectoryInfo[] dirs = dirInfo.GetDirectories();

Here, MyDir is a string variable that contains absolute path of the directory (whose files and folders we like to browse). Now the arrays of DirectoryInfo and FileInfo are populated with respective data. It can be iterated and used.

Using DataTable in a GridView

We can iterate the files array, can filter only html files, and we can also write this into a DataTable. First we've to add columns into our DataTable and then we've to add rows into it. See the following code for that.

DataTable dt = new DataTable();
dt.Columns.Add("Filename", typeof(string));
dt.Columns.Add("Size (kb)", typeof(int));
dt.Columns.Add("Modified", typeof(string));
foreach (FileInfo file in info)
{
    dr = dt.NewRow();
    dr["Filename"] = file.Name;
    dr["Size (kb)"] = (int)file.Length / 1024;
    dr["Modified"] = DateTime.Parse(file.LastWriteTime.ToString()).ToString("MM/dd/yyyy h:mm tt");
    dt.Rows.Add(dr);
}

Connecting our DataTable with a GridView is only two lines away. We just have to call GridView.Datasource with our DataTable and then we've to call GridView.Bind function.

Now, we can view the list of files on the server in a GridView.

Customizing GridView to show correct links of view and edit

Let's add a dynamic column to our GridView such that it has a linke to edit.aspx?file=filename. Where filename is the file on that row.
Open the designer and add a column to the GridView. Select the column to be a HyperLink Fields and set the DataNavigateUrlFormatString as edit.aspx?file={0}.
Interesting point to note is the {0}. As we have filename on 0th column. And to refer the 0th column, we use {0}. Now we have an edit link column in our GridView. We can also add a view link column in the GridView. In this case, the target can be set to _blank so that a file can be viewed in a new window.

Figure 1: Adding a View Column in GridView

Figure 2: Configuring the View Column in GridView

Using a 3rd-party control - The "FCKEditor" as our rich text editor.

FCKEditor is a very famous Rich Text Editor. We will be using it for editing html files on the server. First we've to make it available in our Visual Studio Project. For this, we have to:
- Download FCKEditor from their website and extract its files into the project folder.
- Download FCKEditor.Net component for .NET and add it to the references and toolbox.
Both downloads you can find on http://www.fckeditor.net/download/
Create a new file named edit.aspx and drop the FCKEditor control from the toolbox into it.

Figure 3: Adding FCKEditor control in toolbox by "choose items" and browsing the dll

Figure 4: This is how FCKEditor control will appear in the toolbox

Figure 5: Configuring FCKEditor. Basepath should be correct. Width and height should be specified

Please also note:
As we're editing full html pages in FCKEditor (By full, its meant that the pages that also contain html, head and body tags). We have to enable the FullPage property of FCKEditor by doing FCKEditor.FullPage = true;

Reading file contents and saving it back

The following code shows how to read a given file from the server and associate it with FCKEditor control for user-editing. Its done by simply using the StreamReader

StreamReader sw = new StreamReader(MyDir + FileName);
String data = sw.ReadToEnd();
sw.Close();
FCKeditor1.Value = data;
FCKeditor1.Visible = true;

We use the StreamWriter for writing the file back to the server

StreamWriter sw = new StreamWriter(MyDir + FileName);
sw.WriteLine(FCKeditor1.Value);
sw.Close();

Figure 6: This is how a file browser can look. Its only displaying the .html files on the server

Figure 7: This is how the rich text editor's edit screen will look.

To Do List

The web-application works perfectly on any directory and allows you to edit files in rich text editing mode. However, there are many areas on which this application can be extended. This todo list can act as a homework which can help you a lot to increase your capabilities in ASP.NET.

Right now, its showing contents of only one folder. We can convert into a recursive directory browser. The key to implement is to build the MyDir string dynamically on every page load.
Ability to create new files can also be provided.
Deleting files and changing permissions can also be added.
This application can also be protected behind a secure login by .NET's own login control.
Ability to create directories is also one of the next possible steps.

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback |