[Solved] MVC Datepicker bug?

[Ed Buchsbaum]

Greetings,

I am using the mvc datepicker in an mvc site. I'm using Mvc 2.0 and the build for 2.0.

Here is the issue:

If the user enters an incorrect date format, the datepicker client side will fire an event when the control loses focus. The textbox will turn pink indicating an error. This works as expected. However, the form can still be submitted to the server and it seems the control will simply null out the value. When my controller calls UpdateModel, it throws an error and the displays the view with the null value and hence an error is thrown as date cannot have a null value.

According to Scott Guthrie...
The UpdateModel() helper method automatically populates the ModelState collection when it encounters errors while trying to assign form values to properties on the model object.  For example, our Dinner object's EventDate property is of type DateTime.  When the UpdateModel() method was unable to assign the string value "BOGUS" to it in the scenario above, the UpdateModel() method added an entry to the ModelState collection indicating an assignment error had occurred with that property.

I think I discovered the bug with the datepicker. Since UpdateModel uses reflection to look for a matching property it is using the id of the control. My field is EventDate, and here is the code in the View:

 <% Html.Telerik().DatePicker().Name("EventDate").Value(String.Format("{0:g}", Model.EventDate)).Render(); %>

However, when I do a view source on the form, it shows this:


<div class="t-widget t-datepicker" id="EventDate"><input class="t-input" id="EventDate-input" name="EventDate" value="5/6/2010" /><a class="t-link t-icon t-icon-calendar" href="#" tabindex="-1" title="Open the calendar">select date</a></div><span class="field-validation-valid" id="EventDate_validationMessage"></span>

Notice the id of the div is EventDate, but the id of the html control is
id="EventDate-input"
That will not match the property using reflection and hence the ModelState Error is not getting updated.

Please verify if this is indeed a bug and if there is a fix.

Many Thanks,

Ed

[Georgi Krustev]

Hello Ed,

You are correct about the difference of the id of the div wrapper element and the input of the datepicker.
Nevertheless this will not cause any problem, because the name property of the input is equal to the value given with the Name("DatePicker name") method. I am sure that you will agree with me, that when you post a form the server, only the value of the input will be send to the server, not the div. Hence the value of the input will be searched by the set name, which is the same as its name property.

Kind regards,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ed Buchsbaum]

Hi Georgi ,

Yes, the name property on the input is set correctly, but the id is not. So if this is not the problem, can you please tell me why the datepicker lets me post a bogus value to the server. My property in the class has the [Required] attribute, yet the ModelState property is not being updated to reflect this error when there is a null date value?

Thank you!

Ed

[Georgi Krustev]

Hello Ed Buchsbaum,

I am not sure where could be the problem. Please examine this online demo which shows how the datepicker is validate with ModelState.IsValid.

If the problem still exists, you can send us a simple test project which shows the described problem.

Regards,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ed Buchsbaum]

Thank you for the demo demonstrating server side validation. Your controller contains the below code which is fine. However in mvc 2.0, validation now supports data annotations or attributes on the model. So if deliverDate is a field on a class in the model with the [Required] attribute, the code where you do the deliverDate == null check should not be necessary. Am I missing something?

Many Thanks,
Edkj

 [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult ServerValidation(DateTime? deliveryDate)
        {
            // Validation logic
            if (deliveryDate == null)
            {
                ModelState.AddModelError("deliveryDate", "It is required to select a cake delivery date.");
            }

            if (ModelState.IsValid)
            {
                ViewData["deliveryDate"] = deliveryDate;
            }

            return View();

[Georgi Krustev]

Hello Ed,

The aforementioned example demonstrates how to make server validation. This the reason why we check for the post value. You can examine this online demo which shows how to validate datepicker on the client.

Regards,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Ed Buchsbaum]

Hi Georgi ,

I appreciate your example. However in MVC 2.0, I should be able to simply add the [Required] attribute to the field in the model class and then UpdateModel will automatically add the error to ModelState. This is the improved validation experience in mvc 2.

So my question remains, why doesn't the datepicker work like the Html.Textbox? The Html.Textbox, when calling UpdateModel will check against the model attributes automatically.

Many Thanks for your continued support.

Ed

[Georgi Krustev]

Hello Ed,

I have created test project in my attempt to reproduce the depicted issue. Please review it and let me know what you scenario is more different than the test example.

All the best,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.