Missing server-side values

[Alex Tushinsky]

I'm fairly new to MVC and the Kendo MVC extensions, and I must be missing something fairly basic here.  

I have a page with a strongly types model, which uses a Kendo Dropdown List, and two date pickers.  When the form is submitted, I do not get the selected values from server-side.

Here's my code:

Model:

public class ExportData
   {
       public DateTime startDate { get; set; }

       public DateTime endDate { get; set; }

       public string exportType { get; set; }

   }

Chtml:

@using Microsoft.AspNet.Identity
@using Kendo.Mvc.UI

@model InsulinCalculator.Models.ExportData

@using (Html.BeginForm("Export", "Home", FormMethod.Post))
{
    <div class="form-group">
        <label class="col-md-2 control-label" for="dtpStartDate" style="white-space:nowrap;">Start Date:</label>
        <div class="col-md-3">
            <div class="input-group">
                @(Html.Kendo()
                      .DatePickerFor(model => model.startDate)
                      .Name("dtpStartDate")
                      .Format("MM/dd/yyyy")
                      .HtmlAttributes(new { style = "width:180px" })
                )
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="dtpEndDate" style="white-space:nowrap;">End Date:</label>
        <div class="col-md-3">
            <div class="input-group">
                @(Html.Kendo()
                      .DatePickerFor(model => model.endDate)
                      .Name("dtpEndDate")
                      .Format("MM/dd/yyyy")
                      .HtmlAttributes(new { style = "width:180px" })
                )
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="exportType" style="white-space:nowrap;">Format:</label>
        <div class="col-md-3">
            @(Html.Kendo()
                  .DropDownListFor(model => model.exportType)
                  .Name("exportType")
                  .HtmlAttributes(new { style = "width:180px" })
                  .BindTo(new List<string>()
                         {
                             "Microsoft Excel (XLSX)",
                             "Microsoft Word (DOCX)",
                             "Adobe Acrobat (PDF)"
                         })
            )
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4">
            <input type="submit" value="Export Data" class="btn btn-sm bg-purple2 pull-right">
        </div>
    </div>
}

Server-Side:

[Authorize]
[HttpPost]
public ActionResult Export(ExportData oData)
{
    Response.Write(oData.startDate + " " + oData.endDate + " " + oData.exportType);
    return View();
}

The model comes into the Export method correctly, but the only value that's populated is the exportType (which has a default selection), the two date pickers are completely empty.

I'd like to preserve the selections after the form submit in the pickers / dropdown, and, of course, have the data available to me on the server.  Like I said, I seem to be missing something basic, but can't figure out what!  Any help is appreciated.

Regards,
Alex

[Alexander Popov]

Hi Alex,

This happens because the widgets are using names different from the Model's field names. As a result, the model binder cannot accurately get the values and assign them to the respective fields. I would suggest not using the Name method when working with *For helpers in order to avoid such complications. For example: 

@(Html.Kendo()
      .DatePickerFor(model => model.startDate)
      .Format("MM/dd/yyyy")
      .HtmlAttributes(new { style = "width:180px" })
)

Regards,
Alexander Popov
Telerik