We help IT Professionals succeed at work.

MVC3: My jQuery Date Picker's not passing the value to my Model

Medium Priority
2,668 Views
Last Modified: 2012-05-12
I have installed the jQuery Date Picker into my Razor file and associated it with my string property "DOB", which has a public getter and a public setter. But when I submit the page, the value being pased to the setter is null, even though I can see the text field has a valid date string.

Here is the definition:
[DataType(DataType.Date)]
[Display(Name = "Date of Birth")]
public string DOB { get { return dob; } set { dob = value;  } }

Any idea what could be wrong?


Thanks!
Comment
Watch Question

Craig WagnerSoftware Architect
CERTIFIED EXPERT

Commented:
Whenever I've used the jQuery DatePicker my model property has always been of type DateTime, not string.
curiouswebsterSoftware Engineer

Author

Commented:
I think that was the problem. But please provide me the exact format to reference the property for the datepicker, in the Razor file:

       <div>
           <p>Date: <input type="text" id="datepicker"></p>
       </div>

Here's my property:

        [Display(Name = "Date of Birth")]
        public DateTime DOB { get { return dob; } set { dob = value; } }
curiouswebsterSoftware Engineer

Author

Commented:
Do you have any examples of this working?
Looks like your trouble is caused by a naming issue.

Short Answer:

Change the name on your date input to "DOB".
<input type="text" name="DOB" id="DOB" />


Long Answer:

If this is what your html looks like:
<div>
     <p>Date: <input type="text" id="datepicker"></p>
</div>


And this is what the date property your model looks like:
public DateTime DOB { get { return dob; } set { dob = value; } }


Then your issue is a naming issue.  The way Asp.Net MVC binds data back to your model is by the name of the input exactly matching the name of your properties in your view model.  When a submit button is clicked, the browser creates a name/value hash of all the input elements on the page and sends it to the server.  

So if you have a view model that looks like this:

public class MyViewModel
{
      public string Email { get; set; }
      public string Name { get; set; }
      public string DOB { get; set; }

      public MyViewModel()
      {

      }
}

Then the browser needs to be submitting form data that looks like this:
Email="john@email.com"&Name="john"&DOB="11/2/2011"

However, based on how you have your date input named, the form data you'd be sending would look like this:
Email="john@email.com"&Name="john"&datepicker="11/2/2011"

Also, the "name" property is what the browser sends to the server.  So your input elements need to have a "name" declared, not just an "id".

Once you have the input named correctly, then you'd just use the datepicker plugin like this:

$('#DOB').datepicker();



Also, doesn't matter if the date property is DateTime or String
curiouswebsterSoftware Engineer

Author

Commented:
Great! That works fine. I did not have the same name for the:

1) property in the model
2) Data Picker plug-in
3) name attribute on my control

Now the model gets set correctly.

Thanks!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.