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



我知道有很多关于 JSON 的帖子没有填充 FullCalendar.io 事件,但是,我坐在这里,沮丧和机智。 在通读了几个小时(实际上是下午的大部分时间)并遵循我发现的建议以及一些试用和测试之后,我相信我已经将我的问题缩小到几种可能性。

以下是摘要:

我有一个使用MVC的WebAPI,目前在本地作为测试服务器运行(Visual Studio 2017中的IISExpress)。 WebAPI 从 SQL 服务器/存储过程(不是我的 matchine 本地)获取数据并返回数据,我将其放入列表中并通过 Json.Net 序列化程序序列化为 JSON 字符串。 使用浏览器和邮递员,我能够验证返回的数据是有效的 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" 
}]

日历页面是来自 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'
});

我已经通过在 WebAPI 上放置断点来验证 FullCalendar 是否在请求数据(是的,我之后清除了断点,但它仍然不起作用! 我只能认为正在发生以下两件事之一:(1)API太慢,FullCalendar没有等待数据。(2) 全日历自行调用时存在格式问题。

我对 C#、JQuery 和 Visual Studio 足够陌生,以至于我不确定如何调试我的 FullCalendar MVC 视图以确定 FullCalendar 调用是否正在等待数据,如上面的选项 1 所怀疑的那样。 同样,我不确定如何查看 FullCalendar 从我的 WebAPI 中接收和使用选项 2 的 JSON 字符串执行的操作。因此,我几乎陷入了僵局。

我非常感谢这里的一些指导,我想相信这对除了我之外的其他人来说是一个问题,但是,我有一种感觉,这是我忽略的简单事情。 我也试图提供尽可能多的信息,但是如果我需要添加更多,请提出要求,我很乐意分享任何希望解决这个问题的信息。

提前感谢!

因此,由于 Adyson 的一些指示,我终于能够找到问题所在。 问题是我在 chrome 中检查控制台时发现的跨源资源共享 (CORS) 错误。 以下是错误的屏幕截图: 铬中的 CORS 错误

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

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

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

我希望这对其他人有所帮助。我很高兴我没有发疯,我的代码是正确的,这只是一个权限问题。

非常感谢Stephan和Adyson对答案的投入和指导。

相关内容

  • 没有找到相关文章

最新更新