使用Kendo Date选择器和时间选择器后,AjaxForm不会提交

时间:2014-03-07 12:17:13

标签: javascript jquery asp.net-mvc kendo-ui

我有AjaxForm

@using (Ajax.BeginForm("AttendeeAvailability", "Response", new AjaxOptions { HttpMethod = "POST", OnSuccess = "done" }))
{
    @Html.ValidationSummary(true)
    @Html.AntiForgeryToken();   
    <div class="col-md-12">
        <fieldset>
            <legend>Enter your availability</legend>
            <div class="well">
                <div class="col-md-12">
                    <div class="form-group">
                        @Html.Kendo().DatePickerFor(m=>m.AttendeeDate).Min(Model.AppointmentStartDate.Date).Max(Model.AppointmentEndDate)
                        @*<div class="input-group date" id="DateStart">
                            @Html.TextBoxFor(m => m.AttendeeDate, new { @class = "form-control" })

                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>*@
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="form-group">
                        <h5><b>Please select time you are available in</b></h5>
                    </div>
                </div>
                <div class='col-md-6'>
                    <div class="form-group">
                        <h6>From</h6>
                        @Html.Kendo().TimePickerFor(m=>m.AttendeeStartTime)
                        @*<div class='input-group date' id='StartTime'>
                            @Html.TextBoxFor(m => m.AttendeeStartTime, new { @class = "form-control" })
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-time"></span>
                            </span>
                        </div>*@
                    </div>
                </div>
                <div class='col-md-6'>
                    <div class="form-group">
                        <h6>To</h6>
                        @Html.Kendo().TimePickerFor(m => m.AttendeeEndTime)
                        @*<div class='input-group date' id='EndTime'>
                            @Html.TextBoxFor(m => m.AttendeeEndTime, new { @class = "form-control" })
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-time"></span>
                            </span>
                        </div>*@
                    </div>
                </div>
                <div class="form-group">
                    <input class="btn btn-default" type="submit" value="Add" />
                </div>
            </div>
        </fieldset>
    </div>

}

每当我尝试单击“添加”按钮提交表单时,都不会提交表单。它是一个时间高的人。

但是,如果我评论KendoDatepicker和timepickers,并取消注释其他datepicker和timepicker,我的表单将被提交。有什么理由吗?

这是视图模型

public class AttendeeAvailableDateTime
{

    public DateTime AppointmentStartDate { get; set; }
    public DateTime AppointmentEndDate { get; set; }

    public DateTime AttendeeDate { get; set; }
    public DateTime AttendeeStartTime { get; set; }
    public DateTime AttendeeEndTime { get; set; }
    public int TotalAttendees { get; set; }      
}

错误:

我只是尝试放置验证消息,这就是我在浏览器中获得的验证错误

The field AttendeeStartTime must be a date.

那么,我应该改变我的模特吗?

如果我改变

public DateTime AttendeeStartTime { get; set; }
 public DateTime AttendeeEndTime { get; set; }

键入字符串然后我收到此错误

Cannot implicitly convert type `string` to 'System.DateTime?'

在这一行

 @Html.Kendo().TimePickerFor(m=>m.AttendeeStartTime)

那我该怎么办?

1 个答案:

答案 0 :(得分:1)

刚才意识到为了从kendo使用TimePickerFor,模型的字段应该是TimeSpan类型而不是DateTimestring