如何在 MVC 中将 Kendo UI 组件与模型一起使用？答案

【问题标题】：How to use Kendo UI component in MVC with Model?如何在 MVC 中将 Kendo UI 组件与模型一起使用？
【发布时间】：2016-04-16 03:44:11
【问题描述】：

我有一个 .cshtml 页面，说视图的模型有一个属性 Date。现在，我使用下面的代码，所以当表单提交时，我可以在控制器中获取日期值。

<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>

现在，我开始为 MVC 使用 Kendo UI。我的问题是：我怎样才能在这里使用剑道 DatePicker？

在页面中，我们要为此创建日期选择器，

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

如何将其与模型中的 Property Date 关联？对属性日期使用隐藏字段并获取#datepicker 值，并在单击提交按钮时设置#Date 值？这是“标准”方式吗？

或者，必须在提交表单时进行 Json 调用并将 datepicker 的值传回控制器？

谢谢

【问题讨论】：

最好使用@(Html.Kendo().DatePickerFor(m => m.Date) 方法，否则.Name("Date") 应该这样做（但不知道为什么你有.BindTo(Model.UserName)）

标签： asp.net-mvc asp.net-mvc-4 kendo-ui

【解决方案1】：

您需要将 kendo 日期选择器控件的名称设置为与模型中的属性名称相同。这里您的属性名称是日期。

所以剑道选择器的代码应该是

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

现在，当您发布表单时，Mvc 模型绑定器将在模型的 Date 属性中绑定选定的日期。

【讨论】：

【解决方案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

}

【讨论】：