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 :
