使用 jquery 在 C# MVC 中级联下拉列表答案

【问题标题】：Cascading drop-down lists in C# MVC using jquery使用 jquery 在 C# MVC 中级联下拉列表
【发布时间】：2018-04-12 03:37:35
【问题描述】：

我正在使用 jquery 在 C# MVC 中处理级联下拉列表，我正在从数据库中填充 drop=downs。但是下拉菜单不会根据上一个下拉菜单中的选择进行填充。你能告诉我我做错了什么吗？我认为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

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

【问题讨论】：

如果你认为你的方法没有被命中，为什么不添加断点或日志来验证呢？在调试时质疑您的假设是很好的，但请确保您通过实际寻求答案来跟进。验证你的服务器端是否被命中，检查网络调用，在你的 JavaScript 中添加断点和 console.log 语句，检查 HTML。找出事情不符合您的假设的地方，然后回溯，直到找到根本原因。
您的 dropdwonlist 生成 Material_MaterialId。您可以在此处指定自定义 ID：htmlAttributes: new { id="MaterialId", @class = "control-label col-md-2" }。第二个下拉菜单也是如此。
@mason，感谢您的建议，将牢记并遵循。我确实添加了一个断点来验证，我对 C# 和 Web 开发非常陌生，所以不太确定。
@adiga，谢谢！现在我明白问题出在哪里了。

标签： jquery asp.net asp.net-mvc asp.net-mvc-4

【解决方案1】：

您没有带有id="MaterialId" 的<select> 元素。您的@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 中的代码，特别是控制器代码以了解如何正确实现它，以便它可以用于编辑现有项目，并允许您在ModelState 是无效而不丢失用户输入的数据，并且只返回生成<option>元素所需的数据。

【讨论】：

感谢您的解释和解答！现在可以正常使用了。