Click here to Skip to main content
11,480,847 members (64,267 online)
Click here to Skip to main content

Bind DropDownList from DataTable using AJAX WebMethod

, 16 Apr 2014 CPOL 11.9K 228 8
Rate this:
Please Sign up or sign in to vote.
We will see one Example to bind one DropDownList using jQuery Ajax and C# WebMethod.
DropDownList Bound from Ajax WebMethod

DropDownList Bound from Ajax WebMethod


We will see one Example to bind one DropDownList using jQuery Ajax and C# WebMethod.

How?

Easy !!!

  • Add a WebMethod to Code Behind page
  • Call to 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.

/// <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 paramter.
    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 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.


License

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

Share

About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer Mindfire Solutions
India India
NOW I am a Conference Speaker. Please invite me to your College, Company, Event or Conference !!!

Proud Indian | Microsoft MVP | CodeProject MVP | Author | DZone Most Valuable Blogger | Community Expert | Moderator | jsfiddler | Cricketer | Cook | Dancer

Currently working @Mindfire Solutions.
Love to code and help guys to Trap the Bug.

My Tech Blog

taditdash.wordpress.com

Programming Community Profiles

jsfiddle | Stack Overflow

Other Blog Profiles

Mindfire CRM Team Blog | Mindfire Blog

Social Profiles

Facebook | Twitter | LinkedIn | Google+

Awards

  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014
  3. Code Project MVP 2014
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionFantastic Pin
Rahul VB30-Apr-14 8:33
professionalRahul VB30-Apr-14 8:33 
AnswerRe: Fantastic Pin
Tadit Dash30-Apr-14 8:39
protectorTadit Dash30-Apr-14 8:39 
GeneralMy vote of 5 Pin
Volynsky Alex17-Apr-14 0:05
professionalVolynsky Alex17-Apr-14 0:05 
GeneralRe: My vote of 5 Pin
Tadit Dash17-Apr-14 0:22
protectorTadit Dash17-Apr-14 0:22 
GeneralRe: My vote of 5 Pin
Volynsky Alex17-Apr-14 0:28
professionalVolynsky Alex17-Apr-14 0:28 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 17 Apr 2014
Article Copyright 2014 by Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid