c# - 级联下拉不会填充

Question

我是 MVC5 和 JQuery 的新手，我正在尝试创建级联下拉菜单。当用户从下拉列表中选择一个实践时，我试图让在该实践中工作的配镜师进行填充。

配镜师模型:

 public class Optician
{
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public Guid OpticianId { get; set; }

    [ForeignKey("User")]
    public string UserId { get; set; }
    public virtual ApplicationUser User { get; set; }
    public IEnumerable<SelectListItem> UserList { get; set; }

    [ForeignKey("Practice")]
    public Guid PracticeId { get; set; }
    public virtual Practice Practice { get; set; }
    public IEnumerable<SelectListItem> PracticeList { get; set; }

    public virtual ICollection<ApplicationUser> Users { get; set; }

    public virtual ICollection<Practice> Practices { get; set; }
}

实践模型:

public class Practice
{
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    [Display(Name = "Practice")]
    public Guid PracticeId { get; set; }

    [Display(Name = "Practice Name")]
    public string PracticeName { get; set; }


    public virtual ICollection<Optician> Opticians { get; set; }

    public virtual ICollection<Booking> Bookings { get; set; }
}

应用程序用户模型:

public class ApplicationUser : IdentityUser
{
    [Display(Name = "Title")]
    public string Title { get; set; }

    [Display(Name = "First Name")]
    public string FirstName { get; set; }

    [Display(Name = "Last Name")]
    public string LastName { get; set; }
}

Controller :

public ActionResult TestDropDown()
    {
        var PracticeListItems = (from d in db.Practices
                                 select d.PracticeName).ToList();

        SelectList Practice = new SelectList(PracticeListItems);
        ViewData["Practice"] = Practice;

        return View();
    }

    public JsonResult Opticians(Guid? Id)
    {
        var OpticianList = (from d in db.Opticans
                            where d.PracticeId == Id
                            select d.User.FirstName).ToList();

        return Json(OpticianList);
    }

View :

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

<script>
$(document).ready(function () {
    $("#Optician").prop("disabled", true);
    $("#Practice").change(function () {
        if ($("#Practice").val() != "Select") {
            var PracticeOptions = {};
            PracticeOptions.url = "/Bookings1/Opticians";
            PracticeOptions.type = "POST";
            PracticeOptions.data = JSON.stringify({ Practice: $("#Practice").val() });
            PracticeOptions.datatype = "json";
            PracticeOptions.contentType = "application/json";
            PracticeOptions.success = function (OpticianList) {
                $("#Optician").empty();
                for (var i = 0; i < OpticianList.length; i++) {
                    $("#Optician").append("<option>" + StatesList[i] + "</option>");
                }
                $("#Optician").prop("disabled", false);
            };
            PracticeOptions.error = function () { alert("Error in getting Practices"); };
            $.ajax(PracticeOptions);
        }
        else {
            $("#Optician").empty();
            $("#Optician").prop("disabled", true);
        }
    });
});

@using (Html.BeginForm("TestDropDown", "Bookings1", FormMethod.Post))
{
@Html.AntiForgeryToken()
<h4>Select Practcie & Opticians</h4>
<hr />
@Html.ValidationSummary()
<div class="form-group">
    @Html.Label("Select Practice :", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.DropDownList("Practice", ViewData["Practices"] as SelectList, new { @class = "form-control" })
    </div>
</div><br />
<div class="form-group">
    @Html.Label("Select Optician :", new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        <select id="Optician"></select>
    </div>
</div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" class="btn btn-default" value="Submit" />
    </div>
</div>
}

但是，当我运行该应用程序时，会填充 Practice Name 但不会填充 Optician First Name。没有错误，我不确定我哪里出错了。任何帮助将不胜感激。

Answer 1

您的代码似乎有一些问题。从您的 SelectList 开始。

当您定义选择列表时，如果您告诉它您的 Value 和 Text 属性是什么会有所帮助。

public ActionResult TestDropDown()
{
    var practices = new SelectList(db.Practices, "PracticeId", "PracticeName");
    ViewData["Practices"] = practices;
    return View();
}

那么您可能应该在您的 Opticians json 结果中返回更多信息

[HttpPost]
public JsonResult Opticians(Guid? Id)
{
    var opticianList = db.Opticians.Where(a => a.PracticeId == Id).Select(a => a.User).ToList();

    return Json(opticianList);
}

在您的 javascript 中，一旦您整理出名称，您就可以引用结果的属性 FirstName。

$(document).ready(function () {
    $("#Optician").prop("disabled", true);
    $("#Practice").change(function () {
        $.ajax({
            url = "@Url.Action("Opticians","Bookings1")",
            type = "POST",
            data = {Id : $(this).val() }
        }).done(function(OpticianList){
            $("#Optician").empty();
            for (var i = 0; i < OpticianList.length; i++) {
                $("#Optician").append("<option>" + OpticianList[i].FirstName + "</option>");
            }
            $("#Optician").prop("disabled", false);
        });
    });
});

我不确定为什么要将参数 Practice 传递给采用参数 Id 的操作，但它应该在上面的代码中修复。