Bind DropDownList from DataTable using AJAX WebMethod
Apr 16, 2014
1 min read
C#
ASP.NET
Javascript
.NET
HTML
Dev
Ajax
Beginner
Intermediate
Advanced
Visual-Studio
VS2010
jQuery
DropDownList
web_development

by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Contributor
5/ 5
We will take a look at one example of how to bind one DropDownList
using jQuery Ajax
and C# WebMethod
.
How?
Easy !!!
- Add a
WebMethod
to Code Behind page - Call that
WebMethod
fromaspx
Page - Bind the
DropDownList
when call succeeds
Let’s See the Code
WebMethod
Here, we are just creating a Dummy DataTable
and converting it to XML
.
/// <summary>
/// This WebMethod returns the XML for a DropDownList having value and text.
/// </summary>
/// <param name="tableName">string: Name of the Table having DropDownList items.</param>
/// <returns>string: XML containing all the items.</returns>
[System.Web.Services.WebMethod]
public static string GetDropDownItems(string tableName)
{
// Create a dummy DataTable.
DataTable dt = new DataTable(tableName);
dt.Columns.Add("OptionValue");
dt.Columns.Add("OptionText");
dt.Rows.Add("0", "Item 0");
dt.Rows.Add("1", "Item 1");
dt.Rows.Add("2", "Item 2");
dt.Rows.Add("3", "Item 3");
dt.Rows.Add("4", "Item 4");
// Convert the DataTable to XML.
string result;
using (StringWriter sw = new StringWriter())
{
dt.WriteXml(sw);
result = sw.ToString();
}
return result;
}
JavaScript GetDropDownData Function
The following function would do a jQuery Ajax
call for the WebMethod
and bind the Data
to the DropDownList
.
function GetDropDownData() {
// Get the DropDownList.
var ddlTestDropDownListXML = $('#ddlTestDropDownListXML');
// Provide Some Table name to pass to the WebMethod as a parameter.
var tableName = "someTableName";
$.ajax({
type: "POST",
url: "BindDropDownList.aspx/GetDropDownItems",
data: '{tableName: "' + tableName + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
// Now find the Table from response and loop through each item (row).
$(response.d).find(tableName).each(function () {
// Get the OptionValue and OptionText Column values.
var OptionValue = $(this).find('OptionValue').text();
var OptionText = $(this).find('OptionText').text();
// Create an Option for DropDownList.
var option = $("<option>" + OptionText + "</option>");
option.attr("value", OptionValue);
ddlTestDropDownListXML.append(option);
});
},
failure: function (response) {
alert(response.d);
}
});
}
Important: We are passing one parameter tableName
to the WebMethod
, which will be the Dummy Table Name and after conversion to XML
, it becomes parent of each Row. Refer to the following screenshot of returned XML Schema as seen inside Firebug Console.
We can see that someTableName
is one one node containing the OptionText
and OptionValue
of a particular Item. These are actually Rows of the Dummy DataTable
before conversion to XML
.
Your Inputs !
Will be highly appreciated. Please feel free to comment. If you like the blog, share this among your friends and colleagues.
CodeProject
License
This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)