如何防止 jQuery 完整日历往返数据库

Question

我正在使用jQuery完整日历和 ASP.NET MVC应用程序。 我的日历全年将有 600 到 3000 个事件。 我将所有事件从控制器返回到视图，但是当我更改月份时，我的代码会再次调用数据库。 我想只调用视图中日期的必要事件或重用我拥有的数据，除非有一个事件的时间戳大于最后一个视图中的最大时间戳。 我正在寻找最佳实践/推荐的方法。 如果我只使用查看日期的获取事件，如何告诉我 ASP.NET MVC 控制器查看哪些日期？

• 客户端：

  $（document）.ready（function （） { $（document）.ajaxStart（$.blockUI）.ajaxStop（$.unblockUI）; 获取日历（）;});

  函数 getCalendar（）{ $（"#calendar"）.fullCalendar（{ 加载： 函数 （布尔值） {

          },
          height: 500,
          dayClick: function (date, allDay, jsEvent, view) {
             },
          eventClick: function (calEvent, jsEvent, view) {
  
          },
          dayRender: function (daysOfWeek, cell) {
              $(cell).addClass('fc-state-highlight');
          },
          header: {
              left: 'prev,next today',
              center: 'title',
              right: 'month,agendaWeek'
          },
          editable: false,
          events: function (start, end, callback) {
              // UNDONE This should not be hard set
              var qs = Math.random();
              var url = '@Url.Action(@"GetJSONCalendarEvents")';
              url += "?rand=" + Math.random();
              url = decodeURIComponent(url);
              $.getJSON(url, function (locationsArray) {
                  var result = $(locationsArray).map(function () {
                      return {
                          id: this.id,
                          title: this.title,
                          start: this.start,
                          end: this.end,
                          allDay: this.editable,
                          className: this.className,
                          EventType: this.EventType
                      };
                  }).toArray();
                  callback(result);
              });
          },
          eventRender: function (event, element) {
  
          }
      });
  

  }

Answer 1

您需要

在初始化 fullCalendar 之前调用事件数据，然后将您获得的数据传递给事件。

$(document).ready(function () { $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI); 
var myData;
myData = function () {
        // UNDONE This should not be hard set
        var qs = Math.random();
        var url = '@Url.Action(@"GetJSONCalendarEvents")';
        url += "?rand=" + Math.random();
        url = decodeURIComponent(url);
        $.getJSON(url, function (locationsArray) {
            var result = $(locationsArray).map(function () {
                return {
                    id: this.id,
                    title: this.title,
                    start: this.start,
                    end: this.end,
                    allDay: this.editable,
                    className: this.className,
                    EventType: this.EventType
                };
            }).toArray();
            return result;
        });

getCalendar(myData); });
function getCalendar() { $("#calendar").fullCalendar({ loading: function (bool) {
    },
    height: 500,
    dayClick: function (date, allDay, jsEvent, view) {
       },
    eventClick: function (calEvent, jsEvent, view) {

    },
    dayRender: function (daysOfWeek, cell) {
        $(cell).addClass('fc-state-highlight');
    },
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek'
    },
    editable: false,
    events: myData
    },
    eventRender: function (event, element) {

    }
});
}