2011-11-03 33 views
1

我有2个DropDownList,像主从。 这是我的Default.aspx:通过jQuery.Ajax的返回值附加到DropDownList

<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="MsLbl" runat="server" Text="Groups" /> 
       </td> 
       <td> 
      <asp:DropDownList ID="Masterddl" runat="server"> 
        <asp:ListItem Text="G1" Value="G1" /> 
        <asp:ListItem Text="G2" Value="G2" /> 
        <asp:ListItem Text="G3" Value="G3" /> 
      </asp:DropDownList> 
       </td> 
      </tr> 
      <tr> 
       <td> 
      <asp:Label ID="Svlbl" runat="server" Text="Members" /> 
      </td> 
       <td> 
      <asp:DropDownList ID="Slaveddl" runat="server" /> 
      </td> 
      </tr> 
     </table> 
    </div> 
    </form> 
</body> 
</html> 

这是我的脚本:

$(document).ready(function() { 
$('select#Masterddl').change(function() { 
    MasterChangeHandler($(this).val()); 
}); 

function MasterChangeHandler(Value) { 
    $.ajax({ 
     type: 'Post', 
     url: 'MasterSlaveHandler.ashx', 
     dataType: "text", 
     data: 'ItemSelected=' + Value, 
     async: 'true', 
     success: function (data) { SuccessHandler1(data); } 

    }); 
} 


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

和我的处理程序:

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


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

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

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

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


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

但并没有什么附加。 我也看到在Firebug窗口的响应如下(当我选择从主DDL G2):

[{"Value":"G2s1","Text":"SV1"},{"Value":"G2s2","Text":"SV2"}] 

,最后我改变剧本我的成功方法与测试这个新:

function SuccessHandler2(data) { 
    $('select#Slaveddl').empty(); 
    $.each(data, function (i, slaveValue) { 
     $('select#Slaveddl').append(
    $('<option></option>').val('Member' + i).html('Member' + i) 
    ); 
    }); 
} 

当尝试这个新的脚本绑定到奴隶ddl工作正常,但有一些额外的项目:索引显示member0到member30,我不知道为什么。

EDIT1: 我也试试这个,正确追加:

function SuccessHandler3(data) { 
var values = [{ "Value": "G2s1", "Text": "SV1" }, { "Value": "G2s2", "Text": "SV2"}]; 
     $('select#Slaveddl').empty(); 
     $.each(values, function (i, slaveValue) { 
      $('select#Slaveddl').append(
$('<option></option>').val('Member' + slaveValue.Value).html('Member' + 
slaveValue.Text) 
     ); 
     }); 
    } 

所以我觉得有一个与操纵返回值(数据)的问题。

更具体的看法如下PIC是在Firebug窗口的JSON选项卡时,我选择在主DDL G3:

JSON Tab in firebug

EDIT2:

我也试试这个,只是第一警报出现,显然(data.d)为空或不明物体:

function SuccessHandler6(data) { 
    var selection = $('select#Slaveddl'); 
    $(selection).children().remove(); 
    alert('in handler and remove children correctly'); 
    if (data.d) { 
     alert('data.d is not null'); 
     $(data.d).each(function (index, item) { 

$(selection).append('<option>').val(item.Value).html(item.Text); 
      alert('after append in index: ' + index); 
     }); 
    } 
} 

如何使用回报v alue正确并附加到Slave ddl?哪里有问题?

回答

0

此链接将帮助你。你只需要获取数据部分以显示在你的从属ddl中。若要仅获取你需要得到data.d一部分.. 在这里阅读更多:Eval response.d in Jquery Ajax

这里是一个小例子太多:

$.ajax({ 
     url: 'Users.aspx/GetUsers', 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     data: JSON.stringify(postdata), 
     dataType: "json", 
     success: function(data, st) { 
      if (st == "success") { 
       var m = JSON.parse(data.d); 
       //you can run your loop here to add to ddl 
      } 
     }, 
     error: function() { 
      alert("Loading Failed!"); 
     } 
    }); 
+0

当我试图解决方案中的萤火虫显示:JSON.parse:意外的字符 [中断关于这个错误] var m = JSON.parse(data.d);并没有工作。 – Saeid

1

ü应该尝试像,我认为。

检查了这一点。

http://jsfiddle.net/rTua4/1/

var values = [{"Value":"G2s1","Text":"SV1"},{"Value":"G2s2","Text":"SV2"}]; 

    $.each(values , function (i, slaveValue) { 

     $('#xxx').append(
    $('<option></option>').val(slaveValue.Value).html('Member' + slaveValue.Text) 
     )}); 

你的下一个操作试试这个。

function SuccessHandler1(data) { 
    $('select#Slaveddl').empty(); 
    var m = JSON.parse(data); 
    $.each(m , function (i, slaveValue) { 
     $('select#Slaveddl').append(
    $('<option></option>').val(slaveValue.Value).html(slaveValue.Text) 
    ); 
}); 

}

+0

这是工作,接下来呢? – Saeid

+0

你下一步是什么意思?你需要什么 ? – erimerturk

+0

我需要附加返回值,但这只是一个定义的手动值,您定义的值是手动我需要实际返回值。 – Saeid

0

我想指出的是您正在试图用HTTP处理程序来完成什么通常使用Web服务,或者更准确地说是WCF RESTful Web服务来实现的。 WCF甚至可以为你处理JSON的序列化。这里有一个简单的例子,您可以根据您的需求量身定制。 How do I return clean JSON from a WCF Service?

据我所知,HTTP处理程序用于处理文件类型(例如,您可以将处理程序与“.jpeg”文件类型关联以动态返回“.jpeg”图像)。

这是处理这个问题的“正确”方法。