主从 DropDownList 使用 jQuery Ajax ($.ajax) 和 HttpHandler

发布于 2024-12-13 17:53:04 字数 4456 浏览 0 评论 0原文

我有 2 个 DropDownList 和一个服务器端带有 HttpHandler 的 jQuery 脚本，绑定 Slave Dropdown 时出现问题。

这是我的 Default.aspx 代码，包括 jQuery 脚本：

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

这是我的处理程序：

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

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

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

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

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

        sv = new SlaveValue();
        sv.Text = "SV3";
        sv.Value = valueSelected + "s3";
        slaveValues.Add(sv);

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

当 ddl1(DropDownList) 更改时，我可以在 Firebug 中正确看到响应。但在 ddl2(DropDownList) 中没有看到任何变化：这是 Firebug 响应：

[{"Value":"Item3s1","Text":"SV1"},{"Value":"Item3s2","Text":"SV2"},
{"Value":"Item3s3","Text":"SV3"}]

此外，当我将脚本 SuccessMethod 更改为以下代码时，ddl2(DropDownList) 正确绑定。：

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

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

原文

I have 2 DropDownLists and a jQuery script with HttpHandler in server side, there is a problem in binding Slave Dropdown one.

this is my Default.aspx code include jQuery Script:

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

And this is My handler:

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

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

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

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

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

        sv = new SlaveValue();
        sv.Text = "SV3";
        sv.Value = valueSelected + "s3";
        slaveValues.Add(sv);

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

When the ddl1(DropDownList) changed I can see in Firebug the Response correctly. but in the ddl2(DropDownList) didn't see any changes:
this is Firebug Response:

[{"Value":"Item3s1","Text":"SV1"},{"Value":"Item3s2","Text":"SV2"},
{"Value":"Item3s3","Text":"SV3"}]

Also when I change the Script SuccessMethod to the following code the ddl2(DropDownList) bind correctly. :

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

as you see the ddl2(DropDownList) bind Correctly with above code,
Where is the Problem?
Why I can see the response in Firebug but the binding not work?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

那支青花 2024-12-20 17:53:04

也许这非常有用，就像您的问题有一个完整的逐步解决方案一样：

在jquery中使用json的返回值

回复收藏 0 原文

吃兔兔 2024-12-20 17:53:04

不确定，但也许这是你的问题：

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

[编辑]
正确的版本是：

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

Not sure but maybe this is your problem:

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

[EDIT]
The correct version would be:

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

回复收藏 0 原文

~没有更多了~