Click here to Skip to main content
Click here to Skip to main content
Go to top

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

, 17 Jan 2013
Rate this:
Please Sign up or sign in to vote.
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.

Sample Image

Sample Image

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
  6. (The CSS is out of scope of this tutorial you could read more on W3 Schools or CodeProject.)

  7. 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
  8. Sample Image

  9. 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.
  10. Add your styles; for instance I added the following for the Orange theme.
  11. .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;
    }
  12. 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: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
    • protected void Page_Load(object sender, EventArgs e)
      {
          lblAccessTime.Text = DateTime.Now.ToString();
      }
  13. If you want to test any of your Themes, you can add theme="Theme_name" to your .aspx file, i.e.:
  14. <%@ Page Title="Home" Language="C#" MasterPageFile="~/Store.master" AutoEventWireup="true"
        CodeFile="Default.aspx.cs" Inherits="_Default" Theme="Blue" % >
  15. We add two link-buttons to the master page to facilitate the user to change the theme.
  16. <asp:LinkButton ID="linkButtonBlue" runat="server">Blue</asp:LinkButton>
    <asp:LinkButton ID="linkButtonOrange" runat="server" >Orange</asp:LinkButton >
  17. We add the code to skin Calandar, GridView, and LinkButton. For example: LinkButton in the Skin looks as follows:
  18. <asp:LinkButton runat="server"  BorderWidth="2"   BackColor="#D6EBFF" ></asp:LinkButton> 
  19. 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...)
    • 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... ****)
      2. protected void linkButtonBlue_Click(object sender, EventArgs e)
        {
            if (Session["Theme"] != null)
            {
                Session["Theme"] = "Blue";
                Server.Transfer(Request.Path);
            }
        }
      3. Write code in the master page to set the Orange theme:
      4. protected void linkButtonOrange_Click(object sender, EventArgs e)
        {
            if (Session["Theme"] != null)
            {
                Session["Theme"] = "Orange";
                Server.Transfer(Request.Path);
            }
        }
      5. Finally set the Page_preint in .aspx based on session.
      6. 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 Smile | :) .

History

  • Update 1: 16/1/2013.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

BehranG BinA
Software Developer
Iran (Islamic Republic Of) Iran (Islamic Republic Of)
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 PinmemberCarsten V2.021-Aug-14 21:11 
GeneralMy vote of 5 PinprofessionalSibeesh Venu8-Aug-14 1:44 
QuestionGood example Pinmembershaji123426-Sep-13 0:40 
Questionneed a bit more of ur code PinmemberHumaira Javed25-Mar-13 0:05 
GeneralMy vote of 5 PinmemberSavalia Manoj M20-Jan-13 18:59 
GeneralRe: My vote of 5 PinmemberBehranG BinA21-Jan-13 15:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140922.1 | Last Updated 17 Jan 2013
Article Copyright 2013 by BehranG BinA
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid