Populate HTML CheckBoxList using jQuery Ajax and save save selected value in Database in ASP.Net

Last Reply 4 months ago By dharmendr

Posted 4 months ago

i want to bind data in checkboxlist and fetch there value and store in table and save into databse using ajax json.


You are viewing reply posted by: dharmendr 4 months ago.
Posted 4 months ago

Hi SajidHussa,

Check this example. Now please take its reference and correct your code. Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
            type: "POST",
            url: "Default.aspx/GetEmployees",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var xmlDoc = $.parseXML(response.d);
                var xml = $(xmlDoc);
                var customers = xml.find("Employees");
                var cell = $("[id*=tblCheckBoxItem] td").eq(0).clone(true);
                $("[id*=tblCheckBoxItem] tr").remove();
                $.each(customers, function (i) {
                    var id = $(this).find("EmployeeID").text();
                    var name = $(this).find("Name").text()
                    var row = $("<tr />");
                    $("[id*=tblCheckBoxItem] tbody").append(row);

                    $("input", cell).val(id);
                    $("label", cell).html(name);
                    var html = $("[id*=tblCheckBoxItem] ").html();
                    cell = $("[id*=tblCheckBoxItem]  td").eq(0).clone(true);
            }, error: function (response) {

        $('[id*=btnSave]').on('click', function () {
            $("[id*=tblCheckBoxItem] tr").each(function () {
                if ($(this).find('input').is(':checked')) {
                    var name = $(this).find('label').text();
                    var id = $(this).find('input').val();
                    alert(id + '\n' + name);
                    // Make Ajax call to save in database.
<table id="tblCheckBoxItem">
            <input type="checkbox" /><label></label>
<br />
<input type="button" value="Save" id="btnSave" />



using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;


Imports System.Configuration
Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services



public static string GetEmployees()
    string query = "SELECT EmployeeID, FirstName+' '+LastName 'Name' FROM Employees";
    SqlCommand cmd = new SqlCommand(query);
    return GetData(cmd).GetXml();
private static DataSet GetData(SqlCommand cmd)
    string strConnString = ConfigurationManager.ConnectionStrings["conStr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
        using (SqlDataAdapter sda = new SqlDataAdapter())
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
                sda.Fill(ds, "Employees");
                return ds;


<WebMethod()> _
Public Shared Function GetEmployees() As String
    Dim query As String = "SELECT EmployeeID, FirstName+' '+LastName 'Name' FROM Employees"
    Dim cmd As SqlCommand = New SqlCommand(query)
    Return GetData(cmd).GetXml()
End Function

Private Shared Function GetData(ByVal cmd As SqlCommand) As DataSet
    Dim strConnString As String = ConfigurationManager.ConnectionStrings("conStr").ConnectionString
    Using con As SqlConnection = New SqlConnection(strConnString)
        Using sda As SqlDataAdapter = New SqlDataAdapter()
            cmd.Connection = con
            sda.SelectCommand = cmd
            Using ds As DataSet = New DataSet()
                sda.Fill(ds, "Employees")
                Return ds
            End Using
        End Using
    End Using
End Function