How to bind checkboxlist using WebMethod and Ajax.

Introduction:     

HI, Here i will explain How to Bind the CheckboxList from Ajax call and Web method. In this Section i will bind the values by selecting the value  in Dropdownlist.I used a drop downlist control and a Divtag with ID 'BindingDiv' Here Value changes by selecting the value in DropdownList. Use JQuery Support Files.

Aspx code :   


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script type="text/javascript">
        function Load_Details() {
      var Regno = document.getElementById('DropDownList2').value;
      $.ajax(
      {
         type: "POST",
         contentType: "application/json;charset=utf-8",
         url: "drop.aspx/LoadstudentDetails",
         data: JSON.stringify({ Regno: Regno }),
         dataType: "json",
         success: Succe,
         error: function (XMLHttpRequest, textStatus, errorThrown) {

             if (XMLHttpRequest.status == 0) {
                        alert(' Check Your Network.');
              } else if (XMLHttpRequest.status == 404) {
                        alert('Requested URL not found.');
              } else if (XMLHttpRequest.status == 500) {
                        alert('Internel Server Error.');
              } else {
              alert('Unknow Error.\n' + XMLHttpRequest.responseText);
                    }
                }
             });

            return false;
        }

        function Succe(result) {
            BindCheck(result);
        }
        function BindCheck(result) {

            var items = JSON.parse(result.d);
            CreateCheckBox(items);
        }
        function CreateCheckBox(checkboxlistItems) {
     
            var table = $('<table></table>');
            var counter = 0;
               $('.Chkclass').remove();
               $('#dvCheckBoxListControl').empty();
               $(checkboxlistItems).each(function ()                            table.append($('<tr></tr>').append($('<td></td>').append($('<input>').attr({
               type: 'checkbox', name: 'chklistitem', value: this.Value, id: 'chklistitem' + counter , class : 'Chkclass'
                })).append(
                $("<label class='Chkclass'>").attr({
                    for: 'chklistitem' + counter++
                }).text(this.StudentName))));
       
            });
               $(checkboxlistItems).each(function () {
               table.append($('<tr></tr>').append($('<td></td>').append($('<input>').attr({
             type: 'checkbox', name: 'chklistitem', value: this.Value, id: 'chklistitem' + counter , class : 'Chkclass'
                })).append(
                $("<label class='Chkclass'>").attr({
                    for: 'chklistitem' + counter++
                }).text(this.StudentID))));
              });

            $('#BindingDiv').append(table);
        }

    </script>
</head>
<body >
    <form id="form1" runat="server">
    <div align="center">
    <br />
    <br />
        <asp:DropDownList ID="DropDownList2" runat="server" onchange="return Load_Details();">
        </asp:DropDownList>
      <div id="BindingDiv">
     
      </div>
    </div>
    </form>
</body>


</html>

C# code :     

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.Script.Serialization;
using System.Web.UI.WebControls;
using System.Data;
using System.Windows.Forms;
using System.Configuration;
using System.Data.SqlClient;
using System.Runtime.Serialization;


namespace GridLoad
{
    public partial class drop : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string Conec = ConfigurationManager.ConnectionStrings["Student"].ConnectionString;
            SqlConnection con = new SqlConnection(Conec);
            con.Open();
            SqlDataAdapter da = new SqlDataAdapter(" select StudentRegistration from StuRegno", con);
            DataTable dt = new DataTable();
            da.Fill(dt);
            DropDownList2.DataSource = dt;
            DropDownList2.DataValueField = dt.Columns["StudentRegistration"].ColumnName.ToString();
            DropDownList2.DataTextField = dt.Columns["StudentRegistration"].ColumnName.ToString();
            DropDownList2.DataBind();

        }

        public class StudentDetails
        {
            public string StudentName { get; set; }
            public string Gender { get; set; }
            public string StudentID { get; set; }

        }

        [System.Web.Services.WebMethod]
        public static string LoadstudentDetails(string Regno)
        {
            string Conec = ConfigurationManager.ConnectionStrings["Student"].ConnectionString;
            SqlConnection con = new SqlConnection(Conec);
            con.Open();
            SqlDataAdapter da = new SqlDataAdapter("SELECT a.StudentID, a.Studentname, a.Gender FROM StudentMarks AS a INNER JOIN StuRegno AS b ON a.StudentID = b.StudentID WHERE  (b.StudentRegistration = '" + Regno + "') ", con);
            DataTable st = new DataTable();
            da.Fill(st);
            List<StudentDetails> details = new List<StudentDetails>();
            foreach (DataRow dtrow in st.Rows)
            {
                StudentDetails obj = new StudentDetails();
                obj.StudentID = dtrow["StudentID"].ToString();
                obj.StudentName = dtrow["StudentName"].ToString();
                obj.Gender = dtrow["Gender"].ToString();
                details.Add(obj);
            }
            JavaScriptSerializer ser = new JavaScriptSerializer();
            return ser.Serialize(details);
        }

    }
}