Click here to Skip to main content
15,867,568 members
Articles / Web Development / HTML

Bind DropDownList from DataTable using AJAX WebMethod

16 Apr 2014CPOL 36.8K   417   9   5
We will see one example of how to bind one DropDownList using jQuery Ajax and C# WebMethod.

DropDownList Bound from Ajax WebMethod

DropDownList Bound from Ajax WebMethod

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 from aspx 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.

C#
/// <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.

JavaScript
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.

XML returned from WebMethod

XML returned from WebMethod

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.

Image 3 Image 4

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Proud Indian | Author | TEDx Speaker | Microsoft MVP | CodeProject MVP | Speaker | DZone Most Valuable Blogger| jsfiddler

My Website

taditdash.com

Programming Community Profiles

jsfiddle | Stack Overflow

Social Profiles

Facebook | Twitter | LinkedIn

Awards


  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016, 2017, 2018
  3. Code Project MVP 2014, 2015, 2016
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013

Comments and Discussions

 
QuestionFantastic Pin
Rahul VB30-Apr-14 7:33
professionalRahul VB30-Apr-14 7:33 
AnswerRe: Fantastic Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)30-Apr-14 7:39
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)30-Apr-14 7:39 
GeneralMy vote of 5 Pin
Volynsky Alex16-Apr-14 23:05
professionalVolynsky Alex16-Apr-14 23:05 
Nice
GeneralRe: My vote of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)16-Apr-14 23:22
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)16-Apr-14 23:22 
GeneralRe: My vote of 5 Pin
Volynsky Alex16-Apr-14 23:28
professionalVolynsky Alex16-Apr-14 23:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.