Bind DropDownList in ASP.Net Using JQuery

This blog defines how to 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) 

<script src=Script/Demo.js”  type=”text/javascript”></script>

<script src="”http://code.jquery.com/jquery-1.9.1.js&#8221;" type="”text/javascript”"></script>
<script src="”http://code.jquery.com/ui/1.10.2/jquery-ui.js&#8221;" type="”text/javascript”"></script>
<div>

    <table>
        <tr>
            <td>
                Select Country:
            </td>
            <td>
                <asp:dropdownlist id="”ddlcountry”" runat="”server”">
</asp:dropdownlist>
            </td>
        </tr>
        <tr>
            <td>
                <input type="”button”" value="”Show”" id="”btnShow”" />
            </td>
        </tr>
    </table>
</div>
<script type="”text/javascript”">
$(document).ready(function () {
var obj = {};
obj["A"] = “0?;
var json = JSON.stringify(obj);
// FillDataset(“AutoCompleteDropDownList.aspx/PopulateCountries”, json, success);
// BindDropDownListsByDictionary(“AutoCompleteDropDownList.aspx/PopulateCountries”, json, “#ddlcountry”);
BindDropDownListsByDictionarycls(“AutoCompleteDropDownList.aspx/PopulateCountriescls”, json, “#ddlcountry”);
});
$(‘#btnShow').click(function () {
alert($(‘#ddlcountry').find(‘option:selected').val() + ‘:' + $(‘#ddlcountry').find(‘option:selected').text());
});
</script>