How to use Kendo UI component in MVC with Model?

Question

I have a .cshtml page, says, the model of the view has a property Date. Now, I use below code, so when the form submitted, I can get the Date value in controller.

<div class="form-group">
    <div style="margin-top: 10px;">
        @Html.LabelFor(m => m.Date, new { @class = "control-label" })
    </div>
    <div>
        @Html.TextboxFor(m => m.Date, new { @class = "form-control" })</div><div>
        @Html.ValidationMessageFor(m => m.Date, "", new { @class = "text-danger" })
    </div>
</div>

Now, I start to use Kendo UI for MVC. My question is: How can I use a Kendo DatePicker at here?

In the page, we have to this to create the datepicker,

@(Html.Kendo().DatePicker()
          .Name("datepicker")
          .Value("10/10/2011")
          .BindTo(Model.UserName)
          .HtmlAttributes(new { style = "width: 100%" })

How to associate it with the Property Date in the model? Use a hidden field for Property Date and get #datepicker value, and set #Date value when submit button clicked? is this the "standard" way?

Or, have to do a Json call when the form is submitted and pass the value of datepicker back to controller?

Thanks

Answer 1

You need to set the name of the kendo date picker control to same as the name of the property in your model. Here your property name is Date .

So the code for kendo picker should be

@(Html.Kendo().DatePicker()
      .Name("Date")
      .Value("10/10/2011")
      .BindTo(Model.UserName)
      .HtmlAttributes(new { style = "width: 100%" })

Now when you post form, Mvc model binder will bind selected date in Date property of model.

Answer 2

<div class="span12">
<div class="span2" style="text-align: right">
    Start Date:
</div>
<div class="span2">
    @(Html.Kendo().DatePickerFor(m=>m.StartDate))
</div>
<div class="span2" style="text-align: right">
    End Date:
</div>
<div class="span2">
    @(Html.Kendo().DatePickerFor(m=>m.EndDate))
</div>
<div class="span4">
    <button class="btn btn-primary" onclick="getGraphData()">Show</button>
</div>

function getGraphData() {

    var startDatePicker = $("#StartDate").data("kendoDatePicker");
    var endDatePicker = $("#EndDate").data("kendoDatePicker");
    var param = {
        StartDate: kendo.toString(startDatePicker.value().toLocaleDateString(), "dd/MM/yyyy"),
        EndDate: kendo.toString(endDatePicker.value().toLocaleDateString(), "dd/MM/yyyy")
    };
   // Do post here

}