Develop Reference

FullCalendar events not showing when from JSON feed

I have this FullCalendar portion of code on my page to pull events from an API controller in a Razor Pages project:
var calendar;
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid', 'interaction', 'list', 'timeGrid'],
defaultView: 'dayGridMonth',
customButtons: {
newEventButton: {
text: 'new event',
click: function () {
window.location.assign("Calendars/EditPersonnelEvent/0");
}
}
},
header: {
left: 'prev,next today',
center: 'title',
right: 'newEventButton,dayGridMonth,timeGridWeek,timeGridDay'
},
events: "/api/fetchEvents"
});
calendar.render();
})
and it seems to be working just fine, here's the snip of the fetch:
The problem is, the event fetched doesn't show on the calendar, on any of the views. When I paste that JSON into a hard-coded event, it works fine and I see the event, just not when it's from the GET. I've tried this with eventSources to no avail. I've searched about 30 different answers here and still no luck. The JSON seems to be formatted correctly, it seems to be getting fetched correctly, it's just not showing up. And yes, I'm looking at the correct days ;)
REQUESTED UPDATE:
Here is the "response" data:
and here's the .NET code for this fetch:
[Route("api/fetchEvents")]
[ApiController]
public class FetchEventsController : ControllerBase
{
private readonly IPersonnelEventService _personnelEventService;
public FetchEventsController(IPersonnelEventService personnelEventService)
{
_personnelEventService = personnelEventService;
}
// GET: api/FetchEvents/5
[HttpGet]
public string Get(string start, string end)
{
int currentUserId = User.Identity.GetUserId();
DateTime objStart = DateTime.Parse(start, null, System.Globalization.DateTimeStyles.RoundtripKind);
DateTime objEnd = DateTime.Parse(end, null, System.Globalization.DateTimeStyles.RoundtripKind);
List<Entities.PersonnelEvent> events = new List<Entities.PersonnelEvent>(_personnelEventService.GetPersonnelEventsByUserId(currentUserId, objStart, objEnd));
return JsonConvert.SerializeObject(events.Select(pe => pe.GetEventAsFullCalendarJson()).ToList());
}
}
and here's the code for "GetEventAsFullCalendarJson":
public string GetEventAsFullCalendarJson()
{
var info = new
{
title = Name,
start = StartDate,
end = EndDate
};
return JsonConvert.SerializeObject(info);
}
}

The problem is you are double-serializing your data.
You serialise each event object individually in GetEventAsFullCalendarJson() when you do return JsonConvert.SerializeObject(info);. So at that point you already have a JSON string representing a single event.
But then you combine all these together and serialise the whole thing again when you write return JsonConvert.SerializeObject(events.Select(pe => pe.GetEventAsFullCalendarJson()).ToList()); in the Get() method. This means the already-serialised JSON event strings are serialised again - which is why you've got quote marks round the event object (e.g. "{ ... }" and then escaped quotemarks (\") within it.
The outcome is that to fullCalendar, your data just looks like an array of strings, not an array of event objects.
The fix is simple - remove the serialisation of the individual events. An object/array must be serialised all at once to create a coherent single piece of JSON.
This:
return JsonConvert.SerializeObject(events.Select(pe => {
title = pe.Name,
start = pe.StartDate,
end = pe.EndDate
}).ToList());
would work, I think.

Dates from javascript to aspnet core controller

My page sends a form via $.get to an aspnet core action.
$("#submit-form").on("submit", function () {
var form = $("#submit-form");
var valuesToSubmit = form.serialize();
$.get("/MyController/List", valuesToSubmit, function (response) {
....
});
return false;
});
In this form this is a Date field that is in format: dd/mm/yyyy.
The valuesToSubmit variable has this value:
Name=&DateBirth=05%2F08%2F1971&__RequestVerificationToken=CfDJ8DHb24pNxPVIkZwi2Mzh0aTz4ZPyAIDsVSVm7-KxVMiV17Z1Twov88zN3F-JwewrGHF9LWSkdp5eOks7KwTgHWRhkdE7N6vfBHeNviCNV1cQdHdW5zPQgk3EEFPN1Lqe0vBK9ay5vnc0oCYWWPPuYgmQTC65iYTy7-0oc0CskGJpul5eSwuS3hUMer4P6g16Ng
I typed 05/08/1971 but in the controller the date parameter comes as 08/05/1971
My action code:
public async Task<IActionResult> List(string name, DateTime? dateBirth)
Should I change something in the javascript or c# code?

C# MVC No submit pass object between views

