Bind DropDownList from DataTable using AJAX WebMethod

• Download source code - 18.1 KB

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.

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