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.

CREATETABLE[dbo].[tblMemberHobbies](
[HobbyID][int] IDENTITY(1, 1) NOTNULL, [HobbyType][nvarchar](50) NULL) ON[PRIMARY]

The sample data in tblMemberHobbies is given below.

Create a table in SQL Server in your database table named “tblMemberIncomeGroups”.

CREATETABLE[dbo].[tblMemberIncomeGroups](
[IncomeGroupID][int] IDENTITY(1, 1) NOTNULL, [IncomeGroupTitle][nvarchar](50) NULL, [IncomeGroupDescription][nvarchar](500) NULL) ON[PRIMARY]

The sample data in tblMemberIncomeGroups is given below.

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

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

We are going to create two new folders, which are given below.

Scripts
Styles

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.

jquery-1.11.3.min.js
jquery-ui.js
Jquery-ui.min.js

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

jquery-ui.css
Jquery-ui.min.css

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

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

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

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

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 ].

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

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

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

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

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.

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.

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>
<!DOCTYPEhtml>
<htmlxmlns="http//www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<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>
<%--Jquery UI CSS link--%>
<linkhref="styles/jquery-ui.css" rel="stylesheet" />
<%--Jquery version 1.11.3 min file link--%>
<scriptsrc="scripts/jquery-1.11.3.min.js">
</script>
<%--Jquery UI JS file link--%>
<scriptsrc="scripts/jquery-ui.js">
</script>
<scripttype="text/javascript"> $(document).ready(function () { $("#
<%= rblIncomeGroup.ClientID %>").buttonset(); $("#
<%= cblHobbies.ClientID %>").buttonset(); }); </script>
</head>
<body>
<formid="form1" runat="server">
<div>
<tablestyle="width 100%;">
<tr>
<tdclass="auto-style3">Member Name</td>
<td>
<aspTextBoxID="txtMemberName" runat="server" Width="342px"></aspTextBox>
</td>
<td> </td>
</tr>
<tr>
<tdclass="auto-style3">Email ID</td>
<td>
<aspTextBoxID="txtEmailID" runat="server" Width="342px"></aspTextBox>
</td>
<td> </td>
</tr>
<tr>
<tdclass="auto-style4">Income Group</td>
<tdclass="auto-style2">
<h3>Asp.Net RadioButton List Control You can select one option</h3>
<aspRadioButtonListID="rblIncomeGroup" runat="server" BorderStyle="Groove" BorderWidth="10px" CellSpacing="10"> </aspRadioButtonList>
</td>
<tdclass="auto-style2">
</td>
</tr>
<tr>
<tdclass="auto-style5">Hobbies</td>
<tdclass="auto-style1">
<h3>Asp.Net CheckBox List Control You can select one or more than one options</h3>
<aspCheckBoxListID="cblHobbies" runat="server" RepeatDirection="Horizontal" BorderStyle="Ridge" CellSpacing="10"> </aspCheckBoxList>
</td>
<tdclass="auto-style1">
</td>
</tr>
<tr>
<tdclass="auto-style3">Remarks</td>
<td>
<aspTextBoxID="txtRemarks" runat="server" Height="114px" TextMode="MultiLine" Width="344px"></aspTextBox>
</td>
<td> </td>
</tr>
<tr>
<tdclass="auto-style3"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<tdcolspan="2">
<aspButtonID="btnSubmit" runat="server" Font-Bold="True" Text="Submit" Width="112px" /> </td>
<td> </td>
</tr>
<tr>
<tdclass="auto-style3"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<tdclass="auto-style3"> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</form>
</body>
</html>

Full Code of Default.aspx.cs page

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
publicpartialclass_Default System.Web.UI.Page {
protectedvoid Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
var db = newMembersDataClassesDataContext();
cblHobbies.DataSource = (from a in db.tblMemberHobbies select a).ToList();
cblHobbies.DataTextField = "HobbyType";
cblHobbies.DataValueField = "HobbyID";
cblHobbies.DataBind();
rblIncomeGroup.DataSource = (from a in db.tblMemberIncomeGroups select a).ToList();
rblIncomeGroup.DataTextField = "IncomeGroupTitle";
rblIncomeGroup.DataValueField = "IncomeGroupID";
rblIncomeGroup.DataBind();
}
}
}

Output

By Default, the page renders, as shown below.

After selection, enter the details in the form.

Happy coding.

5 Comments

Join the conversation! Your thoughts help the community grow.

Jignesh Desai7y ago
You saved my hours. Just awesome example.
Sandeep Ch9y ago
Thanks Manoj and Good explanation :)
- Manoj Kalla9y ago
  Thank you Sandeep Ch sir..
Rakesh9y ago
Good explain sir ..................................
- Manoj Kalla9y ago
  Thank you.....rakesh sir ji