Populate (Bind) CheckBoxList from database using jQuery AJAX in ASP.Net

Hi SajidHussa,

Check this sample. now take its reference.

Database

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

Download Northwind Database

HTML

    <div id="dvCountries"></div><br />
    <input type="button" id="btnSave" value="Save" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "Default.aspx/GetCountries",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var table = $('<table></table>');
                    $(r.d).each(function (index, item) {
                        var i = parseInt(index) + 1;
                        table.append($('<tr></tr>')
                                    .append($('<td></td>')
                                            .append($('<input>').attr({
                                                'id': 'chk' + i,
                                                'type': 'checkbox',
                                                'name': 'country',
                                                'value': item.Value
                                            }))
                                            .append($("<label>").attr(
                                            {
                                                'for': 'chk' + i
                                            })
                                            .text(item.Text))
                                    ));
                    });
                    $('#dvCountries').append(table);
                }
            });

            $('#btnSave').on('click', function () {
                var message = "";
                $('input[name=country]').each(function (index, item) {
                    if ($(this).is(":checked")) {
                        var id = $(this).val();
                        var country = $(this).closest('tr').find('label').html();
                        message += "Id : " + id + "    Country : " + country + "\n";
                    }
                });
                alert(message);
            });
        });
    </script>

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 List<ListItem> GetCountries()
{
    string query = "SELECT TOP 5 CustomerId, Country FROM Customers";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            List<ListItem> countries = new List<ListItem>();
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    countries.Add(new ListItem
                    {
                        Value = sdr["CustomerId"].ToString(),
                        Text = sdr["Country"].ToString()
                    });
                }
            }
            con.Close();

            return countries;
        }
    }
}

VB.Net

<WebMethod()> _
Public Shared Function GetCountries() As List(Of ListItem)
    Dim query As String = "SELECT TOP 5 CustomerId, Country FROM Customers"
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand(query)
            Dim countries As List(Of ListItem) = New List(Of ListItem)()
            cmd.CommandType = CommandType.Text
            cmd.Connection = con
            con.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    countries.Add(New ListItem With {
                        .Value = sdr("CustomerId").ToString(),
                        .Text = sdr("Country").ToString()
                    })
                End While
            End Using
            con.Close()

            Return countries
        End Using
    End Using
End Function

Screenshot