問題描述
下拉級聯 MVC 2 (Drop Down Cascading MVC 2)
I am binding A drop down on the change of first one. But I am getting Undefined.
Here is what I have tried. in the view
<select id="BreakOutValue" class="input1_drop" onchange="onChange()" >
</select>
<%:Html.DropDownList("DropClient", new SelectList(Model.DropClient, "Value", "Text", Model.txtDropClient), "‑‑ Select ‑‑", new { @class = "input1_drop", id = "DropClient", @onchange = "onClientChange();"})%>
if ($("#DropClient").val() != '') {
$.ajax({
async: false,
type: 'post',
url: '/Report/BindBreakOutsWithClient_ID',
data: { Client_ID: $("#DropClient").val() },
success: function (data) {
debugger;
// var responseID = eval("(" + data + ")");
// var SystemField = responseID.List;
var items = "";
$.each(data, function (i, data) {
items += "<option value='" + data.Client_ID + "'>" + data.labelname + "</option>";
});
$("#BreakOutValue").html(items);
// $("#BreakOutValue option").remove();
// $("#BreakOutValue").append("<option value=''>‑‑ Select ‑‑</option>");
// for (var i = 0; i < data.length; i++) {
// $("#BreakOutValue").append("<option selected='selected' value=" + data.Data[i] + ">" + data.Data[i] + "</option>");
// }
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
}
return false;
}
In controller
public ActionResult BindBreakOutsWithClient_ID(string Client_ID)
{
int Client = Convert.ToInt32(Client_ID);
// var qBreakOut = from c in DBReport.ClientMappings orderby c.labelname ascending where c.Client_ID == Client && c.availableinui == true select c;
var BreakOut = dbReport.ClientMappings.Where(m => m.Client_ID == Client && m.availableinui == true).OrderBy(m => m.labelname).ToList();
return Json(new { Data = BreakOut });
}
But I am not getting anything in the dropdown . I am getting undefined.
參考解法
方法 1:
In your controller action you have prefixed your Json response with a Data property:
return Json(new { Data = BreakOut });
So make sure that on the client you are looping on this property:
var items = "";
$.each(data.Data, function (i, item) {
items += "<option value='" + item.Client_ID + "'>" + item.labelname + "</option>";
});
$("#BreakOutValue").html(items);
or if you want to keep your current code then return directly the list:
return Json(BreakOut);
Also I would more than strongly recommend you getting rid of the async: false parameter in your $.ajax call. By setting this parameter you are making a blocking request to the server which completely defeats the whole purpose of an AJAX call.
(by Sandy、Darin Dimitrov)