在Web开发中，动态绑定DropDownList控件是一种常见的需求。本文将介绍如何使用jQueryAjax和C#WebMethod来实现这一功能。
首先，需要在Code Behind页面中添加一个WebMethod。这个WebMethod将返回一个包含DropDownList项的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;
}
在上面的代码中，创建了一个名为"GetDropDownItems"的WebMethod。这个方法接收一个名为"tableName"的参数，然后创建一个包含两个列（OptionValue和OptionText）的DataTable。接着，向这个DataTable中添加了一些示例数据。最后，将这个DataTable转换为XML字符串并返回。
接下来，需要在aspx页面中调用这个WebMethod，并将返回的数据绑定到DropDownList控件上。这可以通过使用jQueryAjax来实现。
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.attr("value", OptionValue);
ddlTestDropDownListXML.append(option);
});
},
failure: function(response) {
alert(response.d);
}
});
}
在上面的JavaScript代码中，定义了一个名为"GetDropDownData"的函数。这个函数使用jQueryAjax调用"GetDropDownItems" WebMethod，并传递一个名为"tableName"的参数。当Ajax调用成功时，从返回的XML中找到名为"tableName"的节点，并遍历它的每个子节点（即每一行）。对于每一行，提取OptionValue和OptionText的值，并创建一个新的Option元素，将其添加到DropDownList控件中。
在调用WebMethod时，传递了一个名为"tableName"的参数。这个参数将作为返回的XML的父节点。在Firebug Console中查看返回的XML结构，可以看到"someTableName"是一个包含OptionText和OptionValue的节点。这些实际上是转换为XML之前的Dummy DataTable的行。