I am sorry for my typos.I am working on proof of concept C# ASP.NET MVC application where I need to pass data between two views when there is no post and get. One view launches a modal dialog and I need communication between them. We are using JQuery.
I have a view called Charges.cshtml with a data grid. The first column of the datagrid may have span element or a link element depending on a
property which will tell whether the charge have single or multiple descriptions. The view looks like below.
If the charge has multiple descriptions user will click the corresponding description link( Description2 in this case ) and a modal dialog will open showing various descriptions like below
Now in this modal dialog user will confirm/select one description. Now I need to close the modal dialog and update the description of selected
charge like below
The hard part here is how to pass data between two views. I am ok to pass data via controller or via javascript.
I tried various ways to pass selected charge from Charges.cshtml to LoadLoanChargeDescriptions method in LoanCharge controller like json serialize, ViewData, ViewBag, TempData and so on but of no use. I can pass simple data types like int, string, float but not whole object. I feel I need to pass CurrentDescription and Descriptions to my controller and from their I need to move to other pieces. I tried to pass List of strings but could not see how to access them in controller since I got count as 0 in my controller. I am able to open popup of multiple descriptions UI ( for now just added Hello text )
Please see below for my code snippets
Charges.cshtml
#model ChargeViewModel
#using (Html.FAFBeginForm())
{
<div>
<table>
<tbody>
<tr >
//.....
<td>
#if(Model.IsMultipleMatch)
{
var loanCharge = Model as ChargeViewModel;
if (loanCharge.IsMultipleMatch == true)
{
//string vm = #Newtonsoft.Json.JsonConvert.SerializeObject(loanCharge);
<span>
<a
onclick="ShowMatchingDescriptions('#Url.Action("LoadLoanChargeDescriptions", "LoanCharge")','', '920','500')">
#loanCharge.Description
</a>
</span>
}
}
else
{
<span>Model.Description</span>
}
</td>
</tr>
</tbody>
</table>
</div>
}
public class ChargeViewModel
{
public string Description {get;set;}
public bool IsMultipleMatch {get;set;}
public List<string> Descriptions {get;set;}
}
public class LoanChargeController
{
public ActionResult LoadLoanChargeDescriptions()
{
// get data here and pass/work on
return View("_PartialMultipleMatchPopup", null);
}
}
In Review.js
function ShowMatchingDescriptions(popUpURL, windowProperties, w, h) {
try {
var left = (screen.width / 2) - (w / 2);
var top = (screen.height / 2) - (h / 2);
var properties = windowProperties + "dialogwidth:" + w + "px;dialogheight:" + h + "px;dialogtop:" + top + "px;dialogleft:" + left + "px;scroll:yes;resizable:no;center:yes;title:Matching Lender’s Fee;";
$.when(
window.showModalDialog(popUpURL, window, properties)
)
.then(function (result) {
var childWindow = result;
});
}
catch (err) {
alert("Error : " + err)
}
}
UPDATE 1
I updated my question and posted more details.
Thanks in advance.
UPDATE 2
Please see for my solution at below link.
MVC pass model between Parent and Child Window

Why don't you use the AJAX for pass the data?
function ChargeViewModel() {
this.Description ='';
this.IsMultipleMatch =false;
}
var chargeViewModel= new ChargeViewModel();
var data = JSON.stringify({ 'chargeViewModel': chargeViewModel });
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'html',
type: 'POST',
url: '#Url.Action("LoadLoanChargeDescriptions", "LoanChargeController")',
data: data,
success: function (result) {
//result will be your partial page html output
},
failure: function (response) {
}
});
Then you have to change the controller like this:
public ActionResult LoadLoanChargeDescriptions(ChargeViewModel chargeViewModel)
{
// get data here and pass/work on
return View("_PartialMultipleMatchPopup", null);
}
Let me know you have queries..

OData cannot find the controller unless the parameter is sent as int

