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

Last Reply 7 days ago By dharmendr

Posted 7 days 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 7 days ago.
Posted 7 days 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

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