![](/img/trans.png)
[英]asp.net mvc - How to create multiple DropDownLists using Javascript
[英]ASP.NET MVC Cascading DropDownLists Javascript Issues
在复习了许多有关级联DropDownLists的教程和各种方法之后,我决定为我的View创建一个ViewModel,然后根据这篇文章填充我的DropDownLists: MVC3 AJAX级联DropDownLists
这里的目标是最基本的,并且在许多教程中都涉及到,但是我仍然不能完全正确……根据州下拉列表的值填充“城市”下拉列表。
编辑:
自发布此请求帮助以来,我发现了Firebug(是的,这就是我进行任何类型编程的新方法),并且能够确定我已成功调用控制器并提取必要的数据。 我相信问题是我的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调用的我的控制器:
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无法填充下拉菜单有任何建议,请发表评论,谢谢!
我已经做了几次这样的事情:
创建局部填充下拉列表。 将其命名为DropDownList
并放入“视图”的“ Shared
文件夹中
@model SelectList
@Html.DropDownList("wahtever", Model)
您的创建视图应该是这样的(跳过无关的部分)
<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>
仔细注意CityId
的Empty Select
项和document.ready
的loadLevelTwo
调用
您的控制器应类似于:
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中,我试图直接引用与我的数据模型关联的simpleCityID和cityFull字段:
$.each(result, function (result) {
$(citySelect)
.append($('<option/>', { value: this.simpleCityID })
.text(this.cityFull));
相反,我需要使它保持通用并与引用Value和Text的 JavaScript标准保持一致:
$.each(modelData, function (index, itemData) {
select.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.