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

• Download source - 420 KB

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:

1. Create a new website : File > New > Website; or Alt+Shift+N
2. Right click on your website > Add ASP .Net Folder > Theme
3. Right click App_Themes> Add ASP.NET Folder > Theme
4. Rename them to Orange and Blue (These are the names we are going to use to cal these Themes)
5. Right click on your website > Add new Item > Master Page > Rename it to Store.master

(The CSS is out of scope of this tutorial you could read more on W3 Schools or CodeProject.)

6. 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



7. 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.
8. Add your styles; for instance I added the following for the Orange theme.
CSS

.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;
}

9. 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")
ASP.NET

<asp:label id="lblAccessTime" text="access time" runat="server" ></asp:label >

• In the master page : Add the code to show the time in the page load
C#

protected void Page_Load(object sender, EventArgs e)
{
    lblAccessTime.Text = DateTime.Now.ToString();
}

10. If you want to test any of your Themes, you can add theme="Theme_name" to your .aspx file, i.e.:
ASP.NET

<%@ Page Title="Home" Language="C#" MasterPageFile="~/Store.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" Theme="Blue" % >

11. We add two link-buttons to the master page to facilitate the user to change the theme.
ASP.NET

<asp:LinkButton ID="linkButtonBlue" runat="server">Blue</asp:LinkButton>
<asp:LinkButton ID="linkButtonOrange" runat="server" >Orange</asp:LinkButton >

12. We add the code to skin Calandar, GridView, and LinkButton. For example: LinkButton in the Skin looks as follows:
ASP.NET

<asp:LinkButton runat="server"  BorderWidth="2"   BackColor="#D6EBFF" ></asp:LinkButton> 

13. 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...)
C#

protected void Page_PreInit(object sender, EventArgs e) { Page.Theme = "Blue"; }

• Use the Session to store the user preference
1. Write code in the master page to set the blue theme: (*** Note to add server.Transfer... ****)
C#

protected void linkButtonBlue_Click(object sender, EventArgs e)
{
    if (Session["Theme"] != null)
    {
        Session["Theme"] = "Blue";
        Server.Transfer(Request.Path);
    }
}

2. Write code in the master page to set the Orange theme:
C#

protected void linkButtonOrange_Click(object sender, EventArgs e)
{
    if (Session["Theme"] != null)
    {
        Session["Theme"] = "Orange";
        Server.Transfer(Request.Path);
    }
}

3. Finally set the Page_preint in .aspx based on session.
C#

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.