Question

I’m having an issue with a field being validated that seemingly is failing validation, but which has no requirements for being completed. I’ll try to include all information, so apologies for such a lengthy question post!

The ViewModel that has been created is a DTO object which contains just enough information to action whatever data the user enters. Due to the unknown quantity of items, my view model is slightly more complex than would be ideal …

public class UpdateViewModel
{
    public UpdateViewModel()
    {
        WorkingPeriods = new List<WorkingPeriod>();
        LeavePeriods = new List<LeavePeriod>();
    }

    public Guid UserID { get; set; }
    public DateTime From { get; set; }
    public DateTime Until { get; set; }
    public DateTime Selected { get; set; }

    public IEnumerable<WorkingPeriod> WorkingPeriods { get; set; }
    public IEnumerable<LeavePeriod> LeavePeriods { get; set; }

    public class WorkingPeriod
    {
        public int ID { get; set; }
        public DateTime Date { get; set; }
        public TimeSpan? StartTime { get; set; }
        public TimeSpan? EndTime { get; set; }
    }

    public class LeavePeriod
    {
        public int ID { get; set; }
        public DateTime Date { get; set; }
        public int LeaveTypeID { get; set; }
        public Guid? Reference { get; set; }
        public string Period { get; set; }
        public TimeSpan? UserDefinedPeriod { get; set; }
    }
}

I’ve got a view that with the helper of a few static helpers is able to produce the HTML that represents the information being. The output HTML looks similar to:

<li class="editorRow">
    <input type="hidden" name="LeavePeriods.index" autocomplete="off" value="8a5522c6-57fe-40a2-95bc-b9792fbe04d3" />
    <input id="LeavePeriods_8a5522c6-57fe-40a2-95bc-b9792fbe04d3__ID" name="LeavePeriods[8a5522c6-57fe-40a2-95bc-b9792fbe04d3].ID" type="hidden" value="4" />
    <input id="LeavePeriods_8a5522c6-57fe-40a2-95bc-b9792fbe04d3__Date" name="LeavePeriods[8a5522c6-57fe-40a2-95bc-b9792fbe04d3].Date" type="hidden" value="23/04/2012 00:00:00" />
    <select class="leaveTypeDropdown" id="LeavePeriods_8a5522c6-57fe-40a2-95bc-b9792fbe04d3__LeaveTypeID" name="LeavePeriods[8a5522c6-57fe-40a2-95bc-b9792fbe04d3].LeaveTypeID">
        <option value="">- please select -</option>
        <option selected="selected" value="2">Annual Leave</option>
        <option value="34">Public Holiday</option>
        <option value="1">Sickness</option>
    </select>
    <div class="leavePeriodRadio">
    <input checked="checked" id="LeavePeriods_8a5522c6-57fe-40a2-95bc-b9792fbe04d3__ALL" name="LeavePeriods[8a5522c6-57fe-40a2-95bc-b9792fbe04d3].Period" type="radio" value="ALL" /><label for="LeavePeriods_8a5522c6-57fe-40a2-95bc-b9792fbe04d3__ALL">Full Day</label>
        <input id="LeavePeriods_8a5522c6-57fe-40a2-95bc-b9792fbe04d3__AM" name="LeavePeriods[8a5522c6-57fe-40a2-95bc-b9792fbe04d3].Period" type="radio" value="AM" /> <label for="LeavePeriods_8a5522c6-57fe-40a2-95bc-b9792fbe04d3__AM">AM</label>
        <input id="LeavePeriods_8a5522c6-57fe-40a2-95bc-b9792fbe04d3__PM" name="LeavePeriods[8a5522c6-57fe-40a2-95bc-b9792fbe04d3].Period" type="radio" value="PM" /> <label for="LeavePeriods_8a5522c6-57fe-40a2-95bc-b9792fbe04d3__PM">PM</label>
        <input class="other-user-period" id="LeavePeriods_8a5522c6-57fe-40a2-95bc-b9792fbe04d3__Other" name="LeavePeriods[8a5522c6-57fe-40a2-95bc-b9792fbe04d3].Period" type="radio" value="Other" /> <label for="LeavePeriods_8a5522c6-57fe-40a2-95bc-b9792fbe04d3__Other">Other</label>
        <span class="user-defined" style="display:none">
            Duration: <input class="timepicker" id="LeavePeriods_8a5522c6-57fe-40a2-95bc-b9792fbe04d3__UserDefinedPeriod" name="LeavePeriods[8a5522c6-57fe-40a2-95bc-b9792fbe04d3].UserDefinedPeriod" type="text" value="" />
        </span>
    </div>
