javascript - Html.DropDownListFor 和 JavaScript 数组

Question

我在 MVC Asp.NET 应用程序的“创建 View ”页面上实现了级联下拉列表。

不幸的是，我在选择位于 JavaScript 数组中的值时遇到问题。我需要绑定(bind)所选值以使用我的 Controller 之一。

现在我的列表已填充，但我无法选择它。有没有办法将 counties[i] 数组从我的 JavaScript 移动到 @Html.DropDownListFor() 帮助器？

谢谢!

JavaScript:

<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"
    type="text/javascript"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $("#county").prop("disabled", true);
    $("#StateLongName").change(function() {
        if ($("#StateItems").val() != "Please select") {
            var options = {};
            options.url = "/County/GetCounties";
            options.type = "POST";
            options.data = JSON.stringify({ state: $("#StateLongName").val() });
            options.dataType = "json";
            options.contentType = "application/json";
            options.success = function(counties) {
                $("#county").empty();
                for (var i = 0; i < counties.length; i++) {
                    $("#county").append("<option>" +  counties[i] + "</option>");
                }
                $("#county").prop("disabled", false);
            };
            options.error = function() { alert("Error retrieving counties!"); };
            $.ajax(options);
        } else {
            $("#county").empty();
            $("#county").prop("disabled", true);
        }
    });
});
</script>

Controller :

//GET Counties for Cascading Dropdown List
    public JsonResult GetCounties(string state)
    {

        var counties = db.countycigtaxes.Join(db.statecigtaxes,
            cc => cc.stateid,
            sc => sc.stateid,
            (cc, sc) => new
            {
                cc,
                sc
            }).Where(co => co.sc.statefullname == state)
            .Select(co => co.cc.countyfullname).ToList();

        return Json(counties);
    }

查看页面:

<div class="form-group">
        @Html.LabelFor(model => model.StateLongName, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownListFor(m => m.StateLongName, Model.StateItems, "Please select")
            @Html.ValidationMessageFor(model => model.StateLongName)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.CountyLongName, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @*@Html.DropDownListFor(m => m.CountyLongName, )*@
            <select id="county"></select>
            @Html.ValidationMessageFor(model => model.CountyLongName)
        </div>
    </div>

Answer 1

我假设您的意思是，当您提交表单时，属性 CountyLongName 的选定值不会发回。您已注释掉这一行

@Html.DropDownListFor(m => m.CountyLongName, )

并使用

<select id="county"></select>

如果你想要手动版本(我不推荐这样做)，那么你需要添加一个与属性名称匹配的 name 属性，以便它可以被 ModelBinder 绑定(bind)

<select name="CountyLongName" id="county"></select>

但最好使用助手并向其传递一个空的 SelectList

Html.DropDownListFor(m => m.CountyLongName, Model.CountryNames)

其中 Model.CountryNames 是 View 模型中的一个属性，它被初始化为空的 SelectList

另请注意 options.type = "POST"; 应为“GET”，整个 AJAX 可以简化为

$.get('@Url.Action("GetCounties","Country")', { state: $('#StateLongName').val() }, function(countries) {...

并且 JsonResult 方法中不需要 ToList()