通过 jQuery.Ajax 的返回值附加到 DropDownList答案

【问题标题】：Append to DropDownList by return value of jQuery.Ajax通过 jQuery.Ajax 的返回值附加到 DropDownList
【发布时间】：2011-11-03 07:59:24
【问题描述】：

我有 2 个 DropDownList，比如 Master-Slave。这是我的 Default.aspx：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
            <asp:Label ID="MsLbl" runat="server" Text="Groups" />
                </td>
                <td>
            <asp:DropDownList ID="Masterddl" runat="server">
                    <asp:ListItem Text="G1" Value="G1" />
                    <asp:ListItem Text="G2" Value="G2" />
                    <asp:ListItem Text="G3" Value="G3" />
            </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
            <asp:Label ID="Svlbl" runat="server" Text="Members" />
            </td>
                <td>
            <asp:DropDownList ID="Slaveddl" runat="server" />
            </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

这是我的脚本：

$(document).ready(function () {
$('select#Masterddl').change(function () {
    MasterChangeHandler($(this).val());
});

function MasterChangeHandler(Value) {
    $.ajax({
        type: 'Post',
        url: 'MasterSlaveHandler.ashx',
        dataType: "text",
        data: 'ItemSelected=' + Value,
        async: 'true',
        success: function (data) { SuccessHandler1(data); }

    });
}


function SuccessHandler1(data) {
    $('select#Slaveddl').empty();
    $.each(data, function (i, slaveValue) {
        $('select#Slaveddl').append(
    $('<option></option>').val(slaveValue.Value).html(slaveValue.Text)
    );
    });
}

还有我的处理程序：

public class SlaveValues {
    public string Value { get; set; }
    public string Text { get; set; }
}


public class MasterSlaveDropDownListsHandler : IHttpHandler {
    public bool IsReusable {
        get { return true; }
    }

    public void ProcessRequest(HttpContext context) {
        string valueSelected = context.Request["ItemSelected"];
        List<SlaveValues> slaveValues = new List<SlaveValues>();
        SlaveValues sv;

        sv = new SlaveValues();
        sv.Text = "SV1";
        sv.Value = valueSelected + "s1";
        slaveValues.Add(sv);

        sv = new SlaveValues();
        sv.Text = "SV2";
        sv.Value = valueSelected + "s2";
        slaveValues.Add(sv);


        string responseText =
    Newtonsoft.Json.JsonConvert.SerializeObject(slaveValues);
        context.Response.ContentType = "text/json";
        context.Response.Write(responseText);
    }
}

但没有什么可附加的。此外，我在 firebug 窗口中看到如下响应（当我从 Master ddl 中选择 G2 时）：

[{"Value":"G2s1","Text":"SV1"},{"Value":"G2s2","Text":"SV2"}]

最后我用这个新的测试脚本改变了我的成功方法：

function SuccessHandler2(data) {
    $('select#Slaveddl').empty();
    $.each(data, function (i, slaveValue) {
        $('select#Slaveddl').append(
    $('<option></option>').val('Member' + i).html('Member' + i)
    );
    });
}

当尝试这个新脚本时，与 Slave ddl 的绑定工作正常，但有一些额外的项目：索引显示 member0 到 member30，我不知道为什么。

编辑1：我也尝试了这个并正确附加：

function SuccessHandler3(data) {
var values = [{ "Value": "G2s1", "Text": "SV1" }, { "Value": "G2s2", "Text": "SV2"}];
        $('select#Slaveddl').empty();
        $.each(values, function (i, slaveValue) {
            $('select#Slaveddl').append(
$('<option></option>').val('Member' + slaveValue.Value).html('Member' +
 slaveValue.Text)
        );
        });
    }

所以我认为返回值（数据）的操作存在问题。

对于更具体的视图，以下图片是我在 Master ddl 中选择 G3 时 Firebug 窗口中的 JSON 选项卡：

编辑2：

我也尝试了这个，只是出现了第一个警报，显然 (data.d) 是 null 或未知对象：

function SuccessHandler6(data) {
    var selection = $('select#Slaveddl');
    $(selection).children().remove();
    alert('in handler and remove children correctly');
    if (data.d) {
        alert('data.d is not null');
        $(data.d).each(function (index, item) {

$(selection).append('<option>').val(item.Value).html(item.Text);
            alert('after append in index: ' + index);
        });
    }
}

如何正确使用返回值并附加到 Slave ddl？问题出在哪里？

【问题讨论】：

标签： c# jquery asp.net httphandler

【解决方案1】：

也许这很有用，就像你的问题有一个完整的逐步解决方案：

use return value of json in jquery

【讨论】：

【解决方案2】：

你应该像我想的那样尝试。

看看这个。

http://jsfiddle.net/rTua4/1/

var values = [{"Value":"G2s1","Text":"SV1"},{"Value":"G2s2","Text":"SV2"}];

   $.each(values , function (i, slaveValue) {

        $('#xxx').append(
    $('<option></option>').val(slaveValue.Value).html('Member' + slaveValue.Text)
        )});

为您的下一次手术尝试这个。

function SuccessHandler1(data) {
    $('select#Slaveddl').empty();
    var m = JSON.parse(data);
    $.each(m , function (i, slaveValue) {
        $('select#Slaveddl').append(
    $('<option></option>').val(slaveValue.Value).html(slaveValue.Text)
    );
});

}

【讨论】：

接下来是什么意思？你需要什么？
我需要按返回值追加，但这只是手动定义的值，您手动定义的值我需要真正的返回值。

【解决方案3】：

此链接将对您有所帮助。您只需要获取要显示在从属 ddl 中的数据部分。要仅获取那部分，您需要获取 data.d .. 在这里阅读更多：Eval response.d in Jquery Ajax

这也是一个小例子：

$.ajax({ 
        url: 'Users.aspx/GetUsers', 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        data: JSON.stringify(postdata), 
        dataType: "json", 
        success: function(data, st) { 
            if (st == "success") { 
                var m = JSON.parse(data.d); 
                //you can run your loop here to add to ddl
            } 
        }, 
        error: function() { 
            alert("Loading Failed!"); 
        } 
    });

【讨论】：

当我尝试您的解决方案时，萤火虫显示：JSON.parse: unexpected character [Break On This Error] var m = JSON.parse(data.d);并且不工作。

【解决方案4】：

我想指出，您尝试使用 HTTP 处理程序完成的工作通常是使用 Web 服务完成的，或者更准确地说是 WCF RESTful Web 服务。 WCF 甚至为您处理 JSON 的序列化。这是一个简化的示例，您可以根据自己的需要进行定制。 How do I return clean JSON from a WCF Service?

据我所知，HTTP 处理程序用于处理文件类型（例如，您可以将处理程序与“.jpeg”文件类型关联以动态返回“.jpeg”图像）。

这是处理这个问题的“正确”方式。

【讨论】：