Question

我还是MVC的新手，需要一些级联下拉列表的帮助。

我有两个使用JSON级联的下拉列表，但我无法确定如何将所选项目绑定到视图模型。

控制器是：

public ViewResult StartRA()
    {
        StartRiskAssessmentViewModel viewModel = new StartRiskAssessmentViewModel
        {
            RiskAssessment = new RiskAssessment(),
            Locations = Peopledb.Locations.Where(x => x.Dormant == false).ToList(),
        };
        return View(viewModel);
    }

public ActionResult TypeList()
    {
        var types = db.Types.Where(x => x.Dormant == false).ToList();

        if (HttpContext.Request.IsAjaxRequest())
        {
            return Json(new SelectList(
                        types,
                        "TypeId",
                        "TypeName"), JsonRequestBehavior.AllowGet
                        );
        }

        return View(types);
    }

    public ActionResult SubTypeList(int typeId)
    {
        var subTypes = db.SubTypes.Where(x => x.Dormant == false && x.TypeId == typeId).ToList();

        if (HttpContext.Request.IsAjaxRequest())
            return Json(new SelectList(
                            subTypes,
                            "SubTypeId",
                            "SubTypeName"), JsonRequestBehavior.AllowGet
                        );

        return View(subTypes);
    }

在视图中，我在评论中留下了原始的Html帮助器，我希望修改它以绑定结果

视图部分是：

        <div class="form-group">
            @Html.LabelFor(model => model.TypeId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <select id="Types" name="Types" class="form-control"></select>
                @*@Html.DropDownListFor(model => model.TypeId, new SelectList(Model.Types, "TypeId", "TypeName", 0), "Please Select", new { @class = "form-control", id = "Types"})*@
                @Html.ValidationMessageFor(model => model.TypeId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SubTypeId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <select id="SubTypes" name="SubTypes" class="form-control"></select>
                @*@Html.DropDownListFor(model => model.SubTypeId, new SelectList(Model.SubTypes, "SubTypeId", "SubTypeName", 0), "Please Select", new { @class = "form-control", id = "SubTypes" })*@
                @Html.ValidationMessageFor(model => model.SubTypeId, "", new { @class = "text-danger" })
            </div>
        </div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    $(function () {
        $.getJSON("/RiskAssessment/Types/List", function (data) {
            var items = "<option>Please Select</option>";
            $.each(data, function (i, type) {
                items += "<option value='" + type.Value + "'>" + type.Text + "</option>";
            });
            $("#Types").html(items);
        });

        $("#Types").change(function () {
            $.getJSON("/RiskAssessment/SubTypes/List/" + $("#Types > option:selected").attr("value"), function (data) {
                var items = "<option>Please Select</option>";
                $.each(data, function (i, subtype) {
                    items += "<option value='" + subtype.Value + "'>" + subtype.Text + "</option>";
                });
                $("#SubTypes").html(items);
            });
        });
    });
</script>
}

如何修改Html助手以合并select标签下拉列表以允许级联并将结果绑定到viewmodel？

Answer 1

您的新选择列表具有名称属性类型和子类型，但原始选择列表是TypeId和SubTypeId。如果你重新命名新的绑定应该再次工作 - markpsmithOct 19 at 13:07

绑定级联下拉到viewmodel

1 个答案: