当前位置： 文江博客话题详情

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

发布于 2024-12-13 06:33:11 字数 4442 浏览 0 评论 0原文

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

这是我的 Default.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>

这是我的处理程序：

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"}]

此外，当我将脚本成功方法更改为以下代码时，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 DropDownList and a jQuery script with HttpHandler in server side I dont Know how pass the parameter by jQuery and how retrive Multi Items for bind in Slave Dropdown one.

this is my Default.aspx code:

<!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 the ddl2(DropDownList) didn't see any change:
this is Firebug Response:

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

Also when I change the Script Success Method 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?

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

扫码二维码加入Web技术交流群

发布评论

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

评论（2）

梦断已成空 2024-12-20 06:33:11

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

在jquery中使用json的返回值

Maybe this can be useful this very like as your problem an have a complete step by step solution:

use return value of json in jquery

回复 原文
相思故 2024-12-20 06:33:11

这应该可以做到：

Jquery AJAX Call:

$.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); }
});

Handler:

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);
}

AJAX Handler

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)
        )
    }
}

我正在使用 Json.NET 序列化 SlaveValues 的集合。可以在这里下载

This should do it:

Jquery AJAX Call:

$.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); }
});

Handler:

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);
}

AJAX Handler

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)
        )
    }
}

I am using Json.NET to serialize the collection of SlaveValues.It can be downloaded here

回复 原文
~没有更多了~

关于作者

Smile简单爱

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文