Post
Ask Question

How To Use JQuery UI For CheckBox List and Radio Button List In ASP.NET

You can change the look of RadioButton list and CheckBox list with the help of jQuery-UI. With jQquery-UI, we can achieve lots of other features. You can visit the Website for more information.

jQuery UI is a very lightweight tool to design good looking web applications, at least, if we are comfortable with or at least understand HTML, CSSS and JavaScript, jQuery easily, because jQuery-UI uses the same.

After attaching jQuery-UI with RadioButton list and CheckBox list, it looks great.

We will generate items of RadioButton list and CheckBox list from the database.

Step by Step Implementation

We are going to create a membership form in which we will ask for the things given below from the user.

  • Member Name (TextBox)
  • Member Email ID (TextBox)
  • Member Income Group (RadioButton List).
  • Member Hobbies (CheckBox List)

Before starting any activities in Visual Studio, first we are going to create two tables, which are

  • tblMemberHobbies
  • tblMemberIncomeGroups

Create a table in SQL Server in your database table named as “tblMemberHobbies”. My database name is MBKTest.

  1. CREATETABLE[dbo].[tblMemberHobbies](  
  2.     [HobbyID][int] IDENTITY(1, 1) NOTNULL, [HobbyType][nvarchar](50) NULL) ON[PRIMARY]  
The sample data in tblMemberHobbies is given below.

Sql Server 

Create a table in SQL Server in your database table named “tblMemberIncomeGroups”.
  1. CREATETABLE[dbo].[tblMemberIncomeGroups](  
  2.     [IncomeGroupID][int] IDENTITY(1, 1) NOTNULL, [IncomeGroupTitle][nvarchar](50) NULL, [IncomeGroupDescription][nvarchar](500) NULL) ON[PRIMARY]  
The sample data in tblMemberIncomeGroups is given below.

Sql Server

Create a new ASP.NET empty Website project called “JqueryUiRadioButtonCheckBox”.

Sql Server

Right click on the project and select Add-->Add New Item and select New Folder.

Sql Server

We are going to create two new folders, which are given below.
  1. Scripts
  2. Styles

Sql Server

After the creation of two folders, your Solution Explorer will look as shown above.

In SCRIPTS folder, we have to copy the files given below.

  1. jquery-1.11.3.min.js
  2. jquery-ui.js
  3. Jquery-ui.min.js

In STYLES folder, we have to copy the files given below.

  1. jquery-ui.css
  2. Jquery-ui.min.css

Right click on project and select Add-->Add New Item and select WebForm

Sql Server

Add a new Web Form named “Default.aspx”. In this page, accept the user entry for the membership form.

Sql Server

Right click on the project and select Add-->Add New Item and select LINQ to SQL Classes.

Sql Server

Sql Server

As you click ADD button on the screen as shown above, you will see the dialog box.

Sql Server

It asks for Yes/No/Cancel. If you press Yes, this will create a DBML file inside App_Code folder. If you press No, this will create on the root.

What is the benefit of pressing Yes?

Because in App_Code folder, all the source files are compiled into one DLL file.

Switch to Server Explorer or activate Server Explorer by pressing [ Ctrl+Alt+S = Server Explorer ]. 

Sql Server

Right click on Data Connection and select Add connection after establishing connection to SQL Server database.

Sql Server

Drag and drop the table on the MemberDataClasses.dbml file canvas.

I dragged and dropped two tables from Server Explorer from MBKTest database.

Sql Server

So far, your Solution Explorer should look as shown below.

Sql Server

Now switch to Default.aspx page

Drag and drop the controls, as shown below.

Form Field Control Used Control Used Description
Member Name TextBox To receive name of member
Member Email ID TextBox To receive Email id of member.
Member Income Group RadioButton List To display income group list
Member Hobbies CheckBox List To display hobbies list.

In design mode, your Default.aspx page looks, as shown below.

Sql Server
 
In the code given below, you can see we had linked jQUERY, jQUERY UI CSS and JS files in head section of the page.

