Introduction:
In this article I will explain how to change the style of radiobutton, checkbox, dropdownlist, textbox and buttons in asp.net using JQuery.
In this article I will explain how to change the style of radiobutton, checkbox, dropdownlist, textbox and buttons in asp.net using JQuery.
Description:
In previous posts I explained many articles relating to JQuery those are fancy zoom effect for image and Change Controls background and border color when validation fails etc. Now I will explain how to change the style of form controls using JQuery in asp.net.
In previous posts I explained many articles relating to JQuery those are fancy zoom effect for image and Change Controls background and border color when validation fails etc. Now I will explain how to change the style of form controls using JQuery in asp.net.
In one of the website I saw registration form that contains controls with rich interface all the controls looking very beautiful. After seen that one I decided to write post to explain about how to change form controls dynamically in asp.net we can implement this functionality easily by using available JQuery plugins.
Initially I created new website and designed Registration form with some controls before apply JQuery plugin functionality our controls will display in default format check below image for controls default format
 |
Now open Visual Studio and create new website after that right click on your website and add new folder and give name as js and insert script files in folder you should get it from attached folder. After that write the following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Change form controls in asp.net using JQuery</title> <link rel="stylesheet" href="jqtransformplugin/jqtransform.css" type="text/css" media="all" /> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js" ></script> <script language="javascript" type="text/javascript"> $(function() { $('form').jqTransform({ imgPath: 'jqtransformplugin/img/' }); }); </script> <style type="text/css"> body{ font-family: Arial; } form{clear:both;} </style> </head> <body> <form id="Form1" runat="server" > <table align="center"> <h2>Billing Information</h2> <tr> <td colspan="2"> <div style="border: 1px solid #CCCCCC; padding: 10px;"> <table> <tr class="rowElem"> <td>First Name:</td> <td><asp:TextBox ID="txtfname" runat="server"/></td> </tr> <tr class="rowElem"> <td>Last Name:</td> <td><asp:TextBox ID="txtlname" runat="server"/></td> </tr> <tr class="rowElem"> <td>Gender:</td> <td> <asp:RadioButtonList ID="rdbGender" runat="server" RepeatDirection="Horizontal"> <asp:ListItem Value="0" Text="Male"></asp:ListItem> <asp:ListItem Value="1" Text="Female"></asp:ListItem> </asp:RadioButtonList> </td> </tr> <tr class="rowElem"> <td>Languages:</td> <td> <asp:CheckBoxList ID="chklang" runat="server" RepeatDirection="Horizontal"> <asp:ListItem Value="0">Telugu</asp:ListItem> <asp:ListItem Value="1">English</asp:ListItem> <asp:ListItem Value="2">Hindi</asp:ListItem> </asp:CheckBoxList> </td> </tr> <tr class="rowElem"> <td>Email:</td> <td><asp:TextBox ID="txtemail" runat="server" /> </td> </tr> <tr class="rowElem"> <td valign="top">Address:</td> <td> <asp:TextBox ID="txtaddress" runat="server" TextMode="MultiLine" Rows="8" Columns="26"/></td> </tr> <tr class="rowElem"> <td>State:</td> <td> <asp:DropDownList ID="ddlState" runat="server" > <asp:ListItem value="">Choose State</asp:ListItem> <asp:ListItem Value="AL">Alabama</asp:ListItem> <asp:ListItem value="AK">Alaska</asp:ListItem> <asp:ListItem value="AL">Alabama </asp:ListItem> <asp:ListItem value="AK">Alaska</asp:ListItem> <asp:ListItem value="AZ">Arizona</asp:ListItem> <asp:ListItem value="AR">Arkansas</asp:ListItem> <asp:ListItem value="CA">California</asp:ListItem> <asp:ListItem value="CO">Colorado</asp:ListItem> <asp:ListItem value="CT">Connecticut</asp:ListItem> <asp:ListItem value="DE">Delaware</asp:ListItem> <asp:ListItem value="FL">Florida</asp:ListItem> <asp:ListItem value="GA">Georgia</asp:ListItem> <asp:ListItem value="HI">Hawaii</asp:ListItem> <asp:ListItem value="ID">Idaho</asp:ListItem> </asp:DropDownList> </td> </tr> <tr class="rowElem"> <td>Zip:</td> <td> <asp:TextBox ID="txtZip" runat="server" /> </td> </tr> <tr class="rowElem"> <td>Credit Card Type:</td> <td> <asp:DropDownList ID="ddlCardType" runat="server" Width="180px" > <asp:ListItem Value="">Choose Credit Card</asp:ListItem> <asp:ListItem value="amex">American Express</asp:ListItem> <asp:ListItem value="discover">Discover</asp:ListItem> <asp:ListItem value="mastercard">MasterCard</asp:ListItem> <asp:ListItem value="visa">Visa</asp:ListItem> </asp:DropDownList> </td> </tr> <tr class="rowElem"> <td></td> <td> <asp:Button ID="btnSubmit" runat="server" Text="Submit"/> </td> </tr> </table> </div> </td> </tr> </table> </form> </body> </html> |
If you observe above code in header section I added some of script files and css files by using those files we have a chance to highlight controls when validation fails using JQuery in asp.net. Here one thing we need to remember that is if we want add style for particular control then we need to add class class="rowElem".
Now run your application and check your form controls style how it would be
Demo
 |
Download sample code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
4 comments :
Thanks for the Valuable posts...Can u Just tell us how to us DataAdapter Update method..???
Waiting for ur Post....
Awesome! I've been looking for a way to make custom bullets and check-boxes in ASP.NET for a while.
Only problem I ran into is, you cannot select a check-box in a check-box list by clicking on its label.
However, if you create individual check-boxes you can associate a label to that check-box.
hi! i need pure asp.net code for adding and selecting check boxes with in dropdownlist
hi,
the post is awesome,but i have problem when using the same jquery along with update panel.Its working on the page load but while partial load in the page the layout goes classic,how to fix it?