Dynamically Change CSS on Button Click in ASP.NET

This article will explain on how css can be changed dynamically on button click in asp.net

Introduction

Hello friends, in this article we will see how to change the CSS of asp.net application dynamically.

In this article, button is being used to change the CSS using the Button Click event.

Objective

There are lots of time we want to change the background dynamically and also the look and feel of the website and you regret using Themes because it only works for asp.net controls and not to HTML Controls.Hence we can use CSS. For simplicity asp.net controls are used in this article,however HTML controls can be used as well.

Using the code

We have 1 label and 2 buttons, The first button will change the background of the webpage to maroon color and font family and the look of the label as well and the second button will change the background color to yellow and the font and the labels look and feel as per CSS.

To work around we have to implement a default look and feel,hence for that i have kept the background color to aqua.so when the page will load for the first time it will have the look and feel of the default css and on button clicks it will change the css and apply the changes as per css rule.

Now to change the CSS dynamically on button click we will use the command argument value given to the button in HTML mark up.

The command argument is the name of the css with extension of the css as well.

In all the css i have a common class .label so that i can also change the look and the feel of the label as well as per the changing the css.

For this i have assigned .label class to the label control.

Make a note that the default.css should have the .label class so that you can apply the changes to the label.

************Using the code and understanding the code*************************

 id="lnkCSS" href="css/Default.css" runat="server" rel="stylesheet" type="text/css" /> 

The above line if you check i have set the runat = server mode to the link so that i can get this link on code behind to change its properties on code behind.

Block of code should be set style as "Code" like below.

// HTML Mark Up

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dymaic Change of Css.aspx.cs" Inherits="Dymaic_Change_of_Css" %>

 xmlns="http://www.w3.org/1999/xhtml">
 runat="server">
    
     id="lnkCSS" href="css/Default.css" runat="server" rel="stylesheet" type="text/css" />


    

 id="form1" runat="server">
    



     ID="lblseeEffect" runat="server" Text="This is a Label" CssClass="label">
 />
 />
     ID="btnCss1" runat="server" CommandArgument="Brown.css" 
            Text="Apply Brown Theme" onclick="btnCss1_Click" />          
     ID="btnCss2" runat="server" CommandArgument="Yellow.css" 
            Text="Apply Yellow Theme" onclick="btnCss2_Click" />
    

   
   

//Default.css

body {
        background-color:Aqua;
        font-family:@Adobe Gothic Std B;
        font-size:15pt;
}
.label{
    font-weight:bold;
    color:Red;
}

//Brown.css

body {
        background-color:Maroon;
        font-family:@GulimChe;
        }
.label{
    font-weight:bold;
    color:Yellow;
    font-size:20pt;
}

Yellow.css

body {
        background-color:Yellow;
        font-family:Adobe Caslon Pro Bold;
}
.label{
        color:Maroon;
        font-size:15pt;
        }

//Code behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Dymaic_Change_of_Css : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnCss1_Click(object sender, EventArgs e)
    {
        lnkCSS.Attributes["href"] = "~/css/" + (sender as Button).CommandArgument; // this will change the css as per the command agruement given in the HTML mark up
    }
    protected void btnCss2_Click(object sender, EventArgs e)
    {
        lnkCSS.Attributes["href"] = "~/css/" + (sender as Button).CommandArgument;// this will change the css as per the command agruement given in the HTML mark up

    }
}