FullCalendar.io events not populating JSON from WebAPI MVC

Question

I know there are a ton of posts on JSON not populating the FullCalendar.io events however, here I sit, frustrated and at my wits end. After reading through for hours(most of the afternoon actually) and following suggestions I found, along with a bit of trial and testing, I believe I have narrowed my issue down to a few possibilities.

Here is the rundown:

I have a WebAPI that uses MVC and is currently running locally as a test server (IISExpress from within Visual Studio 2017). The WebAPI gets its data from a SQL server/Stored Procedure (which is not local to my matchine) and returns the data, which I put into a list and serialize as a JSON string via the Json.Net serializer. Using both the browser and Postman, I am able to verify the data returned is a valid JSON string. When I insert the JSON string (returned from the WebAPI) manually into FullCalendar it works fine, but when I ask FullCalendar to go and retrieve the data from the WebAPI it fails.

Here is the WebAPI code:

 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;


    }

Here is the JSON String it exports:

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

The calendar page is a "View" from an ASP.NET MVC. Here is the code between the script tags with the JSON hard coded in, which as noted earlier works just fine:

    $(document).ready(function () {

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

});


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

     });

Now here is the code built from the documentation on the FullCalendar.io website:

$(document).ready(function () {

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

});


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

});

I have verified FullCalendar is asking for the data by putting a breakpoint on the WebAPI (Yes I cleared the breakpoint afterwards and it still did not work!) I am left to think one of two things is happening, (1)The API is too slow and FullCalendar is not waiting for the data. (2) There is a formatting issue when FullCalendar makes the call on its own.

I am new enough to C#, JQuery, and Visual Studio that I am not sure how to debug my FullCalendar MVC view to determine if the FullCalendar call is waiting for the data, as suspected in option 1 above. Likewise, I am not sure to how to view what FullCalendar receives and does with the JSON string from my WebAPI for option 2. Therefore I am pretty much at an impasse.

I would very much appreciate some guidance here, I want to believe this has been an issue for someone else besides me, however, I have a feeling it is something simple I overlooked. I also tried to provide as much information as possible, however if I need to add more please request it, I am happy to share whatever in hopes of resolving this.

Thanks in advance!

Answer 1

So I finally was able to track down what the issue was thanks to some pointers from ADyson. The issue was a Cross Origin Resource Sharing (CORS) error that I discovered while inspecting the console in chrome. Here is a screenshot of the error: CORS Error in Chrome

The WebAPI and the ASP.Net MVC that is used for implementing my FullCalendar are both on the same machine however, since they each launch a version of IIS, the port numbers were naturally different. By default the WebAPI is configured to only allow same domain/port requests as a security measure. I found two links that helped me resolve the issue. I am sharing them here, but please note in the first link (the video) the author uses * for the origin, which I would think that in any environment other than a test/dev would be unwise to use as it opens up your WebAPI to all origins and poses a potential security issue. The second link (although a bit dated) explains in more detail how to allow CORS and what each piece of the code does.

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

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

I hope this helps someone else down the road. I am just happy I was not going crazy and my code was correct, it was just a permissions issue.

Many thanks to Stephan and ADyson for your input and guidance towards the answer.