Question

Not actually sure how to phrase my question.

I’m using jqgrid in most of my screens (not sure if its relevant info in this case),
Iv’e got two datetime pickers on the add/edit modal. I’ve been using this Date Time picker component, which worked well except i find that people aren’t fans of using sliders to capture time, esp if its something that needs to get entered frequently.

Along came the will_pickdate component which although its super luminous :P, seemed to answer my end users prayers, (my other option was to try and write my own component but i’ll give it a skip for now)

My problem comes in when i try and save. the will_pickdate component seems to be submitting its date time values as text, or its not mapping correctly when i call the TryUpdateModel method.

Client Side Code

      function CreateDateTimePicker(elem, ShowOn, OnClose) {

        setTimeout(function () {
    //code that works
            $(elem).datetimepicker({
                dateFormat: 'yy/mm/dd',
                timeFormat: 'hh:mm',
                showOn: ShowOn,
                buttonImageOnly: true,
                buttonImage: "/Images/date_time.jpg",
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                showWeek: true,
                onClose: function (dateText, inst) {
                    if (OnClose != null)
                        OnClose(dateText, inst);

                    $(this).focus();
                }
            }).attr('size', '16').next('img.ui-datepicker-trigger')
            .attr("tabIndex", "-1").css({ 'cursor': 'pointer', 'vertical-align': 'middle', 'padding-left': '3px', 'padding-bottom': '4px' });

//new code that sort of works.. eg component renders fine, but fails server side
            //$(elem).will_pickdate({
            //    timePicker: true,
            //    format: 'Y/m/d H:i',
            //    inputOutputFormat: 'Y/m/d H:i',
            //    militaryTime: true,
            //    allowEmpty: true,
            //    startView:'day',
            //    onSelect: function (date) {

            //        if (OnClose != null)
            //            OnClose();

            //        $(this).focus();


            //      //  $('#' + display[0].id).val(new Date($(elem).val()));
            //   //     $('#' + display[0].id+ '_display').val(new Date($(elem).val()));
            //       // alert($('#' + display[0].id).val());
            //    }
            //});

        }, 100);}

My add method.

  public ActionResult Edit(Down_Time_Capture viewModel, FormCollection formCollection)
    {
        Down_Time_CaptureRepository repository = new Down_Time_CaptureRepository();

        try
        {
            if (!ModelState.IsValid)
                return ReturnValidationFailure(ViewData.ModelState.Values);

            int item_id = Convert.ToInt32(formCollection["id"]);

            var model = repository.Where(o => o.DTCP_ID == item_id).SingleOrDefault();

            if (model == null)
            {
                //append any error code to allow jqgrid modal to handle error display
                Response.StatusCode = 400;
                return Json("Record not found.", JsonRequestBehavior.AllowGet);
            }               

    ====>   //code fails here, model tries to get updated but dies
            if (TryUpdateModel(model, formCollection.ToValueProvider()))
            {
                repository.Edit(model, User.Identity.Name);
                repository.Save();
                return Json("Updated successfully.", JsonRequestBehavior.AllowGet);
            }
            else
            {
                return ReturnValidationFailure(ViewData.ModelState.Values);
            }
        }
        catch (Exception ex)
        {
           ...
        }

    }

What Iv’e noticed is that the view model is valid and contains the values in datetime format, but when i try update my model from the db, it fails with the following message.

*The parameter conversion from type ‘System.String’ to type ‘..Portal.Models.Down_Time_Capture’ failed because no type converter can convert between these types.*

I’ve tried converting the value to a date format in my javascript/jquery, and append it to my Date Input field… but it still submits it as string

I’ll provide any other information if its needed, but this is a strange one :/

UPDATE:

My view only contains the html for the jqgrid component. I’ve added a jsfiddle link below.

Link To JsFiddle – Includes code for both datepickers

Answer 1

Normally, when using a view model approach, you use a mapper (such as Automapper) to move the captured values from the view model to the persisted object. What you are doing is having MVC bind the captured values to the view model, then you’re basically throwing out the Down_Time_Capture instance and binding all over again from the form to whatever the type is returned by Down_Time_CaptureRepository (it’s not Down_Time_Capture, is it? in that case, you’re doing double the work).

First let’s try and clean up your action a bit:

  public ActionResult Edit(int id)
    {
        Down_Time_CaptureRepository repository = new Down_Time_CaptureRepository();

        var model = repository.Where(o => i.DTCP_ID == id).SingleOrDefault();

        if (model == null)
            {
                //append any error code to allow jqgrid modal to handle error display
                Response.StatusCode = 400;
                return Json("Record not found.", JsonRequestBehavior.AllowGet);
            }  


            if (TryUpdateModel(model))
            {
                repository.Edit(model, User.Identity.Name);
                repository.Save();
                return Json("Updated successfully.", JsonRequestBehavior.AllowGet);
            }

            return ReturnValidationFailure(ViewData.ModelState.Values);
    }

This will_pickdate component does seem to send the DateTime value across validly (the value will come over the wire as a string, and then MVC’s binder will convert the value to a DateTime when the form field’s name matches the property name of the model being bound).