ASP.NET MVC级联下拉列表列出Javascript问题

ASP.NET MVC Cascading DropDownLists Javascript Issues

本文关键字：Javascript 问题 下拉列表 NET MVC 级联 ASP      更新时间：2023-11-11

在回顾了许多教程和级联下拉列表的各种方法后，我决定为我的视图创建一个ViewModel，然后根据这篇文章填充我的下拉列表：MVC3 AJAX级联下拉列表

这里的目标是最基本的，在许多教程中都有介绍，但我仍然不能完全正确。。。根据State下拉列表的值填充City下拉列表。

编辑：

自从发布了这个求助请求后，我发现了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" })

这是我的视图中的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无法填充drop溺水的原因有任何建议，请发表评论，谢谢！

我已经用这样的东西做了好几次了：

创建一个要弹出的部分下拉列表。将其命名为DropDownList，并放入Views 的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的空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
相关文章：