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

Question

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

Answer 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 中的代码，特别是控制器代码以了解如何正确实现它，以便它可以用于编辑现有项目，并允许您 return 视图如果 ModelState 无效而不丢失用户输入的数据，并且 return 只需要生成 <option> 元素的数据。

Answer 2

<script type="text/javascript">
    $(function (){
        $("select#ClassId").change(function (evt){
            if ($("select#ClassId").val() != "-1"){
                $('#StudentId').empty();
                $('#StudentId').append("<option value='0'>Select Student</option>");
                $.ajax({
                    url: "/JSonDropDownlist/GetStudentbyClassID",
                    type: 'POST',
                    data: { ClassId: $("select#ClassId").val() },
                    success: function (result) {
                        $.each(result, function (i, result) {
                            $('#StudentId').append("<option value=" + result.Value + ">" + result.Text + "</option>");
                        });
                    },
                    error: function (xhr) { alert("Something seems Wrong");}
                });
            }
        });
    });
</script>

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

Cascading drop-down lists in C# MVC using jquery

asp.net

asp.net-mvc

jquery

asp.net-mvc-4