通过jQuery传递所选的主DropDownList项，并检索和绑定从属DropDownList的项_Jquery_Asp.net_Httphandler

通过jQuery传递所选的主DropDownList项，并检索和绑定从属DropDownList的项

jquery asp.net

通过jQuery传递所选的主DropDownList项，并检索和绑定从属DropDownList的项,jquery,asp.net,httphandler,Jquery,Asp.net,Httphandler,我有2个DropDownList和一个服务器端带有HttpHandler的jQuery脚本，我不知道如何通过jQuery传递参数，以及如何在Slave下拉列表中检索绑定的多个项这是我的默认.aspx代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"> <%@ Page Langu

我有2个DropDownList和一个服务器端带有HttpHandler的jQuery脚本，我不知道如何通过jQuery传递参数，以及如何在Slave下拉列表中检索绑定的多个项

这是我的默认.aspx代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" 
Inherits="Sample001.Default" %>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<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="masterlbl" Text="Master" runat="server" />
                </td>
                <td>
                    <span class="Mastercs">
                <asp:DropDownList ID="ddl1" runat="server">
                <asp:ListItem Text="Item1" Value="Item1" />
                <asp:ListItem Text="Item2" Value="Item2" />
                <asp:ListItem Text="Item3" Value="Item3" />
                <asp:ListItem Text="Item4" Value="Item4" />
                <asp:ListItem Text="Item5" Value="Item5" />
                </asp:DropDownList>
                    </span>
                </td>
                <td>
            <asp:Label ID="slavelbl" Text="Slave" runat="server" />
            </td>
                <td>
                    <span class="slavecs">
                    <asp:DropDownList ID="ddl2" runat="server" />
                    </span>
                </td>
            </tr>
        </table>
    </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            $('span.Mastercs select').change(function () {
                $.ajax({
                    type: "POST",
                    url: 'MyHandler.ashx',
                    dataType: "text",
                    data: "ItemSelected=" + $('select#ddl1').val(),
                    async: true,
                    success: function (data) { Handler_Success(data); }
                });
            });
            function Handler_Success(data) {
                $('select#ddl2').empty();
                $.each(data, function (i, slaveValue) {
$('select#ddl2').append($('<option>/option>')
.val(data.Value).html(data.Text));
                });
            }
        });
    </script>
</body>
</html>

另外，当我将脚本成功方法更改为以下代码时，ddl2（DropDownList）会正确绑定：

function Handler_Success(data) {
                $('select#ddl2').empty();
                $.each(data, function (i, slaveValue) {
                    $('select#ddl2').append($('<option>
    </option>').val('sv1').html('s1'));
                });
            }

函数处理程序\u成功（数据）{
$（'select#ddl2'）.empty（）；
$.each（数据、函数（i、slaveValue）{
$（'select#ddl2'）。追加（$（'
.val（'sv1'）.html（'s1'）；
});
}

正如您看到的ddl2（DropDownList）与上述代码正确绑定，问题在哪里？为什么我可以在Firebug中看到响应，但绑定不起作用？

这应该可以做到：

Jquery AJAX调用：

$.ajax({
    type: "POST",
    url: 'MyHandler.ashx',
    dataType: "text",
    data: "ItemSelected=" + $('select.ddl1').val();,
    async: true,
    success: function(data) { Handler_Success(data); },
    error: function(er) { Handler_Error(er); }
});

处理程序：

public class SlaveValue
{
   public string Value {get; set;}
   public string Text {get; set;}
}
public void ProcessRequest (HttpContext context) {
    string valueSelected = context.Request["ItemSelected"]
    List<SlaveValue> slaveValues = new List<SlaveValue>();
    //POPULATE SLAVEVALUES HERE
    //JSON-ify the list
    string responseText = JsonConvert.SerializeObject(slaveValues);
    context.Response.ContentType = "text/json";
    context.Response.Write(responseText);
}

公共类从属值
{
公共字符串值{get；set；}
公共字符串文本{get；set；}
}
公共void ProcessRequest（HttpContext上下文）{
string valueSelected=context.Request[“ItemSelected”]
List slaveValues=新列表（）；
//在此处填充SLAVEVALUES
//让名单上的人都知道
string responseText=JsonConvert.SerializeObject（slaveValues）；
context.Response.ContentType=“text/json”；
context.Response.Write（responseText）；
}

AJAX处理程序

function Handler_Success(data) {
    //clear out old options (if any)
    $('select.ddl2').empty()
    $.each(data, function(i, slaveValue) {
        $('select.ddl2').append(
            $('<option></option>').val(slaveValue.Value).html(slaveValue.Text)
        )
    }
}

函数处理程序\u成功（数据）{
//清除旧选项（如果有）
$（'select.ddl2'）.empty（）
$.each（数据、函数（i、slaveValue）{
$（'select.ddl2'）。追加(
$（''）.val（slaveValue.Value）.html（slaveValue.Text）
)
}
}

我正在使用Json.NET序列化SlaveValues集合。

这可能非常有用，因为您的问题有一个完整的逐步解决方案：

Shai，谢谢您的回复，我按照您说的做了，但是绑定SlaveDropDownList中有一个问题，我编辑了我的问题，您可以在上面看到我的新代码，您知道问题出在哪里吗？@Saeid：如果我正确阅读了您的代码：$（'select#ddl2'）。append（$（'.val（'sv1'）.html（'s1'））；您实际上没有绑定到返回的数据。代码只是添加了带有“sv1”和“s1”的选项。我的原始代码有一个bug。我现在编辑了它。基本上，追加应该是这样的：$（'select#ddl2'）。追加（$（''.val（slaveValue.Value）.html（slaveValue.Text））；我完全按照您所说的做了，但不起作用，关于这段代码$（'select#ddl2'））.append（$（''）.val（'sv1'）.html（'s1'））；正如你提到的，这不是主绑定，我用这段代码说，没有任何返回值，我可以正确绑定，但是返回值附加到从属ddl，什么也不显示。好吧，让我们来解决这个问题……让我们放置几个断点：在这些行上放置一个断点，让我知道输出是什么。什么是“responseText”此处：context.Response.Write（responseText）；此处的“数据”是什么：$（'select.ddl2'）.empty（）。此处的“slaveValue”是什么：$（'select#ddl2'）。追加（$（'...）。。。。

public class SlaveValue
{
   public string Value {get; set;}
   public string Text {get; set;}
}
public void ProcessRequest (HttpContext context) {
    string valueSelected = context.Request["ItemSelected"]
    List<SlaveValue> slaveValues = new List<SlaveValue>();
    //POPULATE SLAVEVALUES HERE
    //JSON-ify the list
    string responseText = JsonConvert.SerializeObject(slaveValues);
    context.Response.ContentType = "text/json";
    context.Response.Write(responseText);
}

function Handler_Success(data) {
    //clear out old options (if any)
    $('select.ddl2').empty()
    $.each(data, function(i, slaveValue) {
        $('select.ddl2').append(
            $('<option></option>').val(slaveValue.Value).html(slaveValue.Text)
        )
    }
}