ASP.NET MVC层叠DropDownLists的Javascript问题(ASP.NET MV

2019-10-17 01:26发布

回顾许多教程和各种方法来层叠DropDownLists后,我决定创建一个视图模型为我的视图,然后填充基于这个帖子我DropDownLists: MVC3 AJAX级联DropDownLists

这里的目标是最基本的和盖在很多教程,但我仍然无法得到它完全正确......来填充根据国家下拉值的城市下拉。

编辑:

由于发帖求助申请,我发现萤火虫(是的,这就是我新我在做任何类型的节目),我是能够确定的是,我成功地叫着我的控制器,并拉出必要的数据。 我相信这个问题是我的JavaScript的数据返回给我的浏览下半年。

这是我的看法:

    <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的未填充dropdrown,请发表评论,谢谢!

Answer 1:

我已经这样做了几次这样的事情:

创建一个偏popolate下拉列表。 将它命名为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>

仔细地注意空Select的项目CityId和呼叫loadLevelTwodocument.ready

而你的控制器应该是这样的:

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);
}


Answer 2:

谢谢您的帮助,

事实证明,在下面我的JavaScript,我试图直接引用我的数据模型相关联的simpleCityIDcityFull领域:

$.each(result, function (result) {
                $(citySelect)
                .append($('<option/>', { value: this.simpleCityID })
                .text(this.cityFull));

相反,我需要保持它的通用和内嵌引用 文本的JavaScript的标准:

$.each(modelData, function (index, itemData) {
                select.append($('<option/>', {
                    value: itemData.Value,
                    text: itemData.Text


文章来源: ASP.NET MVC Cascading DropDownLists Javascript Issues