Jitesh Byahut 2/25/2014 2111

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

Here we are binding a dropdownlist using jquery ajax in asp.net.

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="http://www.w3.org/1999/xhtml">

<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 () {

            $.ajax({

                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) {

                        $('#<%=DropDownList1.ClientID%>')

                                                              .append($("<option></option>").val(value.ID).html(value.Name));

                    });

                },

                error: function (data) {

                    alert("error found");

                }

            });

        });

    </script>

</head>

<body>

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

    <div>

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

        </asp:DropDownList>

    </div>

    </form>

</body>

</html>

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

    [WebMethod]

    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);

        con.Open();

        da.Fill(dt);

        con.Close();

 

        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 :

Demo


Please give your feedback for improving this page