ASP.NET WebPages Organizing Your Website

Building large scale websites requires a very good website structure and approach. Since ASP.NET WebPages is a lightweight framework (yet as powerful as MVC and WebForms), it does not have a standard approach to organization. You can place files wherever you like, which could cause a structural failure because you can’t find files and everything is all over the place.

However, there are ways in which you can organize your website so you can locate and access files easily. Since WebPages is not based on code separation, files can get long and clustered with HTML and C# (or VB) in one long file. This means you can have repetitive code, which is not good programming practice.

So here are a two tips on maintaining good structure.

1. Keep a decent folder structure

This may be an obvious solution, but naming your folders appropriately will help you locate them easily. The standard approach is this:

ASP.NET WebPages Organizing Website

However, personally we prefer this structure:

ASP.NET WebPages Structure Recommended

The layouts directory is prefixed with an underscore, and in that folder goes your CSS and Scripts folder. Upfiles should be used for uploaded files. This is a good development approach, in our opinion the default layout is poor because your CSS and Script files are in different folders; ideally they should be In the _Layouts directory, as they are part of the site layout.

2. Use <appSettings> in the web.config file.

The appsettings section of the web.config file is based on key and value pair. It is ideal for storing directory locations, but you can store other items, such as API Keys:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <appSettings>
        <add key="LayoutsDirectory" value="~/_Layouts/"/>
    </appSettings>

  <system.web>
    <compilation debug="true" targetFramework="4.0" />
  </system.web>
</configuration>

We then need to  create a class in the App_Code called Settings.cs  (or whatever you wish to call the class) and use the Configuration Manager to access this setting.

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Configuration;


/// <summary>
/// Summary description for Settings
/// </summary>

public class Settings
{
    public Settings()
    {
        //
        // TODO: Add constructor logic here
        //
    }


    public static string LayoutsDirectory
    {
        get
        {
            return WebConfigurationManager.AppSettings["LayoutsDirectory"];
        }
    }
}
Imports Microsoft.VisualBasic
Imports System.Web.Configuration

Public Class Settings


Public Shared ReadOnly Property LayoutsDirectory() As String
         Get
                 Return WebConfigurationManager.AppSettings("LayoutsDirectory")
         End Get
End Property

End Class

Take note of the System.Web.Configuration namescape. We created a property which will allow us to access the layouts directory from any location, so if we change the directory we only need to change the location in the Web.Config file. Now we can add a CSS link like:

<link rel="stylesheet" type="text/css" href="@Href(Settings.LayoutsDirectory + "css/mycss.css")"/

You can read more about the appSettings section at MSDN.