使用 jquery 在 C# MVC 中級聯下拉列表

Question

我正在使用 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>

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>")
        });
    });
})

我還建議您研究此 DotNetFiddle中的代碼，特別是控制器代碼以了解如何正確實現這一點，以便它可用於編輯現有項目，並允許您在ModelState無效時返回視圖而不會丟失數據用戶輸入，並且只返回生成<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>