![]()
Article posted by
Raj.Trivedi on 2/17/2013 | Views: 4344 | Category:
ASP.NET | Level: Beginner |
Points: 250 
If you found
plagiarised (copied) or inappropriate content,
please
let us know the original source along with your correct email id (to communicate) for further action.
Advertisements
Advertisements
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" />
<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"
If you like this article, subscribe to our 
RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.
Found interesting? Add this to: