Master Slave DropDownList Use jQuery Ajax ($.ajax) and HttpHandler

问题

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?

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/7977105/master-slave-dropdownlist-use-jquery-ajax-ajax-and-httphandler

标签

jquery

ASP.NET

httphandler