The closest I have come to finding an an answer is here: https://stackoverflow.com/a/16295052/608674
The problem is that I can not figure out how set the root name dynamically.
Using the w3widget responsive-calendar. The calendar uses a javascript object with many child objects. Like this:
$(".responsive-calendar").responsiveCalendar({
events: {
"2018-04-30": {
"number": 5,
"badgeClass": "badge-warning",
"url": "http://w3widgets.com/responsive-calendar"
},
"2018-04-25": {
"number": 1,
"badgeClass": "badge-warning",
"url": "http://w3widgets.com/responsive-calendar"
},
"2018-04-03": {
"class": "active special",
"url": "http://w3widgets.com/responsive-calendar"
},
"2018-04-26": {
"number": 2,
"badgeClass": "badge-warning",
"url": "http://w3widgets.com"
},
"2018-05-03": {
"number": 1,
"badgeClass": "badge-error"
},
"2018-06-12": {}
}
});
I attempted to bypass this problem by returning a list of strings from the controller but this isn't working... I'm not sure how to add each string into the "event" JavaScript object with the correct root name.
var jsonEvent = string.Format("'{0}: {{'" +
"'class' : '{1}'," +
"'link' : '{2}'," +
"'link_target' : '{3}," +
"'title' : '{4}'," +
"'location' : '{5}'," +
"'date' : '{6}'," +
"'desc' : '{7}'," +
"'count' : '{8}'," +
"'event_id' : '{9}'" +
"}},",
evnt.StartDate.AddDays(i).ToString("yyyy-MM-dd"),
GetEventClass(evnt.Id, i, dayCount),
evnt.EventUrl,
hasLink,
evnt.Name,
evnt.Location,
dateString,
evnt.Description,
i,
eventId);
I tried to put the string into the event variable like this:
var actionUrl = '@Url.Action("GetJsonEvents", "EventsSurface", new { pageId = Model.Id })';
$.getJSON(actionUrl).done(function (data) {
$.each(data.items, function (index, item) { event[index] = value; });
});
Of course that seems wrong because it would give the root name the value of index.
I've also tried adding the data into variable called "events_data" and parsing it out like was suggested in another question events: Json.Parse(events_data), but that doesn't seem to work... probably because I'm not returning the data correctly from the controller.
It's apparent to me that I just don't understand this process well enough. I know I'm not working with JSON objects so that confuses me when trying to pass back data to the view from the controller...
Assuredly, part of the problem is that I am returning the list of strings from the controller like this: return Json(eventList, JsonRequestBehavior.AllowGet);
I don't know how else to return the data to an ajax call and place it into a JavaScript object.
Edit: 1/518 12.32
Using a Dictionary object in the controller works. I had to create a class for the Json Event Object because the name "class" is reserved in C# and I couldn't use an anonymous object. I ran into a problem trying to decorate the class property with a JsonProperty attribrute...
private class JsonEvent
{
[JsonProperty (PropertyName = "class")]
public string Class { get; set; }
public string link { get; set; }
...}
because I was still using the return Json(..., ...), which is the .net serialization not Newtonsoft. I just had to serialize using Json and return the content: return Content(JsonConvert.SerializeObject(eventList), "application/json");.
In the view, when I JSON.stringify(data) the event object looks perfect. Unfortunately, when I try to use the data in the resonsponive-calendar, it still doesn't work.
So far I have tried:
event_data = data;
event_data = JSON.stringify(data);
Whole ajax call looks like:
var events_data = {};
$.getJSON(actionUrl, events_data).done(function (data) {
console.log(JSON.stringify(data));
events_data = Json.parse(data);
});
And of course, the calendar just calls the event: events_data
Solved 1/5/18 13.54
So, yes, the dictionary in the Controller is the way to go. I am working with someone else's code in JavaScript. They hardcoded the data in. Turns our that the calendar was loading and calling the event data before the ajax call was complete.
so events_data = data works just fine.
