javascript - 完整日历 GetEvents() 方法调用不起作用

Question

我正在尝试从数据库中获取事件，但无法让它工作。这些事件没有显示在我的日历和网络控制台中，我得到:

无法加载资源:服务器响应状态为 500(内部服务器错误)

抛出异常:

参数字典包含“ForecastCalendar.Controllers”中方法“System.Web.Mvc.JsonResult GetEvents(Double, Double)”的不可空类型“System.Double”的参数“start”的空条目.HomeController'。可选参数必须是引用类型、可为 null 的类型，或者声明为可选参数。参数名称:参数

以下是我的 Controller 中用于获取事件的方法:

public JsonResult GetEvents(double start, double end)
{
    var events = new List<Event>();

    var dtstart = ConvertFromUnixTimestamp(start);
    var dtend = ConvertFromUnixTimestamp(end);

    DateTime currStart;
    DateTime currEnd;

    foreach (Event ev in db.Events)
    {
        currStart = Convert.ToDateTime(ev.StartDate);
        currEnd = Convert.ToDateTime(ev.EndDate);

        events.Add(new Event()
        {
            ID = ev.ID,
            Title = ev.Title,
            StartDate = currStart,
            EndDate = currEnd,
            AllDay = true,
            EventType = ev.EventType,
            Hours = ev.Hours
        });
    }

    var rows = events.ToArray();
    return Json(rows, JsonRequestBehavior.AllowGet);
}

private static DateTime ConvertFromUnixTimestamp(double timestamp)
{
    var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);
    return origin.AddSeconds(timestamp);
}

以下是我的事件模型:

using System;
using System.ComponentModel.DataAnnotations;

namespace ForecastCalendar.Models
{
    public enum EventType
    {
        BAU,
        Project,
        AnnualLeave
    }

    public class Event
    {
        public int ID { get; set; }

        [Required]
        [DataType(DataType.Date, ErrorMessage = "Please enter a valid date.")]
        [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
        [Display(Name = "Start Date")]
        public DateTime StartDate { get; set; }

        [Required]
        [DataType(DataType.Date, ErrorMessage = "Please enter a valid date.")]
        [DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
        [Display(Name = "End Date")]
        public DateTime EndDate { get; set; }

        [Required]
        [StringLength(50, ErrorMessage = "Title cannot be longer than 50 characters.")]
        [RegularExpression(@"^[a-zA-Z- ]+$", ErrorMessage = "Invalid characters used. A-Z or a-z, '-' and ' ' allowed.")]
        [Display(Name = "Title")]
        public string Title { get; set; }

        [Required]
        [EnumDataType(typeof(EventType), ErrorMessage = "Submitted value is not valid.")]
        [Display(Name = "Type")]
        public EventType? EventType { get; set; }

        [Required]
        public double Hours { get; set; }

        [Required]
        public Boolean AllDay { get; set; }

        [Timestamp]
        public byte[] RowVersion { get; set; }

        public virtual Person Person { get; set; }
    }
}

这是呈现日历的 JavaScript。

@{
    ViewBag.Title = "Home Page";
}

@Styles.Render("~/Content/fullcalendar")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/fullcalendar")

<br />
<div class="container">
    <div id="calendar"></div>
</div>
<br />

<script type="text/javascript">
$(document).ready(function () {
    $('#calendar').fullCalendar({
        header: {
            left: 'title',
            center: '',
            right: 'prev,next today' },
        defaultView: 'month',
        weekends: false,
        editable: false,
        events: "/Home/GetEvents/"
    });
});
</script>

非常感谢任何帮助。

编辑:

我已更改 GetEvents() 方法以符合完整日历中的事件类型。

public JsonResult GetEvents(double start, double end)
        {
            var fromDate = ConvertFromUnixTimestamp(start);
            var toDate = ConvertFromUnixTimestamp(end);

            var rslt = db.Events;

            List<Event> result = new List<Event>();

            foreach (var item in rslt)
            {
                Event ev = new Event();
                ev.ID = item.ID;
                ev.Title = item.Title;
                ev.Hours = item.Hours;
                ev.StartDate = item.StartDate;
                ev.EndDate = item.EndDate;
                ev.EventType = item.EventType;
                ev.AllDay = ev.AllDay;
            }

            var resultList = result;

            var eventList = from e in resultList
                            select new
                            {
                                id = e.ID,
                                title = e.Title,
                                start = e.StartDate,
                                end = e.EndDate,
                                allDay = e.AllDay
                            };

            var rows = eventList.ToArray();
            return Json(rows, JsonRequestBehavior.AllowGet);
        }

Answer 1

检查您在 GetMethods 处接收服务器端的参数，该参数具有等待两个 Double 参数的签名，不为空。

此外，您还直接从模型事件对象发送 JSON 对象。然后，在客户端，这个 JSON 对象直接作为 fullcalendar 中的源注入(inject)。但 fullcalendar 需要文档中指定的属性，因此 start 和 title 是强制属性。

来自fullcalendar doc Event object

'start'

The date/time an event begins. Required.

A Moment-ish input, like an ISO8601 string. Throughout the API this will become a real Moment object.

但是您的 JSON 对象没有 start 属性，而是 StartDate。

现在您可以:

• 更改您的模型以匹配完整日历属性。
• 映射服务器端属性，以便您返回具有正确名称的 JSON。
• ...您也可以在客户端映射它们，但基于您当前的代码将是乏味且肮脏的

无论如何，请确保在客户端您的对象具有 start 属性。