Html.DropDownListFor和JavaScript数组

Question

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

不幸的是，我在选择位于JavaScript数组中的值时遇到问题。 我需要绑定所选值以使用我的一个控制器。

现在，我的列表已填充，但我无法选择它。 有没有办法将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>

控制器：

//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>

如果要使用手动版本（我不建议这样做），则需要添加与属性名称匹配的名称属性，以便可以由ModelBinder绑定

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

但是最好使用帮助程序并将其传递给空的SelectList

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

其中Model.CountryNames是视图模型中的属性，该属性已初始化为空的SelectList

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

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

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

Answer 2

这应该设置为您选择的选项。

$("#county option[value='" + counties[index] + "']").attr("selected", "selected");