Yahoo Search


Search the web Search this site

Live Search

Google Search

Custom Search

Translate this Web Site to

Friday, July 23, 2010

Changing the Control Style at Runtime using the ASPX

Recently I changed the style of some controls in my ASPX page at runtime based on the values set on another control in my page. For example the color of the table is changed based on the radio button that was selected and the color of the button is changed according to the text that was typed in the textbox. Hope this is helpful.





  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3.     <title>Changing the Control Style</title>
  4.      <style type="text/css">
  5.         .Style1
  6.         {
  7.             background-color: Red;
  8.         }
  9.         .Style2
  10.         {
  11.             background-color: Blue;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <form id="form1" runat="server">
  17.         <asp:RadioButton ID="RadioButton1" runat="server" Text="Red" GroupName="1" Checked="True" AutoPostBack="True" />
  18.         <asp:RadioButton ID="RadioButton2" runat="server" Text="Blue" GroupName="1" AutoPostBack="True" />
  19.         <!-- Styling the table based on the radio button selection. -->
  20.         <table class="<% if(RadioButton1.Checked) { %> Style1 <% } else { %> Style2 <% } %>">
  21.             <tr>
  22.                 <td> &nbsp; See the change... </td>
  23.             </tr>
  24.             <tr>
  25.                 <td> &nbsp; </td>
  26.             </tr>
  27.         </table>
  28.         <asp:TextBox ID="TextBox1" runat="server" MaxLength="3"></asp:TextBox>
  29.         <!-- Styling the button based on the textbox value. -->
  30.         <input id="Button1" type="submit" value="button"
  31.                class="<% if(TextBox1.Text=="") { %> Style1 <% } else { %> Style2 <% } %>" />
  32.     </form>
  33. </body>
  34. </html>




Output looks as below.

Post a Comment