Master Slave DropDownList Используйте jQuery Ajax ($ .ajax) и HttpHandler - PullRequest
Новая
       11

Master Slave DropDownList Используйте jQuery Ajax ($ .ajax) и HttpHandler

0 голосов
/ 02 ноября 2011

У меня есть 2 DropDownLists и скрипт jQuery с HttpHandler на стороне сервера, существует проблема с привязкой Slave Dropdown one.

это мой код Default.aspx, включающий 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>

А это мой обработчик: 

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

Также, когда я изменяю Script 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, но привязка не работает?

Ответы [ 2 ]

1 голос
/ 21 ноября 2011

Может быть, это может быть полезно, так как у вашей проблемы есть полное пошаговое решение:

использовать возвращаемое значение JSON в JQuery

1 голос
/ 02 ноября 2011

Не уверен, но, возможно, это ваша проблема: 

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] Правильная версия будет: 

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