Fullcalendar 事件填充问题：javascript 不触发答案

【问题标题】：Fullcalendar event population issue: javascript does not fireFullcalendar 事件填充问题：javascript 不触发
【发布时间】：2013-02-06 00:13:44
【问题描述】：

我在用事件填充 jQuery FullCalendar 时遇到了很多麻烦。

浏览器：IE8

技术：MVC 3 Razor

使用的脚本：jquery-1.5.1、fullcalendar.js

控制器和支持方法：（尽管我的问题是它一开始就没有出现）

     public JsonResult GetCalendarData()
    {
        List<CourseSection> courseSecs = //genarates list of course sections from db context
        var listOfEvents = new List<object>();

        foreach (CourseSection courseSec in courseSecs)
        {
            Course course = db.Course.Find(courseSec.CourseID);
            listOfEvents.Add(
            new
            {
                id = courseSec.ID,
                title = course.Name + "Section " + courseSec.Name,
                start = ToUnixTimespan(courseSec.sectionBeginDateAndDailyStartTime),
                end = ToUnixTimespan(courseSec.sectionEndDateAndDailyEndTime),
                allDay = false //none of the course sections run all day
            });
        }

        return Json(listOfEvents.ToArray(), JsonRequestBehavior.AllowGet);

    }
    private string ToUnixTimespan(DateTime date) //supporting method
    {
        TimeSpan tspan = date.ToUniversalTime().Subtract(
        new DateTime(1970, 1, 1, 0, 0, 0));

        return Math.Truncate(tspan.TotalSeconds).ToString();
    }

查看：

    @model Web.Models.Registration

     @{
     ViewBag.Title = "ViewSchedule";
     Layout = "~/Views/Shared/_SiteLayout.cshtml";
     }

     <script>
     $(document).ready(function () {
     // page is now ready, initialize the calendar...
     $('#calendar').fullCalendar({
              defaultView: "agendaWeek",
              year: 2013,
              month: 0,
              date: 25,
              minTime: 6,
              maxTime: 18,
              aspectRatio: 1.5,
              allDaySlot: false,
              events: "/Course/GetCalandarData"
              });
     });
     </script>


     <div class="wrapper col3">
       <div id="container">
         <h1>View Schedule</h1>
           <div id = 'calendar'>
           </div>
        <br />
        @Html.ActionLink("Home", "Home", "Static")
        <br />
       </div>
     </div>

问题：日历本身和所有配置都可以正常加载。但是，配置的最后一行（事件：“/Course/GetCalendarData”）不会触发。时期。它永远不会触发我在控制器方法中放置的任何调试块，并且不会返回任何 JSON。

我尝试在访问 URL 中添加强制性的“@Url.Content...”前缀。我曾尝试将该方法容纳在不同的控制器中。我尝试过使用不同版本的 jQuery。我已经删除了所有可能导致冲突的无关脚本。一切为了纳达。

我一直在为此撕扯头发。有什么想法吗？

【问题讨论】：

首先在浏览器控制台中检查实际的 AJAX 请求，看看它在做什么。可以查看状态、发送/接收的数据等，也可以查看它正在使用的 url
我通过开发工具在分析器工具中检查了 AJAX 请求/站点活动。我可以看到何时调用视图足够清晰，但之后它只是 jQuery 和 fullcalendar 脚本之间的一系列活动。有一个“_addEventSource”函数，但是它的包含和独占时间都是0。并且没有调用Course/GetCalendarData。它应该去哪里......
是否返回数据？它是日历想要的格式的有效 json 吗？检查请求时可以看到响应
据我所知，没有数据被返回。它采用有效的格式，因为我已经将这个完全相同的东西作为独立解决方案的一部分进行了测试，并且在那里运行良好......你能给我一些特定的检查/说明来检查你的想法吗？我不确定我在寻找什么......
在 chrome 中的浏览器控制台 f12 或 Firefox 中的 Firebug 可以在 Net 或 Network 选项卡中看到完整的请求。将显示状态 - 需要为 200，并且可以准确查看服务器发回的内容。如果没有发回数据并且 url 正确且状态为 200，则服务器代码有问题。还有一个 500 会告诉你服务器代码失败了

标签： jquery asp.net-mvc json asp.net-mvc-3 fullcalendar

【解决方案1】：

所以经过数小时的调试后，我发现了一种解决方法。

我没有从视图向 GetCalendarData 方法发起 JSON 请求，而是修改了控制器代码并将其移至单独的静态类。然后我使用它返回一个简单的对象数组，然后在视图中动态地将数组转换为 JSON。观察：

控制器和支持方法：

    public static object[] GetCalendarData()
    {
    List<CourseSection> courseSecs = //list of course sections from db context
    var listOfEvents = new List<object>();

        foreach (CourseSection courseSec in courseSecs)
        {
            Course course = db.Course.Find(courseSec.CourseID);
            listOfEvents.Add(
                new
                {
                    id = courseSec.ID,
                    title = course.Name + "Section " + courseSec.Name,
                    start = ToUnixTimespan(courseSec.sectionBeginDateAndDailyStartTime),
                    end = ToUnixTimespan(courseSec.sectionEndDateAndDailyEndTime),
                    allDay = false
                });
        }

        return listOfEvents.ToArray();

    }

    public static string ToUnixTimespan(DateTime date)
    {
        TimeSpan tspan = date.ToUniversalTime().Subtract(
     new DateTime(1970, 1, 1, 0, 0, 0));

        return Math.Truncate(tspan.TotalSeconds).ToString();
    }

查看： @model Web.Models.Registration

    @{  
        ViewBag.Title = "ViewSchedule";
        Layout = "~/Views/Shared/_SiteLayout.cshtml";
    }

    @{
        object[] events = Web.Extensions.CourseOps.GetCalendarData();
    }

    <script>
        $(document).ready(function () {
            var allSections = @Html.Raw(Json.Encode(events));
            // page is now ready, initialize the calendar...
            $('#calendar').fullCalendar({
        defaultView: "agendaWeek",
        year: 2013,
        month: 0,
        date: 25,
        minTime: 6,
        maxTime: 18,
        aspectRatio: 1.5,
        allDaySlot: false,
        events: allSections,
        // put your options and callbacks here
    });

        });
    </script>


    <div class="wrapper col3">
      <div id="container">
        <h1>View Schedule</h1>
        <div id = 'calendar'>
        </div>
         <br />
        @Html.ActionLink("Home", "Home", "Static")
        <br />
      </div>
    </div>

我的原始 javascript 配置（事件：“/Course/GetCalendarData”）没有触发这一事实可能归因于我的控制器上的授权属性，或者我检查经过身份验证的 cookie 的相当激进的方式，但那是有点进入杂草。

关键是，我找到了一个成功的解决方法，我很满意。

特别感谢“charlietfl”一直支持我并尽最大努力提供帮助。

下次再来……

【讨论】：