I have this OData controller that works fine for GET and Patch method. However, there's a custom GET method that I had to create in order for use to load the data from a different server and copy to the new one from where the OData retrieves the data. When the user "Retrieves" new data, it sends the date as a parameter. Since it's a new claim for the date, I couldn't put the date in the $filter, hence the new GET method.
This is what the GET method looks like:
[ODataRoute("Claims({key})")]
[HttpGet]
[EnableQuery(AllowedQueryOptions= System.Web.OData.Query.AllowedQueryOptions.All)]
public HttpResponseMessage ClaimByDate([FromODataUri] int key)
{
System.Diagnostics.Debug.WriteLine(key);
string date = key.ToString();
DateTime claimDate = DateTime.ParseExact(date, "ddMMyyyy", CultureInfo.InvariantCulture);
DateTime today = DateTime.Today;
if (!ClaimsExistForToday(today))
{
GenerateClaimsList(today, claimDate);
return Request.CreateResponse(HttpStatusCode.OK);
}
return Request.CreateResponse(HttpStatusCode.NotModified);
}
Here's the angularjs controller
vm.retrieve = function () {
if (vm.selectedDate !== null) {
var day = vm.selectedDate.getDate();
var date = (day + "" + (vm.selectedDate.getMonth() + 1) + "" + (vm.selectedDate.getFullYear()));
ClaimService.getClaimsByDate(date)
.then(function (response) { if (response) activate(); })
vm.clear();
}
}
Here's the angular function that's sending the get request:
function getClaimsByDate(date) { //Angularjs service
return $http.get("odata/Claims(" + date + ")")
.then(function (data) {
return true;
});
}
First Issue:
The OData GET method have to have "int" for the parameter. I tried with string and DateTime, but when I send the data with 'string' as paramenter, it won't find the controller at all unless the data was sent as integer. And if I send the date as UTC, I get an error as potentially dangerous and won't execute.
Second Issue:
Sending date as int, it will find the controller if date is sent as 30112015 in the format ddMMyyyy, but it won't find 1112015 or 01112015. It seems like it's only recognizing the date greater than 10. Other than this, everything else works fine including the regular GET method with [EnableQuery].

I found this SO answer Web API and OData- Pass Multiple Parameters which helped me out. I ended up creating a function with the key as parameter. Then it was only a matter of calling the function from Angular.

jQuery select2 with remote data and asp.net

I am using select2 library for replacing select boxes. I rearranged example 7 that you can find on Select2 library page (scroll down with id
$("#e7").select2 etc...). I made my own generic handler that return serialized json data:
GetData.asxh view :
public class GetData : IHttpHandler
{
public bool IsReusable
{
get
{
return false;
}
}
public class RecipesList
{
public int total { get; set; }
public List<TopRecipeTable> recipes { get; set; }
public RecipesList() { }
public RecipesList(int total, List<TopRecipeTable> recipes)
{
this.total = total;
this.recipes = recipes;
}
}
private string GenerateJsonSerializedObject(int languageId, string orderBy)
{
RecipesList recipeList = new RecipesList(15, DBDataBase.GetTopRecipesByNumberOfRecipes(languageId, 15));
return new JavaScriptSerializer().Serialize(recipeList);
}
public void ProcessRequest(HttpContext context)
{
int languageId;
bool languageParsed = int.TryParse(context.Request["languageId"], out languageId);
string orderBy = (string)context.Request["orderBy"];
if (languageParsed && orderBy != string.Empty)
{enter code here
context.Response.ContentType = "application/json";
var jsonValue = GenerateJsonSerializedObject(languageId, orderBy);
context.Response.Write(jsonValue);
}
}
This generic handler returns the right format of json (I checked it with this URL ). My result (json) is also the same as the one in example on above mentioned page. But after this jquery doesn`t fire anymore.
My script :
$(document).ready(function () {
$("#e8").select2({
placeholder: "Search for a recipe",
//minimumInputLength: 1,
ajax: {
url: "/Handlers/GetData.ashx",
dataType: 'jsonp',
data: function (term, page) {
return {
languageId: 1,
orderBy: "TA"
};
},
results: function (data, page) {
alert(data.total);
var more = (page * 10) < data.total; // whether or not there are more results available
// notice we return the value of more so Select2 knows if more results can be loaded
return { results: data.recipes, more: more };
}
},
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
});
I tried to write the same alert(data.total) in the original example and it worked but not in my version. So I have the right json format, the jquery calls my generic handler and also recieved parameters languageId ... and also return the right json format but than nothing. I don't know if I am missing something here, because I am sure that this thing could also work with a generic handler as well. I hope I gave enough information about my problem.
I can also add my result in jquery .ajax error handler :
xhr.status = 200
ajaxOptions = parsererror
horwnError = SyntaxError : invalid label
If this is any helpful information

This question is quite old, so pretty sure you have a solution by now...but:
Remove all of these functions:
formatResult: movieFormatResult
formatSelection: movieFormatSelection
dropdownCssClass: ...
escapeMarkup:....
You did not provide those functions to format your data did you? All of those are only needed if you are making a custom drop down of items.
You are returning data.recipes - that needs to be an array of {Text:"", Id:""} or you need to build it from what you return right there.
First, get it working with just a very basic list with very basic data...then go from there.
Additionally, when you get that working try using WebApi or ServiceStack to handle your data instead of an IHttpHandler.