Bind DropDownList in ASP.Net Using JQuery

Bind DropDownList in Asp.Net Using JQuery

Then Add New a class as follows

public class clsDropDownList
{
public string DataValueField { get; set; }
public string DataTextField { get; set; }
}

we are using these class properties to set the DataTextField and DataValueField Of DropDownList

In Asp.Net Code Behind File Write this web Method

[WebMethod]
public static List<clsDropDownList> PopulateCountriescls()
{

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
String strQuery = “select CountryID,CountryName from Country”;
var objList = (new[] { new { Text = “–Select–”, Value = 0 } }).ToList();
using (SqlCommand cmd = new SqlCommand(strQuery, con))
{
//cmd.Parameters.AddWithValue(“@Name”, strName);
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
con.Open();
da.Fill(dt);
con.Close();
List<clsDropDownList> lst = new List<clsDropDownList>();
for (int i = 0; i < dt.Rows.Count; i++)
{
lst.Add(new clsDropDownList { DataValueField = Convert.ToString(dt.Rows[i]["CountryID"]), DataTextField =
Convert.ToString(dt.Rows[i]["CountryName"]) });
}
return lst;
}
}

Add new demo.js file to your application and add following code

function BindDropDownListsByDictionarycls(MethodURL, json, DropDownID) {
$.ajax({
type: “POST”,

contentType: “application/json; charset=utf-8?,
data: ‘{}',
url: MethodURL,
dataType: “json”,
success: function (data) {
var select = $(DropDownID);
select.children().remove();
select.append($(“<option>”).val(0).text(‘–Select–'));k
if (data.d) {
$(data.d).each(function (index, item) {
select.append($(“<option>”).val(item.DataValueField).text(item.DataTextField));
});
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
alert(errorThrown);
}
});

Add Following Code in source file(.aspx file)