Strongly typed view with a SelectList for DropDownList via ViewData: type mismatch on submit

Question

I am trying to create a form in ASP.NET MVC2 RC 2 that is based on a calendar event object. The object has eventTypeId which is a System.Int32 that I need to populate with via a select list.

The controller to create the initial view is:

[WAuthorize]
public ActionResult AddCalendarEvent()
{
    CalendarEventTypesManager calendarEventTypesManager = 
        new CalendarEventTypesManager();

    ViewData["eventTypeId"] = new SelectList(
        calendarEventTypesManager.SelectAll(), "Id", "Type");

    return View();
}

The snippet of the View (with the header) is:

<%@ Page Title="" Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Extranet.master"
    Inherits="System.Web.Mvc.ViewPage<SomeProject.Models.CalendarEvent>" %>

...

<p><%= Html.DropDownList("eventTypeId") %></p>

Which results the HTML of:

<p>
<select id="eventTypeId" name="eventTypeId">
    <option value="1">All school activities</option> 
    <option value="2">All school event</option> 
</select>
</p> 

The POST-accepting controller is:

[WAuthorize]
// TODO research some more
[ValidateInput(false)]              
[AcceptVerbs(HttpVerbs.Post)]
[ValidateAntiForgeryToken]
public ActionResult AddCalendarEvent(CalendarEvent newEvent)
{
    ...

(I've tried adding [Bind (Exclude="eventTypeId")] in front of the "CalendarEvent newEvent" parameter but it does not change the behavior.)

Problem: When I submit the form, I get an InvalidOperationException exception:

The ViewData item that has the key 'eventTypeId' is of type 'System.Int32' but must be of type 'IEnumerable<SelectListItem>'.

I've looked at a number of examples here and on the MVC blogs but so far it isn't clear how this is supposed to work (it looks like based on many examples, it should work as is). Do I need to create a second model that has a variable of type SelectListItem to accept the SelectListItem and convert the value to a System.Int32 to actually set eventTypeId? That seems rather round about.

Careful

Answer 1

After thinking about this some more, I thought that maybe I needed to populate ViewData["eventTypeID"] in the controller action that receives the posted values -- not just in the controller action that sets up the form. I tried that and it worked.

The controller action that accepts the POST was altered (adding the last two lines in this listing):

    [WAuthorize]
    [ValidateInput(false)]              // TODO research some more
    [AcceptVerbs(HttpVerbs.Post)]
    [ValidateAntiForgeryToken]
    public ActionResult AddCalendarEvent(CalendarEvent newEvent)
    {
        CalendarEventTypesManager calendarEventTypesManager = new CalendarEventTypesManager();
        ViewData["eventTypeId"] = new SelectList(calendarEventTypesManager.SelectAll(), "Id", "Type");
        ....

That was not clear to me so hopefully someone else finds this useful too. I checked the actual HTTP POST with LiveHTTPHeaders plugin for Firefox and indeed entryTypeID is posted as "...&entryTypeId=2&..." (I had selected the second item on the form before submitting) but do we reload the select list in the posted-to controller to do validation?

Careful

Well think about it this way. The DropDownList submits a single value to the server. The value that the user selects. It doesn't submit all the possible values that are in the drop down list. That's just not the way HTML works, which perhaps is kind of unfortunate. That's why you need to repopulate the viewdata in the POST request to indicate what the range of possible values are. You don't need to repopulate the selected value. – Wonderment

Thank you so much for this solution, is definitely not intuitive, but it does make sense when you think about it :) – Appel

I got caught by another unintuitive thing today that made sense: say you have a Html.RenderAction("LoginBox") and the LoginBox action has both a GET and POST. If you submit a form for something else unrelated to LoginBox (but it happens to be on the same page via RenderAction) and then return the view on validation failure, the POST version of LoginBox is called/returned not the GET. This all makes sense but there is some tricky angles! Edit: Whoops, replied to completely wrong thread here. – Careful

That's crazy. I was hit with the same problem and have spent the last couple of hours trying to figure it out. +1. – Aimless

Answer 2

This problem occurs if the ViewData does not contain required values for all the fields on the view and the ViewData is posted back to the view.

Thermal