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.
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title>Changing the Control Style</title>
- <style type="text/css">
- .Style1
- {
- background-color: Red;
- }
- .Style2
- {
- background-color: Blue;
- }
- </style>
- </head>
- <body>
- <form id="form1" runat="server">
- <asp:RadioButton ID="RadioButton1" runat="server" Text="Red" GroupName="1" Checked="True" AutoPostBack="True" />
- <asp:RadioButton ID="RadioButton2" runat="server" Text="Blue" GroupName="1" AutoPostBack="True" />
- <!– Styling the table based on the radio button selection. –>
- <table class="<% if(RadioButton1.Checked) { %> Style1 <% } else { %> Style2 <% } %>">
- <tr>
- <td> See the change… </td>
- </tr>
- <tr>
- <td> </td>
- </tr>
- </table>
- <asp:TextBox ID="TextBox1" runat="server" MaxLength="3"></asp:TextBox>
- <!– Styling the button based on the textbox value. –>
- <input id="Button1" type="submit" value="button"
- class="<% if(TextBox1.Text=="") { %> Style1 <% } else { %> Style2 <% } %>" />
- </form>
- </body>
- </html>
Output looks as below.
