ASP.NET C# Master Page/Theme/Skin with Session






4.96/5 (13 votes)
This application demonstrates how to use multiple themes in the same site, and how to programmatically facilitate users to change theme. The application stores the user preference in session.
Introduction
There are lots of articles which describe theme, skin files and master page individually. Most of them just focus on one of the following, and rarely they include all technologies together with session handling to facilitate storing user preferences and theme.
Such articles usually demonstrate simple ASP control and CSS. Most of the times, we are required to represent more complicated layout. The article will help you to examine the main features of theme, Skin file and session all in one place.
Things included:
- Masterpage
- Two Skin files/Styles and Theme
- Grid View/LinkButton/Calandar Skin
- XML datasource for populating data in the Grid view
- Session Management
Walkthrough to create this project:
- Create a new website : File > New > Website; or Alt+Shift+N
- Right click on your website > Add ASP .Net Folder > Theme
- Right click App_Themes> Add ASP.NET Folder > Theme
- Rename them to Orange and Blue (These are the names we are going to use to cal these Themes)
- Right click on your website > Add new Item > Master Page > Rename it to Store.master
- Create your page layout in the master page . i.e. we add a layout ( Head body Footer) and add a content place holder to the area you want to present your pages
- Right click on orange add a stylesheet and call it orange > Right click on orange add a Skin and call it orange.skin > Do the same for the blue…
- Add your CSS to Orange.css and Blue.css.
- Add your styles; for instance I added the following for the Orange theme.
- Assume you want to add a ASP
Label
with CSS that runs in the master page and show the access date - Add the CSS for your label in your .css files (I defined it as .label as you can see in above)
- Add a label to master page and identify to use the 'label' class (i.e. class="label")
- In the master page : Add the code to show the time in the page load
- If you want to test any of your Themes, you can add
theme="Theme_name"
to your .aspx file, i.e.: - We add two link-buttons to the master page to facilitate the user to change the theme.
- We add the code to skin
Calandar
,GridView
, andLinkButton
. For example:LinkButton
in the Skin looks as follows: - It is time to change the theme programmatically - We need to change the theme in the '
Page_PreInit
' method. - Remove the
theme="Blue"
from .aspx and define it in the 'Page_init
' method as follow (you can test your code before proceeding...) - Use the Session to store the user preference
- Write code in the master page to set the blue theme: (*** Note to add
server.Transfer
... ****) - Write code in the master page to set the Orange theme:
- Finally set the
Page_preint
in .aspx based on session.
(The CSS is out of scope of this tutorial you could read more on W3 Schools or CodeProject.)
.header
{
background-image:url("image/header.png");
color:Black;
font-size:xx-large;
}
table
{
width:100%;
}
th
{
text-align:center;
font-family:Forte;
font-size:18px;
}
.sides {width:10%;}
.center { width:80%;}
body
{
background-color:Black;
color:White;
font-family: Times New Roman;
font-size:13px;
}
.footer
{
background-image:url("image/header.png");
position:absolute;
bottom:0;
width:100%;
height:60px;
}
.label
{
font-family: Andalus; font-size: larger; text-transform: uppercase;
color: #053585;text-align:right;position:absolute;right:10px;font-weight:bold;
}
hr
{
height: 2px;
color:#996633;
background-color:#996633;
}
<asp:label id="lblAccessTime" text="access time" runat="server" ></asp:label >
protected void Page_Load(object sender, EventArgs e)
{
lblAccessTime.Text = DateTime.Now.ToString();
}
<%@ Page Title="Home" Language="C#" MasterPageFile="~/Store.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" Theme="Blue" % >
<asp:LinkButton ID="linkButtonBlue" runat="server">Blue</asp:LinkButton>
<asp:LinkButton ID="linkButtonOrange" runat="server" >Orange</asp:LinkButton >
<asp:LinkButton runat="server" BorderWidth="2" BackColor="#D6EBFF" ></asp:LinkButton>
protected void Page_PreInit(object sender, EventArgs e) { Page.Theme = "Blue"; }
protected void linkButtonBlue_Click(object sender, EventArgs e)
{
if (Session["Theme"] != null)
{
Session["Theme"] = "Blue";
Server.Transfer(Request.Path);
}
}
protected void linkButtonOrange_Click(object sender, EventArgs e)
{
if (Session["Theme"] != null)
{
Session["Theme"] = "Orange";
Server.Transfer(Request.Path);
}
}
protected void Page_PreInit(object sender, EventArgs e)
{
if (Session["Theme"] != null)
{
Page.Theme = (String)Session["Theme"];
}
else
{
Session["Theme"] = "Blue";
Page.Theme = (string)Session["Theme"];
}
}
Further enhancements
You can expand this solution and facilitate the user to upload it's logo for the header and ... You can also save the setting inside an xml file or DB or even web.config file, i.e.:
public static void WriteConfigurationSettings(String theme){
var configuration = WebConfigurationManager.OpenWebConfiguration("~");
var section = (PagesSection)configuration.GetSection("system.web/pages");
section.Theme = theme;
configuration.Save();
}
(You should have administrative rights to modify web.config or the system throws exception.)
Conclusion
In this application I have tried to cover the most of Theme and Skin in a ASP website. I hope I could assist you in working with skin and theme. Feel free to leave some comments :).
History
- Update 1: 16/1/2013.