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

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

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            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);
                    row.append(cell);
                    var html = $("[id*=tblCheckBoxItem] ").html();
                    cell = $("[id*=tblCheckBoxItem]  td").eq(0).clone(true);
                });
            }, error: function (response) {
                alert(response.d);
            }
        });

        $('[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.
                }
            });
        });
    });
</script>
<table id="tblCheckBoxItem">
    <tr>
        <td>
            <input type="checkbox" /><label></label>
        </td>
    </tr>
</table>
<br />
<input type="button" value="Save" id="btnSave" />

Namespaces

C#

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

VB.Net

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

Code

C#

[WebMethod]
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;
            }
        }
    }
}

VB.Net

<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