Introduction
It’s very common for a medium/large scale company to have
many websites. Users should be presented with the same look & feel in all
the websites for better user experience. Apart from that there are certain
files (images, styles, scripts etc) that need to be used in each website so,
there should be a mechanism to place such common files in one place and then
use them in all the websites. This will also help to maintain the applications
easily. If there are some changes required, just update the common file to
reflect the changes in all the websites. This article helps defining such common
files (layout, images, styles and Javascripts) once and using them for all the websites
using Asp.Net.
Define Common Elements
Create an empty website project named ‘Common’ and
create/add the following items under it.
1.
Create Master Page folder named ‘MasterPages’ for the layouts and add
common master page files.
2.
Create Styles folder named ‘Styles’ and add multiple CSS files to hold
the common styles.
3.
Create Images folder named ‘Images’ to place the commonly used images.
4.
Create Javascript folder named ‘Javascripts’ and add all the common java
script files under this folder.
Place the above website under some common folder so that you
can refer them later on.
Use Common Elements
Create multiple websites and deploy them on IIS. Configure
the above defined website named ‘Common’ as a virtual directory in each of the
deployed website. Now you can refer the above defined master pages, CSS files,
javascripts and images in each of the website. Just use the appropriate file
from 'Common' virtual directory by just pointing to file that is placed under
the virtual directory. For example, in a website page you can point to a master
page named ‘CommonMaster.master’ file placed under Common website like this.
<%@ Page Language=”C#”
MasterPageFile=”~/Common/MasterPages/CommonMaster.master” %>
Similarly you can point to a javascript,CSS or image file
respectively as shown below
<script src="~/Common/Javascripts/common.js" type="text/javascript" />
<link rel="stylesheet" type="text/css" href="~/Common/Styles/common.css"/>
<img alt="image" src="~/Common/Images/save.png"/>
For convenience while developing websites using Visual
Studio, you can configure the 'Common' website virtual directory in the derived
Website.
Moreover, 'Common' website can be used to place other common
files like company policy documents, user manuals etc.
Hope it helps!
