Jquery 将级联下拉列表绑定到viewmodel

我还是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>
}

@LabelFor（model=>model.TypeId，htmlAttributes:new{@class=“controllabel col-md-2”}）
@*@DropDownListFor（model=>model.TypeId，新建选择列表（model.Types，“TypeId”，“TypeName”，0），“请选择”，新建{@class=“form control”，id=“Types”}）*@
@Html.ValidationMessageFor（model=>model.TypeId，“，new{@class=“text danger”}）
@LabelFor（model=>model.subscriptid，htmlAttributes:new{@class=“controllabel col-md-2”}）
@*@Html.DropDownListFor（model=>model.SubTypeId，新建选择列表（model.SubTypes，“SubTypeId”，“SubTypeName”，0），“请选择”，新建{@class=“form control”，id=“SubTypes”}）*@
@Html.ValidationMessageFor（model=>model.subtypid，“，new{@class=“text danger”}）
@节脚本{
@Scripts.Render（“~/bundles/jqueryval”）
$（函数（）{
$.getJSON（“/RiskAssessment/Types/List”），函数（数据）{
var items=“请选择”；
$。每个（数据、函数（i、类型）{
项目+=“”+类型。文本+“”；
});
$（“#类型”）.html（项目）；
});
$（“#类型”）.change（函数（）{
$.getJSON（“/RiskAssessment/SubTypes/List/”+$（“#Types>option:selected”）.attr（“value”）、函数（数据）{
var items=“请选择”；
$.each（数据、函数（i、子类型）{
项目+=“”+子类型。文本+“”；
});
$（“#子类型”）.html（项目）；
});
});
});
}

---

如何修改Html帮助程序以合并“选择标记”下拉列表以允许级联并将结果绑定到viewmodel？

您的新选择列表具有名称属性类型和子类型，但原始选择列表是TypeId和SubsubID。如果重命名新的选择列表，绑定应该会再次工作–13:07时标记Mithoct 19

您的新选择列表具有名称属性类型和子类型，但原始选择列表是TypeId和SubsubID。如果您重命名新的选择列表，绑定将再次工作–13:07时标记Mithoct 19

您的新选择列表具有名称属性

类型

和

子类型

，但原始选择列表是

类型ID

和

子类型ID

。如果您重命名新的选择列表，则绑定应与Hanks@markpsmith一起工作。仅作业您的新选择列表具有名称属性<代码>类型<代码>和<代码>子类型<代码>，但原始选择列表为<代码>类型ID<代码>和<代码>子类型ID<代码>。如果您重命名新的绑定，那么绑定应该可以再次工作hanks@markpsmith只是工作而已