层叠式下拉菜单不填充

我是MVC5和JQuery的新手，我试图创建一个级联下拉。当用户从下拉菜单中选择一个实践时，我试图让在该实践中工作的Opticians填充。

眼镜商模型:

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

控制器:

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

视图:

<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没有填充。没有错误，我不确定我哪里出错了。

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

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

$(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);
        });
    });
});