ASP.NET MVC級聯DropDownLists Javascript問題

Question

在復習了許多有關級聯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無法填充下拉菜單有任何建議，請發表評論，謝謝！

Answer 1

我已經做了幾次這樣的事情：

創建局部填充下拉列表。 將其命名為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);
}

Answer 2

謝謝您的幫助，

事實證明，在下面的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