Dynamically Changing the Style Sheets of the Controls

Jul

5th

Dynamically Changing the Style Sheets of the Controls

Author: admin | Files under Asp.net, tutorials

Introduction

HTML tags define the content of the document. To format the content, new HTML tags and attributes are introduced, but, later on, it become hard to manage them. As we all know that, it is always good to separate the document content from its presentation, this can be achieved using the style sheets.

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files.

Now, the topic is about controls. Some times we may need to change the appearance of controls dynamically at run time. For example, at runtime I want to apply style sheets to a control to change it appearance.

By keeping these kinds of requirements in mind, Microsoft developed in addition to the appearance properties (like Bold, size) and style objects (like FontInfo), two new properties which allow you to manipulate CSS styles more directly as follows:

CssClass
Style

In this tutorial I will try to explain how to use these two properties with examples in the following sections:

Change the style of label control using the CssClass Property
Hide or Display the label Control using the Style Property

Change the style of label control using the CssClass property

First we will look at the HTML part of the code, so that we can discuss about it:

<html >
<head id="Head2" runat="server">
<title>CssClass Property Example</title>
<style type="text/css">
.CssStyle1
{
font: 10pt Verdana;
font-weight:700;
color: Green;
}
.CssStyle2
{
font: 15pt Times;
font-weight:250;
color: Blue;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>Style Property of a Web Control</h3>
<asp:Label id="Label1" Text="This is a label control."
CssClass="CssClass1"
runat="server"/>
<p>
<asp:Button id="Button1" Text="Click to hide or unhide the label"
OnClick="Button1_Click" runat="server"/>
</p>
</div>
</form>
</body>
</html>

Did you observed that with in the <style > tags there is a css style which contains .CssStyle1, .CssStyle2 and with in the body we have label and button controls, where Label control have CssClass property set with the “CssClass1” style sheet and the button control’s “onlick” event have a call back function called “Button_click”.

Now, when the user press the button, “Button_Click” event is fired and in this function we change the style sheet of the label control dynamically using the CssClass property as follows:

<script runat="server">
Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
If Label1.CssClass = "CssStyle1" Then
Label1.CssClass = "CssStyle2"
Else
Label1.CssClass = "CssStyle1"
End If
End Sub
</script>

How simple it is right!! Using the style properties is also simple. I will explain it in the below section.

Hide or display the label control using the style property

HTML part of the code is same as the above but, in this example we will use style property of the control as follows:

<html>
<head id="Head2" runat="server">
<title>Style Property Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>Style Property of a Web Control</h3>
<asp:Label id="Label1" Text="This is a label control."
BorderStyle="Solid" runat="server"/>
<p>
<asp:Button id="Button1" Text="Click to hide or unhide the label"
OnClick="Button1_Click" runat="server"/>
</p>
</div>
</form>
</body>
</html>

The <head> tag just have title and with in body of the html we have a label and button control.Where the button control “onclick” event have a call back function called “Button_click”.

In the Button_click function, we will show or hide the label control using the style property as follows:

<script runat="server">
Sub Button1_Click(sender As Object, e As EventArgs)
If Label1.Style("visibility") = "hidden" Then
Label1.Style("visibility") = "show"
Else
Label1.Style("visibility") = "hidden"
End If
End Sub
</script>

High On MicroSoft