LogoASPAlliance: Articles, reviews, and samples for .NET Developers
Shared Layout, Style, Images and Javascript
by Muhammad Bilal Ashraf
Average Rating: 
Views (Total / Last 10 Days): 8999/ 25


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!


Product Spotlight
Product Spotlight 

©Copyright 1998-2021  |  Page Processed at 2021-12-08 7:16:36 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search