TimePicker control does not return value to ASP.NET MVC model property in submitted form

[Jeff Benson]

I am trying to add a new form to an existing ASP.NET MVC 5  application (.NET Framework). I have been unable to get the TimePicker control to return the value set in the UI. The control renders correctly and shows the values I would expect. But when I submit the form, the model's property value linked to the TimePicker is always all zeros or null. What am I doing wrong here?

Example code:

Model.cs

public class TestModel
{
  public TimeSpan Start { get; set; }
}

TestController.cs

public class TestController : Controller
{
  public ActionResult Index()
  {
    TestModel testModel = new TestModel();
    testModel.Start = new TimeSpan(7, 30, 0);
    return View("Schedule", testModel);
  }

  [HttpPost]
  public ActionResult Schedule (TestModel schedule)
  {
    // I intend to save 'schedule' value to database here.
    // but schedule.Start property is always [0, 0, 0]
    // If TestModel.Start is defined as TimeSpan?, then the property is always null
    ...
    return RedirectToAction(...);
  }
}

Schedule.cshtml

@model TestModel
@{
  Layout = "~/Views/Shared/_Layout.cshtml"
}

@using (Html.BeginForm("Schedule", "TestController", FormMethod.Post))
{
    <div class="form-horizontal container-fluid" style="margin-left:15px;">

        <div class="row">
            @Html.Label("Start Time")
            @(Html.Kendo().TimePickerFor(m => m.Start).Name("Start").HtmlAttributes(new { @style = "width:100px;" }))
        </div>
        <div class="row">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </div>
}

 

I have tried a variety of different MVC ways to instantiate the TimePicker:  TimePickerFor (as above) or just TimePicker, defining .Name() property or not, defining .Value(model.Start) or not, adding .Min & Max properties. The result in the Schedule controller is the same: no value assigned to any TimePicker control.

The other thing I tried was change the TestModel.Start property to DateTime. Doing that, the form submit is always short-circuited, apparently because of a model validation issue in the TImePicker control. Form focus always changes to the TimePicker control. I have not been able to view the actual validation error.

Hoping someone can identify the problem with my code. The TimePicker control seems ideal for the application I have in mind but if I can't get it working I'll have to do something else.

I am testing this code in VS 2022. The version of Kendo our application uses is older: v2022.1.301.

FYI, our application already uses a wide variety of Kendo controls including Grid, DateTimePicker, DropDownList and several others. We have not had trouble using those controls. But as far as I can tell, this is the first instance of TimePicker being added.

Thanks,
Jeff

[Mihaela]

Hi Jeff,

Thank you for providing the respective code snippets.

To bind the TimePicker to a Model property, it is important to ensure that the data type of the property is DateTime:

    public class TestModel
    {
        public DateTime Start { get; set; }
    }

Also, when using the TimePickerFor() configuration, remove the the Name() option. The TimePickerFor() will set the "id" and "name" attributes of the input element to match the name of the respective Model property (for example, "Start").

//Controller
public ActionResult Index()
{
            TestModel testModel = new TestModel();
            testModel.Start = new DateTime(2024,1,1,7, 30, 0);
            return View("Schedule", testModel);
}

//View
@model TestModel

@using (Html.BeginForm("Schedule", "Home", FormMethod.Post))
{
    <div class="form-horizontal container-fluid" style="margin-left:15px;">

        <div class="row">
            @Html.Label("Start Time")
            @(Html.Kendo().TimePickerFor(m => m.Start)
                .HtmlAttributes(new { @style = "width:100px;" })
            )
        </div>
        <div class="row">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </div>
}

Regarding the form validation error, would you try modifying the attached runnable sample (v2022.1.301) based on your setup to replicate the issue you are experiencing and send it back in the thread for review?

Thank you for your cooperation.

Regards,
Mihaela
Progress Telerik

[Jeff Benson]

Thanks Mihaela,

I have done as you suggest. I changed the model property back to DateTime. and altered the Index function to match your changes.  Here is the relevant Schedule.cshtml definition:

@using (Html.BeginForm("Schedule", "Test", FormMethod.Post))
{
    <div class="form-horizontal container-fluid" style="margin-left:15px;">
        <div class="row">
            @Html.Label("Start Time")
            @(Html.Kendo().TimePickerFor(m => m.Start).HtmlAttributes(new { @style = "width:120px;" }))
            @Html.ValidationMessageFor(m => m.Start)
        </div>
        <div class="row">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </div>
}

 

When I run this code, after I click 'Save' the validator always says "The field Start must be a date."

Why does it not recognize that the Start property is DateTime? Could the form's CSS classes have something to do with it?

Jeff

Jeff

[Jeff Benson]

I found the solution to the validation issue in an old Stack Overflow query. I added the data annotation to my model:

public class TestModel
{
    [DataType(DataType.TIme)]
    public DateTIme Start { get; set; }
}

Running with this change, the form submit is accepted and all is well.