Question

我知道有很多关于JSON的帖子没有填充FullCalendar.io事件但是，在这里我坐着，沮丧并且在我的智慧结束。经过几个小时的阅读（实际上下午大部分时间）和我发现的建议，以及一些试验和测试，我相信我已将我的问题缩小到几个可能性。

以下是纲要：

我有一个使用MVC的WebAPI，目前作为测试服务器在本地运行（Visual Studio 2017中的IISExpress）。 WebAPI从SQL服务器/存储过程（我的matchine不是本地过程）获取数据并返回数据，我将其放入列表并通过Json.Net序列化器序列化为JSON字符串。使用浏览器和Postman，我能够验证返回的数据是否是有效的JSON字符串。当我手动将JSON字符串（从WebAPI返回）插入FullCalendar时，它工作正常，但是当我要求FullCalendar去从WebAPI检索数据时，它失败了。

以下是WebAPI代码：

 public class CalData
    {
        public string title { get; set; }
        public DateTime start { get; set; }

    }

// GET api/values

    public string Get()
    {

        SqlConnection sqlConnection1 = new SqlConnection("My SQL Connect String");
        SqlCommand cmd = new SqlCommand();
        SqlDataReader reader;

        cmd.CommandText = "GetData";
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Connection = sqlConnection1;

        sqlConnection1.Open();

        reader = cmd.ExecuteReader();

        List<calData> CalInfo = new List<CalData>();
        while (reader.Read())
        {
            CalData item = new CalData()
            {
                title = (string)reader["title"],
                start = (DateTime)reader["start"]

            };
            CalInfo.Add(item);
        }

        reader.Close();

        sqlConnection1.Close();

        string output = JsonConvert.SerializeObject(CalInfo);

        return output;


    }

这是它导出的JSON字符串：

[{ 
  "title": "Test1",
  "start": "2018-04-12T00:00:00"
 },
 { 
   "title": "Test2",
   "start": "2018-04-13T00:00:00" 
}]

日历页面是＆＃34;查看＆＃34;来自ASP.NET MVC。下面是带有JSON硬编码的脚本标记之间的代码，正如前面提到的那样工作正常：

    $(document).ready(function () {

    $('#calendar').fullCalendar({})

});


$('#calendar').fullCalendar({
    events:
        [{ 
         "title": "Test1", 
         "start": "2018-04-12T00:00:00" 
         },
         {
           "title": "Test2",
           "start": "2018-04-13T00:00:00"
          }]

     });

现在，这是根据FullCalendar.io网站上的文档构建的代码：

$(document).ready(function () {

    $('#calendar').fullCalendar({})

});


 $('#calendar').fullCalendar({
    events: 'http://localhost:51730/api/values'

});

我已经验证FullCalendar通过在WebAPI上放置一个断点来询问数据（是的，我之后清除了断点但它仍然无法正常工作！）我只想到两件事之一，（1） API太慢，FullCalendar不等待数据。（2）当FullCalendar自己进行调用时，存在格式问题。

我对C＃，JQuery和Visual Studio足够新，我不知道如何调试我的FullCalendar MVC视图以确定FullCalendar调用是否在等待数据，如上面选项1中所怀疑的那样。同样，我不确定如何查看FullCalendar收到的内容，以及从我的WebAPI中获取选项2的JSON字符串。因此，我几乎处于僵局。

我非常感谢这里的一些指导，我想相信这对我以外的其他人来说是一个问题，然而，我觉得这是我忽略的一些简单。我也尝试提供尽可能多的信息，但是如果我需要添加更多信息请求它，我很乐意分享任何希望解决这个问题。

提前致谢！

Answer 1

所以我终于能够通过ADyson的一些指示来追踪问题所在。问题是我在检查chrome中的控制台时发现的跨源资源共享（CORS）错误。以下是错误的屏幕截图： CORS Error in Chrome

用于实现我的FullCalendar的WebAPI和ASP.Net MVC都在同一台机器上，但由于它们各自启动了IIS版本，因此端口号自然不同。默认情况下，WebAPI配置为仅允许相同的域/端口请求作为安全措施。我找到了两个帮助我解决问题的链接。我在这里分享它们，但请注意作者使用*作为原点的第一个链接（视频），我认为除了测试/ dev之外的任何环境都是不明智的，因为它打开你的WebAPI对所有起源和潜在的安全问题。第二个链接（尽管有点过时）更详细地解释了如何允许CORS以及每个代码的作用。

链接1：https://www.youtube.com/watch?v=uDy_cvf4nDg#action=share

链接2：https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

我希望这可以帮助其他人。我很高兴我不会发疯，我的代码是正确的，这只是一个权限问题。

非常感谢Stephan和ADyson的回答和指导。

FullCalendar.io事件未从WebAPI MVC填充JSON

1 个答案: