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()
{
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”,
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”"
type="”text/javascript”"></script>
<script
src="”http://code.jquery.com/ui/1.10.2/jquery-ui.js”"
type="”text/javascript”"></script>
<div>
<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>
praveen semwalPosted Dec 17, 2014, 3:31 AM
Dear