在查看了许多教程和级联 DropDownLists 的各种方法后,我决定为我的 View 创建一个 ViewModel,然后根据这篇文章填充我的 DropDownLists: MVC3 AJAX Cascading DropDownLists
这里的目标是最基本的,并且在许多教程中都有介绍,但我仍然无法完全正确......根据“州”下拉列表的值填充“城市”下拉列表。
编辑:
自从发布此帮助请求后,我发现了 Firebug(是的,这就是我对进行任何类型编程的新手),并且我能够确定我正在成功调用我的 Controller 并提取必要的数据。我相信问题出在我的 JavaScript 的后半部分,它将数据返回到我的 View 。
这是我的观点:
<label>STATE HERE:</label>
@Html.DropDownListFor(x => x.States, Model.States, new { @class = "chzn-select", id = "stateID" })
<br /><br />
<label>CITY HERE:</label>
@Html.DropDownListFor(x => x.Cities, Enumerable.Empty<SelectListItem>(), new { id = "cityID" })
这是我 View 中的 JavaScript,不知何故,我在获得结果后无法正确处理结果:
$(function () {
$("#stateID").change(function () {
var stateId = $(this).val();
// and send it as AJAX request to the newly created action
$.ajax({
url: '@Url.Action("GetCities")',
type: 'GET',
data: { Id: stateId },
cache: 'false',
success: function (result) {
var citySelect = $('#cityID');
$(citySelect).empty();
// when the AJAX succeeds refresh the ddl container with
$.each(result, function (result) {
$(citySelect)
.append($('<option/>', { value: this.simpleCityID })
.text(this.cityFull));
});
},
error: function (result) {
alert('An Error has occurred');
}
});
});
});
这是 JavaScript 调用的 Controller :
public JsonResult GetCities(int Id)
{
return Json(GetCitySelectList(Id), JsonRequestBehavior.AllowGet);
}
private SelectList GetCitySelectList(int Id)
{
var cities = simpleDB.simpleCity.Where(x => x.simpleStateId == Id).ToList();
SelectList result = new SelectList(cities, "simpleCityId", "cityFull");
return result;
}
这是我从 Firbug 获得的结果,它告诉我我正在毫无问题地构建和获取数据,只是没有正确填充我的 DropDownList:
[{"Selected":false,"Text":"Carmel","Value":"IN001"},{"Selected":false,"Text":"Fishers","Value":"IN002"}]
如果有人对 JavaScript 无法填充 dropdrown 的原因有任何建议,请评论,谢谢!
最佳答案
我已经用这样的东西做过好几次了:
创建一个部分填充下拉列表。命名为DropDownList
并输入Shared
View 文件夹
@model SelectList
@Html.DropDownList("wahtever", Model)
你的创建 View 应该是这样的(跳过不相关的部分)
<script type="text/javascript">
$(function() {
$("#StateId").change(function() {
loadLevelTwo(this);
});
loadLevelTwo($("#StateId"));
});
function loadLevelTwo(selectList) {
var selectedId = $(selectList).val();
$.ajax({
url: "@Url.Action("GetCities")",
type: "GET",
data: {stateId: selectedId},
success: function (data) {
$("#CityId").html($(data).html());
},
error: function (result) {
alert("error occured");
}
});
}
</script>
@Html.DropDownList("StateId")
<select id="CityId" name="CityId"></select>
仔细注意空Select
项目 CityId
以及 loadLevelTwo
的来电在document.ready
你的 Controller 应该是这样的:
public ActionResult Create()
{
ViewBag.StateId = new SelectList(GetAllCities(), "Id", "Name");
return View();
}
public ActionResult GetCities(int stateId) {
SelectList model = new SelectList(GetCitiesOfState(stateId), "Id", "Name");
return PartialView("DropDownList", model);
}
关于javascript - ASP.NET MVC 级联 DropDownLists Javascript 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11553317/