C# 使用Ajax自动填充DropDownList

我有两个dropdownlist，它已经绑定在pageload上，我想在启动ajax函数后重新绑定这两个dropdownlist。这里我编写了一个sql server存储过程来获取dropdownlist所需的数据。但是我将如何获得dropdownlist的值，因此，它可以使用ajax功能绑定新数据。该屏幕是使用Asp.net C#coding开发的。

您应该对某种页面进行ajax调用（我建议您添加通用handle），该页面响应xml或json甚至html，包括下拉值和文本字段值，然后在JavaScriptjQuery中读取它并为下拉列表生成html，如下所示

   <select id="ddl">
        <option value="value">text</option>
    </select>

文本

您应该阅读“值”和文本并生成此>

text

---

并附加到ddl中这是asp.net的下拉列表

<asp:DropDownList id="ddlCourse" runat="server" AutoPostBack="false" 
                                    Height="28px" title="Select Course" Width="290px" 
      ></asp:DropDownList>

这是在ajex调用方法中使用的方法，并调用PopulateControl方法来绑定下拉列表

function OnCoursePopulated(response) {

    PopulateControl(response.d,   $('#<%=ddlCourse.ClientID %>'));

}

函数OnCourse（响应）{
PopulateControl（response.d，$（“#”）；
}

以下是PopulateControl方法的说明

function PopulateControl(list, control) {

    if (list.length > 0) {

        control.removeAttr("disabled");

        control.empty().append('<option selected="selected" value="0">Please select</option>');
        $.each(list, function () {


            control.append($("<option></option>").val(this['Value']).html(this['Text']));

        });
    }
    else {
        control.empty().append('<option selected="selected" value="0">Not available<option>');
    }
}

函数PopulateControl（列表，控件）{
如果（list.length>0）{
控制。移除警报（“禁用”）；
control.empty（）.append（'请选择'）；
$。每个（列表、函数（）{
control.append（$（“”）.val（此['Value']）.html（此['Text']）；
});
}
否则{
control.empty（）.append（'notavailable'）；
}
}

---

因此，您最终绑定了下拉列表

您可以尝试以下内容作为演示。服务器端DropDownLists被替换为HTML选择元素，这样就不会发生异常“无效回发或回调参数”。 此演示中的缺点是，回发后不会在表单上恢复值。您可以将其放入Default.aspx中的表单中：

<script type="text/javascript" 
 src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    function populate(populateInitial) {
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '/Default.aspx/populate',
            data: "{'populateInitial': '" + populateInitial + "'}",
            dataType: "json",
            async: false,
            success: function(result) {
                var ddlItems = document.getElementById('ddlItems');
                ddlItems.options.length = 0;
                $.each(result.d, function(key, item) 
                 { ddlItems.options[key] = new Option(item); });
            }
        });
    }
</script>

<form id="form1" runat="server">
<div>     
    <select id="ddlItems" name="ddlItems">
    </select>
    <br />
    <input type="button" onclick="populate('0');" value="Change values" />
    <br />
    Selected item: 
      <asp:Label ID="lblSelectedItem" runat="server" Text=""> </asp:Label>
    <br />
    <asp:Button ID="Button1" runat="server" 
     Text="Write out selected item text" />
</div>

<script type="text/javascript">
    populate('1');
</script>

函数填充（populateInitial）{
$.ajax({
类型：“POST”，
contentType:“应用程序/json；字符集=utf-8”，
url:“/Default.aspx/populate”，
数据：“{'populateInitial'：'”+populateInitial+“'}”，
数据类型：“json”，
async:false，
成功：功能（结果）{
var ddlItems=document.getElementById（'ddlItems'）；
ddleitems.options.length=0；
$.each（结果d、功能（键、项）
{ddletems.options[key]=新选项（项）；}）；
}
});
}




选定项目：


填充（'1'）；

将这些方法放在Default.aspx.cs中：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            lblSelectedItem.Text = Request["ddlItems"].ToString();
        }
    }

    [System.Web.Services.WebMethod()]
    [System.Web.Script.Services.ScriptMethod()]
    public static List<string> populate(string populateInitial)
    {
        if (populateInitial == "1")
            return (new string[] { "a", "b" }).ToList();
        else
            return (new string[] { "c", "d", "e", "f" }).ToList();
    }

受保护的无效页面加载（对象发送方，事件参数e）
{
如果（iPostBack）
{
lblSelectedItem.Text=请求[“ddletems”].ToString（）；
}
}
[System.Web.Services.WebMethod（）]
[System.Web.Script.Services.ScriptMethod（）]
公共静态列表填充（字符串populateInitial）
{
如果（populateInitial==“1”）
return（新字符串[]{“a”，“b”}）.ToList（）；
其他的
return（新字符串[]{“c”、“d”、“e”、“f”}）；
}

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            lblSelectedItem.Text = Request["ddlItems"].ToString();
        }
    }

    [System.Web.Services.WebMethod()]
    [System.Web.Script.Services.ScriptMethod()]
    public static List<string> populate(string populateInitial)
    {
        if (populateInitial == "1")
            return (new string[] { "a", "b" }).ToList();
        else
            return (new string[] { "c", "d", "e", "f" }).ToList();
    }