Master Slave DropDownList使用jQuery Ajax（$ .ajax）和HttpHandler

我在服務器端有2個DropDownLists和一個帶有HttpHandler的jQuery腳本，在綁定Slave下拉菜單時存在問題。

這是我的Default.aspx代碼包括jQuery腳本：

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

此外，當我改劇本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中看到響應，但綁定不起作用？

來源

2011-11-02 Saeid

也許這可能是有用的這種非常喜歡爲你的問題的有一個完整的一步一步的解決方案：

use return value of json in jquery

來源

2011-11-21 11:10:29

不知道，但也許這是你的問題：

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

[編輯] 正確的版本是：

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

來源

2011-11-02 08:05:15

我不知道w ^改變你添加的功能。但我完全複製粘貼。不行。 – Saeid

你在'/ option>'之前錯過了一個'<''。你應該輸入'' –

@PedramBehroozi我也看到了，但也許你的答案應該包括「正確」的版本並且評論「錯誤」版本。 –

Master Slave DropDownList使用jQuery Ajax（$ .ajax）和HttpHandler

回答

相關問題