The full code of Default.aspx page is given below.

  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>  
  2.     <!DOCTYPEhtml>  
  3.     <htmlxmlns="http//www.w3.org/1999/xhtml">  
  4.         <headrunat="server">  
  5.             <title></title>  
  6.             <styletype="text/css"> .auto-style1 { height 23px; } .auto-style2 { height 31px; } .auto-style3 { width 99px; } .auto-style4 { height 31px; width 99px; } .auto-style5 { height 23px; width 99px; } </style>  
  7.                 <%--Jquery UI CSS link--%>  
  8.                     <linkhref="styles/jquery-ui.css" rel="stylesheet" />  
  9.                     <%--Jquery version 1.11.3 min file link--%>  
  10.                         <scriptsrc="scripts/jquery-1.11.3.min.js">  
  11.                             </script>  
  12.                             <%--Jquery UI JS file link--%>  
  13.                                 <scriptsrc="scripts/jquery-ui.js">  
  14.                                     </script>  
  15.                                     <scripttype="text/javascript"> $(document).ready(function () { $("#  
  16.                                         <%= rblIncomeGroup.ClientID %>").buttonset(); $("#  
  17.                                             <%= cblHobbies.ClientID %>").buttonset(); }); </script>  
  18.                                                 </head>  
  19.   
  20.                                                 <body>  
  21.                                                     <formid="form1" runat="server">  
  22.                                                         <div>  
  23.                                                             <tablestyle="width 100%;">  
  24.                                                                 <tr>  
  25.                                                                     <tdclass="auto-style3">Member Name</td>  
  26.                                                                         <td>  
  27.                                                                             <aspTextBoxID="txtMemberName" runat="server" Width="342px"></aspTextBox>  
  28.                                                                         </td>  
  29.                                                                         <td> </td>  
  30.                                                                 </tr>  
  31.                                                                 <tr>  
  32.                                                                     <tdclass="auto-style3">Email ID</td>  
  33.                                                                         <td>  
  34.                                                                             <aspTextBoxID="txtEmailID" runat="server" Width="342px"></aspTextBox>  
  35.                                                                         </td>  
  36.                                                                         <td> </td>  
  37.                                                                 </tr>  
  38.                                                                 <tr>  
  39.                                                                     <tdclass="auto-style4">Income Group</td>  
  40.                                                                         <tdclass="auto-style2">  
  41.                                                                             <h3>Asp.Net RadioButton List Control  You can select one option</h3>  
  42.                                                                             <aspRadioButtonListID="rblIncomeGroup" runat="server" BorderStyle="Groove" BorderWidth="10px" CellSpacing="10"> </aspRadioButtonList>  
  43.                                                                                 </td>  
  44.                                                                                 <tdclass="auto-style2">  
  45.                                                                                     </td>  
  46.                                                                 </tr>  
  47.                                                                 <tr>  
  48.                                                                     <tdclass="auto-style5">Hobbies</td>  
  49.                                                                         <tdclass="auto-style1">  
  50.                                                                             <h3>Asp.Net CheckBox List Control  You can select one or more than one options</h3>  
  51.                                                                             <aspCheckBoxListID="cblHobbies" runat="server" RepeatDirection="Horizontal" BorderStyle="Ridge" CellSpacing="10"> </aspCheckBoxList>  
  52.                                                                                 </td>  
  53.                                                                                 <tdclass="auto-style1">  
  54.                                                                                     </td>  
  55.                                                                 </tr>  
  56.                                                                 <tr>  
  57.                                                                     <tdclass="auto-style3">Remarks</td>  
  58.                                                                         <td>  
  59.                                                                             <aspTextBoxID="txtRemarks" runat="server" Height="114px" TextMode="MultiLine" Width="344px"></aspTextBox>  
  60.                                                                         </td>  
  61.                                                                         <td> </td>  
  62.                                                                 </tr>  
  63.                                                                 <tr>  
  64.                                                                     <tdclass="auto-style3"> </td>  
  65.                                                                         <td> </td>  
  66.                                                                         <td> </td>  
  67.                                                                 </tr>  
  68.                                                                 <tr>  
  69.                                                                     <tdcolspan="2">  
  70.                                                                         <aspButtonID="btnSubmit" runat="server" Font-Bold="True" Text="Submit" Width="112px" /> </td>  
  71.                                                                         <td> </td>  
  72.                                                                 </tr>  
  73.                                                                 <tr>  
  74.                                                                     <tdclass="auto-style3"> </td>  
  75.                                                                         <td> </td>  
  76.                                                                         <td> </td>  
  77.                                                                 </tr>  
  78.                                                                 <tr>  
  79.                                                                     <tdclass="auto-style3"> </td>  
  80.                                                                         <td> </td>  
  81.                                                                         <td> </td>  
  82.                                                                 </tr>  
  83.                                                                 </table>  
  84.                                                         </div>  
  85.                                                         </form>  
  86.                                                 </body>  
  87.   
  88.                                                 </html>  
Full Code of Default.aspx.cs page
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. publicpartialclass_Default System.Web.UI.Page {  
  8.     protectedvoid Page_Load(object sender, EventArgs e) {  
  9.         if (!IsPostBack) {  
  10.             var db = newMembersDataClassesDataContext();  
  11.             cblHobbies.DataSource = (from a in db.tblMemberHobbies select a).ToList();  
  12.             cblHobbies.DataTextField = "HobbyType";  
  13.             cblHobbies.DataValueField = "HobbyID";  
  14.             cblHobbies.DataBind();  
  15.             rblIncomeGroup.DataSource = (from a in db.tblMemberIncomeGroups select a).ToList();  
  16.             rblIncomeGroup.DataTextField = "IncomeGroupTitle";  
  17.             rblIncomeGroup.DataValueField = "IncomeGroupID";  
  18.             rblIncomeGroup.DataBind();  
  19.         }  
  20.     }  
  21. }  
Output

By Default, the page renders, as shown below.

Sql Server

After selection, enter the details in the form.

Sql Server

Happy coding.


Similar Articles