Question

我有一个.cshtml页面，说，视图的模型有一个属性Date。现在，我使用下面的代码，所以当提交表单时，我可以在控制器中获取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>

现在，我开始使用Kendo UI进行MVC。我的问题是：如何在这里使用Kendo DatePicker？

在页面中，我们必须创建日期选择器，

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

如何将其与模型中的Property Date相关联？使用Property Date的隐藏字段获取#datepicker值，并在单击提交按钮时设置#Date值？这是＆＃34;标准＆＃34;方式是什么？

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

由于

Answer 1

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

所以kendo选择器的代码应该是

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

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

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

}

如何在模型中使用MVC中的Kendo UI组件？

2 个答案: