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

Manoj Kalla
7y
13.4k
0
3

Article

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.

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.

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

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

Sql Server

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.

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

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.

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.

<%@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();
}
}
}