This is a migrated thread and some comments may be shown as answers.

Missing server-side values

1 Answer 69 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Alex Tushinsky
Top achievements
Rank 2
Alex Tushinsky asked on 03 Dec 2014, 02:20 PM
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

1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 05 Dec 2014, 08:05 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Date/Time Pickers
Asked by
Alex Tushinsky
Top achievements
Rank 2
Answers by
Alexander Popov
Telerik team
Share this question
or