Shared Layout, Style, Images and Javascript
page 1 of 1
Published: 01 Jun 2010
Unedited - Community Contributed
Nowadays it's very common for a medium/large scale company to have many websites. Users should be presented with the same look and feel in all the wesites for better user experiences. This article shows how to define the common layout, images and styles once and how to use them for all web sites using ASP.NET.
by Muhammad Bilal Ashraf
Average Rating: 
Views (Total / Last 10 Days): 8002/ 13


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!


User Comments

Title: Sharing User Control acress applications   
Name: Bilal
Date: 2010-07-23 10:31:11 AM
hi Jimmie,
This solution doesn't address user control sharing as DLL is involved in that case. You can find the solution right here

Hope it helps
Title: user controls   
Name: jimmie
Date: 2010-07-22 2:52:42 PM
Would it be possible to also have 'common' user controls included in this common website?

I'm trying to get this to work the same way you mentioned how to do this with master pages, but it appears my website cannot find the file since it's located in the other website.

I'm trying to get this to work in vs 2008 before publishing it to IIS so I can actually work on this project locally and not have to push it to a dev server every time I want to test something.
Title: good idea !   
Name: samurai Luchang
Date: 2010-06-18 8:01:19 AM
A nice idea to keep things clean and organized. And offcourse good to decouple main theme from the overall webs
Title: very nice   
Name: Arif Mahmood
Date: 2010-06-11 3:22:17 AM
Nice idea. Will have to give it a try. :=)
Title: great idea   
Name: alex
Date: 2010-06-07 9:39:21 AM
great idea. this is the way web applications should be build to take full advantage of reusable components
Title: Hire Dotnetnuke Web Developers   
Name: Hire Dotnetnuke Web Developers
Date: 2010-06-05 1:49:56 AM
Interesting post!
Title: Good one!   
Name: Pervaiz Iqbal Niazi
Date: 2010-06-04 9:17:24 AM
Nice one. I liked that...:-)...
Title: Nice   
Name: Mahr G. Mohyuddin
Date: 2010-06-04 3:04:37 AM
Good idea. Nice to see you aspalliance. Keep it up.

Product Spotlight
Product Spotlight 

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-05-23 2:57:10 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search