Question

我正在使用jquery处理C＃MVC中的Cascading下拉列表，我正在填充数据库中的drop = down。但根据前一次下降中的选择，下拉列表不会填充。你能说出我做错了什么吗？我认为public JsonResult GetLengthList(int MaterialId)根本没有被击中。

长度是一个下拉菜单，取决于材料下拉菜单

下面是我的代码。

控制器

[HttpGet]
public JsonResult GetLengthList(int MaterialId)
{
    db.Configuration.ProxyCreationEnabled = false;
    List<Length> LengthList = db.Lengths.Where(x => x.MaterialId == MaterialId).ToList<Length>();
    //List<Length> LengthList = db.Lengths.ToList();
    return Json(LengthList, JsonRequestBehavior.AllowGet);
}

查看

<div class="form-group">
            @Html.LabelFor(model => model.Material.MaterialId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-5">

                @if (ViewBag.MaterialList != null)
                {

                    @Html.DropDownListFor(model => model.Material.MaterialId,
                     ViewBag.MaterialList as SelectList,
                     "Select", new { @class = "form-control" })
                }
                @Html.ValidationMessageFor(model => model.Material.MaterialId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Length.LengthId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-5">
                @Html.DropDownListFor(model => model.Length.LengthId,
                        new SelectList(" "),
                        "Select", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Length.LengthId, "", new { @class = "text-danger" })
            </div>
        </div>

Javascript in View

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script>
    $(document).ready(function () {
        $("#MaterialId").change(function () {
            $.get('@Url.Action("GetLengthList", "Drawing")', { MaterialId: $("#MaterialId").val() }, function (data) {
                $("#LengthId").empty();
                $.each(data, function (index, row) {
                    $("#LengthId").append("<option value='" + row.LengthId + "'>" + row.LengthValue + "</option>")
                });
            });
        })
    });
</script>

Answer 1

您的<select>元素没有id="MaterialId"。您的@Html.DropDownListFor(model => model.Material.MaterialId, ...)代码行生成<select> id="Material_MaterialId"

你也没有id="LengthId"的元素 - id="Length_LengthId"

将脚本更改为

var lengthSelect = $('#Length_LengthId');
$("#Material_MaterialId").change(function () {
    var id = $(this).val();
    $.get('@Url.Action("GetLengthList", "Drawing")', { MaterialId: id }, function (data) {
        lengthSelect.empty();
        $.each(data, function (index, row) {
            lengthSelect.append("<option value='" + row.LengthId + "'>" + row.LengthValue + "</option>")
        });
    });
})

我还建议您研究this DotNetFiddle中的代码，特别是控制器代码，以了解如何正确实现此代码，以便它可用于编辑现有项目，并允许您返回视图{{} 1}}无效而不会丢失用户输入的数据，并且只返回生成ModelState元素所需的数据。

使用jquery在C＃MVC中级联下拉列表

1 个答案: