Dynamically Change CSS on Button Click in ASP.NET

Raj.Trivedi
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 15434 red flag

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*************************

<link 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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link id="lnkCSS" href="css/Default.css" runat="server" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Label ID="lblseeEffect" runat="server" Text="This is a Label" CssClass="label"></asp:Label><br /><br />
    <asp:Button ID="btnCss1" runat="server" CommandArgument="Brown.css" 
            Text="Apply Brown Theme" onclick="btnCss1_Click" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:Button ID="btnCss2" runat="server" CommandArgument="Yellow.css" 
            Text="Apply Yellow Theme" onclick="btnCss2_Click" />
    </div>
    
    </form>
</body>
</html>

//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
} }

Conclusion

I hope this would be beneficial for the developers.
Please keep Sharing...
"Sharing is Caring"


Page copy protected against web site content infringement by Copyscape

About the Author

Raj.Trivedi
Full Name: Raj Trivedi
Member Level:
Member Status: Member,MVP
Member Since: 6/16/2012 2:04:41 AM
Country: India
Regard's Raj.Trivedi "Sharing is Caring" Please mark as answer if your Query is resolved
http://www.dotnetfunda.com/profile/raj.trivedi.aspx
Raj Trivedi i.e. me started my career as Support Professional and then moved on the Software development eventually reached at these skills Software Development | Enthusiastic Blogger | Content Writer | Technical Writer | Problem Solver | Lecturer on Technology Subjects | Runnerup Award Winner on www.dotnetfunda.com and firm believer in Sharing as a way of Caring Yet this much achieved its still a long way to go and there is biggest dream lying to be one of the best entrepreneurs of India in Technology Department. The Dream has just started and i hope it follows. Highlights are mentioned in details in my profile at http://in.linkedin.com/pub/raj-trivedi/30/61/b30/

Login to vote for this post.

Comments or Responses

Posted by: Rimi1289 on: 2/19/2013 | Points: 25
Nice article of course.

Rimi.
Posted by: Raj.Trivedi on: 3/10/2013 | Points: 25
Thanks Rimi

Login to post response

Comment using Facebook(Author doesn't get notification)