</li>

The issue appears when a user submits the form using Ajax (set up via the Ajax.BeginForm construct) (MVC3 & JQuery are involved).

@using (Ajax.BeginForm("Index", "Timesheet", new AjaxOptions()
    {
        HttpMethod = "POST",
        LoadingElementId = "loading",
        UpdateTargetId = "contentPane",
        OnComplete = "SaveCompleted",
    }))

• If the user omits the field (which they are perfectly entitled to do), they receive the message: The UserDefinedPeriod field is required..
• Alternatively, if they enter a valid TimeSpan value (e.g. “12:00”), they get: The value '12:00' is not valid for UserDefinedPeriod..
• If they enter an invalid string (e.g. “Boris”), the value is cleared and they are presented with the field required message above as if they had entered nothing. (Assumption: The value is cleared I believe because ‘Boris’ cannot be stored in a TimeSpan? and therefore cannot be transported back to the view)

Using breakpoints and inspecting the values of various things, I’ve concluded the following:

• The value is present in Request.Form and can be seen with the others that are grouped with it.
• The value is present within the Model and can be seen by inspecting it using the breakpoints in VS.
• ModelState.IsValid is returning false because Model.LeavePeriods.UserDefinedPeriod has 1 error, which is the same as is displayed to the user in the end.

For reference, the Controller is:

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public class TimesheetController : Controller
{
    [HttpPost]
    public ActionResult Index(UpdateViewModel updates, User currentUser)
    {
        if (!ModelState.IsValid)
        {
           // error with model, so lets deal with it and return View();
        }
        // continue with parsing and saving.
    }
}

The thing that confuses me the most about this issue is that I have other boxes that are built in similar ways that cause no issue – such as both of the TimeSpan?s within the WorkingPeriod enumerable. I’m running out of ideas as to where I can look to see what could be the issue. I’ve tried changing the ViewModel’s expected value from a TimeSpan? to a normal string with no perceivable differences (even the error messages were identical).

I’m guessing that the issue lies either outside of the scope I’ve detailed below (though, the controller and model are relatively vanilla so I’m lost as to where else to look) or that there is something further I don’t understand about model binding (and there is plenty I don’t understand about model binding already!).

Answer 1

I’ve managed to solve this issue, but I’m not overly sure why what I’ve fixed, fixed it.

Basically, within the UpdateViewModel I changed the “UserDefinedPeriod” to be named “OtherPeriod”.

public class LeavePeriod
{
    public int ID { get; set; }
    public DateTime Date { get; set; }
    public int LeaveTypeID { get; set; }
    public Guid? Reference { get; set; }
    public string Period { get; set; }
    public TimeSpan? OtherPeriod { get; set; }
}

Then obviously changed all code references to it elsewhere within my code, including the view:

<span class="user-defined" style="display:none">
    Duration: <input class="timepicker" id="LeavePeriods_8a5522c6-57fe-40a2-95bc-b9792fbe04d3__OtherPeriod" name="LeavePeriods[8a5522c6-57fe-40a2-95bc-b9792fbe04d3].OtherPeriod" type="text" value="" />
</span>

This then seemed to fix the issue. I’m not sure what the specific reason for the change working was – so I’m open to any comments as to what may have caused it still. However, this tweak was the fix for me and may work for anyone else having this issue in the future.