Question

在我的表单中，我使用了Kendo UI中的DateTimePicker。当我按下提交按钮时，会触发DateTimePicker的焦点，而不是表单提交事件。

@using (Html.BeginForm("Edit", "NursingHome", FormMethod.Post, new { @class = "form-horizontal", @role = "form" }))
{
    @Html.AntiForgeryToken()

    <div class="form-group">
            @Html.LabelFor(model => model.ShortTimeCare, new { @class = "col-xs-4 col-sm-3 col-md-2 col-lg-2 control-label" })
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <div class="input-group">
                    <span class="input-group-addon"><span class="fa fa-user"></span></span>
                    @(Html.Kendo().NumericTextBoxFor(model => model.ShortTimeCare)
                          .Format("n0")
                          .Min(0)
                          )
                </div>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                @(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
                      .Name("ShortTimeCareForDate")
                      .Value(DateTime.Now)
                      .Interval(15)
                  )
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-4 col-sm-offset-3 col-md-offset-2 col-lg-offset-2 col-xs-10 col-sm-10 col-md-2 col-lg-2">
                <button type="submit" class="btn btn-default">Save</button>
            </div>
        </div>
}

我忘记了什么吗？

在我的ViewModel中，我有一个DateTime属性。

public DateTime ShortTimeCareForDate { get; set; }

当我按下提交按钮时，Curser会跳转到DateTimePicker字段。没有其他事情发生。

当我更改代码时，提交事件按预期工作。（可能是模型中DateTime属性的问题）

<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
    @(Html.Kendo().DateTimePicker() // For(model => model.ShortTimeCareForDate)
        .Name("ShortTimeCareForDateXXXXX")
        .Value(DateTime.Now)
        .Interval(15)
     )
</div>

的问候，马尔科

Answer 1

当我使用英文日期格式时，它可以工作。但我需要德语格式。

英文：

@(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
    .Name("ShortTimeCareForDate")
    .Value(DateTime.Now)
    .Format("yyyy-MM-dd hh:mm:ss")
    .Interval(15)
)

德国

@(Html.Kendo().DateTimePickerFor(model => model.ShortTimeCareForDate)
    .Name("ShortTimeCareForDate")
    .Value(DateTime.Now)
    .Format("dd.MM.yyyy hh:mm:ss")
    .Interval(15)
)

Answer 2

使用按钮类型=＆＃34;按钮＆＃34;而不是使用提交

<div class="form-group">
            <div class="col-xs-offset-4 col-sm-offset-3 col-md-offset-2 col-lg-offset-2 col-xs-10 col-sm-10 col-md-2 col-lg-2">
                <button type="button" class="btn btn-default">Save</button>
            </div>
        </div>

Answer 3

看起来您在客户端或服务器端使用了错误的文化。

根据http://docs.telerik.com/kendo-ui/aspnet-mvc/globalization，您必须设置如下德国文化：

在〜/ Scripts / cultures / kendo.culture.de-DE.min.js

包括文化：

<script src="@Url.Content("~/Scripts/cultures/kendo.culture.de-DE.min.js")"></script>

然后设置它：

<script>
kendo.culture("de-DE");
</script>

如果要在服务器端设置文化，则需要更新web.config，如下所示：

<system.web>
 <globalization uiCulture="de-DE" culture="de-DE"></globalization>
</system.web>

这应该可以解决发生的问题

Kendo DateTimePicker阻止表单提交事件

3 个答案: