Cascading Drop Down - недопустимое значение

Question

Я новичок в MVC и с большим трудом создаю каскадное падение из базы данных. При выборе практики оптиков, которые работают в этой практике заселяют однако это не сэкономит DataView Model:

public class BookingViewModel 
{ 
    [Display (Name = "Select Patient")] 
    public Guid PatientId { get; set; } 
    public IEnumerable<SelectListItem> PatientList { get; set; } 

    [Display(Name = "Select Practice")] 
    public Guid PracticeId { get; set; } 
    public IEnumerable<SelectListItem> PracticeList { get; set; } 

    [Display(Name = "Select Optician")] 
    public Guid OpticianId { get; set; } 
    public IEnumerable<SelectListItem> OpticiansList { get; set; } 

    [Display(Name = "Select Date")] 
    [DataType(DataType.Date)] 
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")] 
    public DateTime Date { get; set; } 

    [Display(Name = "Select Time")] 
    public Guid TimeId { get; set; } 
    public IEnumerable<SelectListItem> TimeList { get; set; } 
} 

}

Мой Заказ Контроллер:

public ActionResult Create() 
    { 
     // Creates a new booking 
     BookingViewModel bookingViewModel = new BookingViewModel(); 
     // Initilises Select List 
     ConfigureCreateViewModel(bookingViewModel); 

     return View(bookingViewModel); 

    } 

    // Initilises Select List 
    public void ConfigureCreateViewModel(BookingViewModel bookingViewModel) 
    { 
     // Displays Opticians Name 
     bookingViewModel.OpticiansList = db.Opticians.Select(o => new SelectListItem() 
     { 
      Value = o.OpticianId.ToString(), 
      Text = o.User.FirstName 
     }); 

     // Displays Patients name 
     bookingViewModel.PatientList = db.Patients.Select(p => new SelectListItem() 
     { 
      Value = p.PatientId.ToString(), 
      Text = p.User.FirstName 
     }); 

     // Displays Practice Name 
     bookingViewModel.PracticeList = db.Practices.Select(p => new SelectListItem() 
     { 
      Value = p.PracticeId.ToString(), 
      Text = p.PracticeName 
     }); 

     // Displays Appointment Times 
     bookingViewModel.TimeList = db.Times.Select(t => new SelectListItem() 
     { 
      Value = t.TimeId.ToString(), 
      Text = t.AppointmentTime 
     }); 


    } 


    // Allows Admin to create booking for patient 
    // POST: Bookings1/Create 
    [HttpPost] 
    [ValidateAntiForgeryToken] 
    public ActionResult Create(BookingViewModel bookingViewModel) 
    { 
     // to ensure date is in the future 
     if (ModelState.IsValidField("Date") && DateTime.Now > bookingViewModel.Date) 
     { 
      ModelState.AddModelError("Date", "Please enter a date in the future"); 
     } 



     // if model state is not valid 
     if (!ModelState.IsValid) 
     { 
      // Initilises Select lists 
      ConfigureCreateViewModel(bookingViewModel); 
      return View(bookingViewModel); // returns user to booking page 


     } 
     else // if model state is Valid 
     { 
      Booking booking = new Booking(); 
      // Sets isAvail to false 
      booking.isAvail = false; 
      booking.PracticeId = bookingViewModel.PracticeId; 
      booking.OpticianId = bookingViewModel.OpticianId; 
      booking.PatientId = bookingViewModel.PatientId; 
      booking.Date = bookingViewModel.Date; 
      booking.TimeId = bookingViewModel.TimeId; 

      // Generates a new booking Id 
      booking.BookingId = Guid.NewGuid(); 
      // Adds booking to database 
      db.Bookings.Add(booking); 
      // Saves changes to Database 
      db.SaveChanges(); 
      // Redirects User to Booking Index 
      return RedirectToAction("Index"); 
     } 
    } 

// Json for cascading drop down, to allow the user to select an optician from the selected practice. 
    [HttpPost] 
    public JsonResult Opticians(Guid Id) 
    { 
     var opticianList = db.Opticians.Where(a => a.PracticeId == Id).Select(a => a.User.FirstName).ToList(); 

     return Json(opticianList); 
    } 

Мой Вид:

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

<div class="form-group"> 
     @Html.Label("Select Optician :", new { @class = "col-md-2 control-label" }) 
     <div class="col-md-10"> 

      @Html.DropDownListFor(model => model.OpticianId, Model.OpticiansList, "-Please Select-", new { @class = "form-control" }) 
      @Html.ValidationMessageFor(model => model.OpticianId, "", new { @class = "text-danger" }) 
     </div> 
    </div> 

Каскадирование выпадающий работает нормально, но когда я пытаюсь сохранить его в базу данных я получаю сообщение об ошибке Validation -

The value 'Name' is not valid for Select Optician

Любая помощь будет принята с благодарностью. Благодаря

Answer 1

Поскольку ваш метод Opticians(Guid Id) только возвращая User.FirstName свойство от вашего Opticians таблицы, так что выбранное значение DropDownList для OpticianId сообщений обратно выбранного FirstName значения, которое не может быть привязано к Guid собственности. HTML ваш порождающей

<option>Some Name</option> 

, но она должна быть

<option value="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx">Some Name</option> 

Изменить способ вернуть как идентификатор и имя свойства

[HttpPost] 
public JsonResult Opticians(Guid Id) 
{ 
    var opticianList = db.Opticians.Where(a => a.PracticeId == Id).Select(a => new 
    { 
     Value = a.OpticianId, 
     Text = a.User.FirstName 
    }).ToList(); 
    return Json(opticianList); 
} 

, а затем изменить сценарий

var opticians = $("#OpticianId"); // cache elements you repeatedly refer to 
opticians.prop("disabled", true); 
$("#PracticeId").change(function() { 
    $.ajax({ 
     url : "@Url.Action("Opticians","Bookings")", 
     type : "POST", 
     data : {Id : $(this).val() } 
    }).done(function (opticianList) { 
     opticians.empty(); 
     $.each(opticianList, function(index, item) { 
      opticians.append($('<option></option>').val(item.Value).text(item.Text)); 
     }); 
     opticians.prop("disabled", false); 
    }); 
});