FullCalendar在事件创建后未更新

Question

我在我的一个页面上使用fullcalendar，事件是从我拥有的数据库中填充的。

我基本上正在创建事件：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "Id,Title,StartDate,EndDate,DescriptionId,AllDay")] Event @event)
{
    if (ModelState.IsValid)
    {
        db.Events.Add(@event);
        db.SaveChanges();
        return RedirectToAction("Index", "Main");
    }
    return View(@event);
}

当我重定向到Main控制器上的Index页面时，我刚创建的事件并未在日历上显示。

这是我的Index操作：

public class MainController : Controller
{
    private DbContextName db = new DbContextName();
    // GET: Main
    public ActionResult Index()
    {
        var data = db.Events.ToList();
        return View(data);
    }
    // more code not related to the question
}

这是我如何填充日历的方式：

$('#calendar').fullCalendar({
    themesystem: 'bootstrap-yeti',
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listWeek'
    },
    allDay:true,
    navLinks: true, // can click day/week names to navigate views
    editable: false,
    print: true,
    eventLimit: true, // allow "more" link when too many events
    events: function(start, end, timezone, callback) {
        $.ajax({
            url: submissionUrl,
            type: "GET",
            dataType: "JSON",
            success: function(result) {
                console.log(result);
                var events = [];
                $.each(result,
                    function(i, data) {
                        events.push({
                            title: data.Title,
                            description: data.Description,
                            start: moment(data.Start).format("YYYY-MM-DD HH:mm"),
                            end: moment(data.End).format("YYYY-MM-DD HH:mm"),
                            color: data.Color
                        });
                    });
                callback(events);
            },
            error: function(jqXHR) {
                console.log(jqXHR);
            }
        });
    },
    timeFormat: 'HH:mm', // uppercase H for 24-hour clock
    eventRender: function (event, element) {
        element.find('.fc-title').append("<br/>" + event.description);
    }
});

创建一个新事件并将重定向到索引页面后，我检查了控制台，除了我刚创建的事件之外，我会看到所有事件。但是，如果我刷新页面，则会出现事件，一切都可以。但是，为什么不在重定向上这样做？

update

submissionUrl转到我的Main控制器上的GetCalendarData的方法：

[HttpGet]
public ActionResult GetCalendarData()
{
    var data =
        db.Events.Select(
            x =>
                new
                {
                    Title = x.Title,
                    Description = x.Description.DescriptionTitle,
                    Start = x.StartDate,
                    End = x.EndDate,
                    Color = x.Description.Color
                }).ToList();
    return Json(data, JsonRequestBehavior.AllowGet);
}

Answer 1

update

尝试将cache: false添加到您的内部AJAX调用中。这将有jQuery尝试避免获得缓存的数据。

供将来考虑

由于您有一个API服务，该服务返回了与FullCalendar所寻找的东西非常接近的东西，因此您可以简化定义填充事件的方式。

let eventUrl = 'http://myserver/myapp/mycontroller/geteventjson';
$('#calendar').fullCalendar({
                themesystem: 'bootstrap-yeti',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay,listWeek'
                },
                allDay: true,
                navLinks: true, 
                editable: false,
                print: true,
                eventLimit: true,
                events: eventUrl, // Simply a url that returns JSON events
                timeFormat: 'HH:mm', 
                eventRender: function (event, element) {
                    element.find('.fc-title').append("<br/>" + event.description);
                }
            });

完整日历可以直接从您的服务中填充，而无需本地集合。