Передайте выбранный главный элемент DropDownList с помощью jQuery и извлеките и свяжите элементы для ведомого DropDownList - PullRequest
Новая
       9

Передайте выбранный главный элемент DropDownList с помощью jQuery и извлеките и свяжите элементы для ведомого DropDownList

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

У меня есть 2 DropDownList и скрипт jQuery с HttpHandler на стороне сервера. Я не знаю, как передать параметр с помощью jQuery и как получить несколько элементов для связывания в Slave Dropdown one.

это мой код 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, но привязка не работает?

Ответы [ 2 ]

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

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

используйте возвращаемое значение json в jquery

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

Это должно сделать это:

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

Обработчик: 

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 

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Я использую Json.NET для сериализации коллекции SlaveValues. Его можно скачать здесь

...