Master Slave DropDownList jQuery Ajax ($ .ajax) 및 HttpHandler 사용

서버쪽에 HttpHandler가있는 DropDownLists 및 jQuery 스크립트가 2 개 있고 슬레이브 드롭 다운 바인딩에 문제가 있습니다.

이 내 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>

을 그리고 이것은 나의 핸들러 다음 ddl1 (DropDownList로는) 내가 방화범 응답 제대로 볼 수 변경하면

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

. 나는 ddl2 (DropDownList로)가 제대로 결합 다음 코드를 스크립트 SuccessMethod을 변경할 때 또한

[{"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에서 응답을 볼 수 있지만 바인딩이 작동하지 않는 이유는 무엇입니까?

출처

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

잘 모르겠 음 당신이 기능에 추가하는 모자 변화. 그러나 나는 정확하게 복사 - 붙여 넣기. 작동하지. – Saeid

'/ option>'바로 전에'<'를 놓쳤습니다. 당신은 '' –

@ PedramBehroozi를 입력해야합니다. 그러나 그 대답은 "올바른"버전을 포함하고 "오류"버전을 주석해야합니다. –

Master Slave DropDownList jQuery Ajax ($ .ajax) 및 HttpHandler 사용

답변

관련 문제