I have 2 DropDownLists and a jQuery script with HttpHandler in server side, there is a problem in binding Slave Dropdown one.
this is my Default.aspx code include 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>
And this is My handler:
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);
}
}
When the ddl1(DropDownList) changed I can see in Firebug the Response correctly. but in the ddl2(DropDownList) didn't see any changes: this is Firebug Response:
[{"Value":"Item3s1","Text":"SV1"},{"Value":"Item3s2","Text":"SV2"},
{"Value":"Item3s3","Text":"SV3"}]
Also when I change the Script SuccessMethod to the following code the ddl2(DropDownList) bind correctly. :
function Handler_Success(data) {
$('select#ddl2').empty();
$.each(data, function (i, slaveValue) {
$('select#ddl2').append($('<option>
</option>').val('sv1').html('s1'));
});
}
as you see the ddl2(DropDownList) bind Correctly with above code, Where is the Problem? Why I can see the response in Firebug but the binding not work?
