How to Bind in Dropdownlist in JQuery Ajax json in C# - ProgramIdea

How to Bind Dropdownlist In Using JQuery Ajax In Asp.Net

Here we are binding a dropdownlist using jquery ajax in

Points For Remember:

1. Use Jquery ajax function

2. Use [WebMethod] attribute on BindDropdownlist method.

3. BindDropdownlist method should be static.

4. Create a class Student and use it to store data into list.

5. Use JavaScriptSerializer's Serialize method for returning data into json format.

6. Use $('#<%=DropDownList1.ClientID%>') for Asp.Net dropdownlist ID in JQuery.

7. Add namespace System.Data,System.Data.SqlClient,System.Web.Services and System.Web.Script.Serialization in your c# page

<!DOCTYPE html>


<html xmlns="">

<head runat="server">

    <title>Bind Dropdownlist by Ajax json</title>

    <script src="Script/jquery-1.9.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {


                type: "POST",

                url: "http://localhost:56829/AspNet/DropdownlistAjax.aspx/BindDropdownlist",

                data: {},               

                dataType: "json",

                contentType: "application/json; charset=utf-8",

                success: function (data) {

                    var jsdata = JSON.parse(data.d);

                    $.each(jsdata, function (key, value) {





                error: function (data) {

                    alert("error found");







    <form id="form1" runat="server">


        <asp:DropDownList ID="DropDownList1" runat="server" Height="20px" Width="160px">






C# Codes :

using System.Data;

using System.Data.SqlClient;

using System.Web.Services;

using System.Web.Script.Serialization;


public partial class AspNet_DropdownlistAjax  : System.Web.UI. Page


    protected void Page_Load(object sender, EventArgs e)




    //  Method for binding Dropdownlist


    public static string BindDropdownlist()


        SqlConnection con = new SqlConnection( @"Data Source=JITESH-PC\SQL;Initial

                                                                                                           Catalog=db_Student;Integrated Security=True");


        DataTable dt = new DataTable();

        SqlDataAdapter da = new SqlDataAdapter( "Select ID, Name from tbl_student" , con);





        List<Student> liststudent = new List<Student>();


        if (dt.Rows.Count > 0)


            for (int  i = 0; i < dt.Rows.Count; i++)


                Student objst = new Student();

                objst.ID = Convert.ToInt32(dt.Rows[i]["ID"]);

                objst.Name = Convert.ToString(dt.Rows[i]["Name"]);

                liststudent.Insert(i, objst);




        JavaScriptSerializer jscript = new JavaScriptSerializer();

        return jscript.Serialize(liststudent);



    public class Student


        public int ID { get; set ; }

        public string Name { get; set ; }



View output :