1

我正在使用daypilot lite创建活动日历。我正在按照本教程在 ASP.NET MVC 5 中创建应用程序。

当我单击日历时，例如 30/04/2015 02:00 PM - 30/04/2015 03:00 PM，将显示弹出表单。在弹出表单中，我在开始和结束字段上使用jquery datepicker和jquery timepicker 。这是描述我所做工作的图片和代码：

在此处输入图像描述

索引.cshtml：

@Html.DayPilotCalendar("dp", new DayPilotCalendarConfig
{
    BackendUrl = Url.Action("Backend", "Calendar"),
    BusinessBeginsHour = 8,
    BusinessEndsHour = 19,
    ViewType = ViewType.Day,
    TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
    TimeRangeSelectedJavaScript = "create(start, end)",
    EventClickHandling = EventClickHandlingType.JavaScript,
    EventClickJavaScript = "edit(e)",
    EventMoveHandling = EventMoveHandlingType.Notify,
    EventResizeHandling = EventResizeHandlingType.Notify,
    EventDeleteHandling = EventDeleteHandlingType.CallBack
})

<script type="text/javascript">
    function create(start, end) {
        var m = new DayPilot.Modal();
        m.closed = function () {
            if (this.result == "OK") {
                dp.commandCallBack('refresh');
            }
            dp.clearSelection();
        };
        m.showUrl('@Url.Action("Create", "Event")?start=' + start + '&end=' + end);
    }
</script>

创建.cshtml：

@model Calendar.ViewModels.CreateEventViewModel

<link href="@Url.Content("~/Content/jquery-ui.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.11.4.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jquery.timepicker.css")" />
<script src="@Url.Content("~/Scripts/jquery.timepicker.min.js")"></script>

@using (Html.BeginForm())
{
    <fieldset>
        <legend>Event Details:</legend>
        <table>
            <tr>
                <td>
                    <label for="name">Event Name</label>
                </td>
                <td>
                    @Html.EditorFor(model => model.name, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all" } })
                    @Html.ValidationMessageFor(model => model.name, "", new { @class = "" })
                </td>
            </tr>
            <tr>
                <td>
                    <label for="startdate">Start</label>
                </td>
                <td>
                    @Html.EditorFor(model => model.startdate, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all datepicker", @readonly = "readonly" } })
                    @Html.EditorFor(model => model.starttime, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all timepicker" } })
                    @Html.ValidationMessageFor(model => model.startdate, "", new { @class = "" })
                </td>
            </tr>
            <tr>
                <td>
                    <label for="enddate">End</label>
                </td>
                <td>
                    @Html.EditorFor(model => model.enddate, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all datepicker", @readonly = "readonly" } })
                    @Html.EditorFor(model => model.endtime, new { htmlAttributes = new { @class = "ui-widget-content ui-corner-all timepicker" } })
                    @Html.ValidationMessageFor(model => model.enddate, "", new { @class = "" })
                </td>
            </tr>
        </table>
    </fieldset>
    <br />
    <div style="text-align: right">
        <button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary">Save</button>
        <a href="javascript:close()">Cancel</a>
    </div>
}

<script>
    $(function () {
        $(".datepicker").datepicker({
            dateFormat: "dd/mm/yy"
        });
        $(".timepicker").timepicker({
            "forceRoundTime": true,
            "timeFormat": "h:i A"
        });

        $("form").submit(function () {
            var f = $("form");
            if (f.valid()) {
                $.post(f.action, f.serialize(), function (result) {
                    close(eval(result));
                });
            }
            return false;
        });
    });

    function close(result) {
        if (parent && parent.DayPilot && parent.DayPilot.ModalStatic) {
            parent.DayPilot.ModalStatic.close(result);
        }
    }
</script>

创建EventViewModel.cs

public class CreateEventViewModel
{
    [Required]
    [StringLength(50)]
    public string name { get; set; }

    [DataType(DataType.DateTime)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
    public DateTime startdate { get; set; }

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:HH:mm}")]
    public DateTime starttime { get; set; }

    [DataType(DataType.DateTime)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
    public DateTime enddate { get; set; }

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:HH:mm}")]
    public DateTime endtime { get; set; }
}

如果我单击“保存”按钮，它总是会聚焦到开始时间文本框。我已经使用 F12 开发人员工具进行了调试，没有错误或发布操作。如果我不使用 jquery timepicker，问题就解决了。

我究竟做错了什么？

4

2 回答 2

0

我的猜测是提交事件处理程序内部存在错误：

$("form").submit(function () {
    var f = $("form");
    if (f.valid()) {
        $.post(f.action, f.serialize(), function (result) {
            close(eval(result));
        });
    }
    return false;
});

该错误可防止“return false;” 从被调用这意味着表单被直接发布，而不是使用 $.post() 调用。浏览器 JS 控制台通常在 POST 上被清除，这就是为什么您看不到任何错误的原因。

实际的问题可能是 f.serialize() 没有正确序列化来自 jQuery 日期/时间选择器的值。

尝试使用 try { ... } catch (e) { ... } 包装代码以查看错误：

 $("form").submit(function () {
     try {
         var f = $("form");
         if (f.valid()) {
             $.post(f.action, f.serialize(), function (result) {
                 close(eval(result));
             });
         }
         return false;
     }
     catch(e) {
         alert("Error while processing the form: " + e);
     }
});
于 2015-04-30T12:14:54.607 回答
0

我认为是DataFormatString在你的班级，修改它是这样的：

public class CreateEventViewModel
{
    [Required]
    [StringLength(50)]
    public string name { get; set; }

    [DataType(DataType.DateTime)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
    public DateTime startdate { get; set; }

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:t}")]
    public DateTime starttime { get; set; }

    [DataType(DataType.DateTime)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
    public DateTime enddate { get; set; }

    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:t}")]
    public DateTime endtime { get; set; }
}

我只是将{0:HH:mm}小时格式更改为{0:t}onstarttime和endtime

于 2015-04-30T05:23:07.200 回答