没有类型为“ IEnumerable”的ViewData项 <SelectListItem> 具有关键“实践”的标签-MVC5

Question

I am very new to MVC and have just added a cascading drop down to my create page so when a Practice is selected the Optician drop down is populated with the names of opticians that work at that practice.

Model:

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

    [ForeignKey("Patient")]
    public Guid PatientId { get; set; }
    public virtual Patient Patient { get; set; }
    public IEnumerable<SelectListItem> PatientList { get; set; }

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

    [ForeignKey("Optician")]
    public Guid OpticianId { get; set; }
    public virtual Optician Optician { get; set; }
    public IEnumerable<SelectListItem> OpticiansList { get; set; }

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

    [ForeignKey("Time")]
    public Guid? TimeId { get; set; }
    public virtual Time Time { get; set; }
    public IEnumerable<SelectListItem> TimeList { get; set; }

    public bool isAvail { get; set; }
}

My Controller:

// GET: Bookings1/Create
    public ActionResult Create()
    {

        var practices = new SelectList(db.Practices, "PracticeId", "PracticeName");
        ViewData["Practice"] = practices;

        Booking booking = new Booking();
        ConfigureCreateModel(booking);

        return View(booking);

                }

    public void ConfigureCreateModel(Booking booking)
    {


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



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


    }

    // POST: Bookings1/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(Booking booking)
    {
        // to ensure date is in the future
        if (ModelState.IsValidField("Date") && DateTime.Now > booking.Date)
        {
            ModelState.AddModelError("Date", "Please enter a date in the future");
        }

        // Sets isAvail to false
        booking.isAvail = false;

        //Checks if model state is not valid
        if (!ModelState.IsValid)
        {
            ConfigureCreateModel(booking);
            return View(booking); // returns user to booking page
        }
        else // if model state is Valid
        {
            // 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");
        }
    }

My View:

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

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


@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
        <h4>Booking</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.PatientId, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.PatientId, Model.PatientList, "-Please select-",  new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.PatientId, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.PracticeId, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("Practice", ViewData["Practice"] as SelectList,"-Please Select-", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.PracticeId, "", new { @class = "text-danger" })
            </div>
        </div>


        <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">
            @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            @Html.LabelFor(model => model.TimeId, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.TimeId, Model.TimeList, "-Please select-", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.TimeId, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}
        <div>
            @Html.ActionLink("Back to List", "Index")
        </div>

The cascading drop down works as it should how ever when I click the button to create the appointment the following exception is thrown:

Exception:

An exception of type 'System.InvalidOperationException' occurred in System.Web.Mvc.dll but was not handled in user code

Additional information: There is no ViewData item of type 'IEnumerable' that has the key 'Practice'.

Any help would be greatly appreciated. Thanks

Answer 1

You model already contains a property for the collection of practices

public IEnumerable<SelectListItem> PracticeList { get; set; }

although it should not contain

public virtual Practice Practice { get; set; }

In the GET method, you create a new SelectList for practices, but instead of assigning it to the model property, you add it to ViewData using

ViewData["Practice"] = practices;

and then in the view use

@Html.DropDownList("Practice", ViewData["Practice"] as SelectList, ..)

which is not even binding to a property in your model and would never post back to anything. Then when you return the view in the POST method (because your mode will always be invalid), you do not assign a value to ViewData["Practice"] so its null, hence the error.

Instead, in your ConfigureCreateModel() method, populate the PracticeList property (as your doing for PatientList ) and remove the use of ViewData , and in the view use

@Html.DropDownListFor(model => model.PracticeId, Model.PracticeList, ...)

so your strongly binding to your model and when your submit the form, the value of PracticeId will be the value of the selected practice.

Side note: You will need to change your script to $("#PracticeId").change(function () { ...