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.

Uncaught (in promise) TypeError: data.map is not a function (React using axios getting data from ASP.NET API)

I've created an API using ASP.NET, and I've got a Website running React. I'm wanting to display the data retrieve with a get request from the API to React using Axios. The website has an authentication method using two cookies. I can get the Axios to get data from https://jsonplaceholder.typicode.com/users, but when i use the same bit of code, then I get the error: Uncaught (in promise) TypeError: data.map is not a function.
I've tried as mentioned above to use a placeholder, and that works fine, but can't seem to get thedata from my API, which leads me to believe that the problem lies in the cookies. I've also tried a few Google searches, which returned that I should include withCredentials: true, but that doesn't do the trick.
Here is the function from my API:
public JsonResult YearlyManagersJSON(int year = 0)
{
if (year < 2000 || year > DateTime.Today.Year)
year = DateTime.Today.Year;
var startDate = new DateTime(year, 1, 1);
var endDate = new DateTime(year + 1, 1, 1);
var bonds = this.getOverviewData(ReportType.BONDS, startDate, endDate);
var bondsSum = bonds.Sum(m => m.Aggregate);
var viewData = new TopLeadManagerViewData
{
Title = String.Format("Top Managers in {0}", startDate.Year),
Currency = SiteHelper.getCurrencyToUse(),
Bonds = Enumerable.Select(bonds, m => new ManagerSummary()
{
NumberOfIssues = (int)m.Aggregate2,
TotalAmount = m.Aggregate * 1000000,
Name = m.Group.ToString(),
Share = 100.0m * m.Aggregate / bondsSum
}),
};
return this.Json(viewData, JsonRequestBehavior.AllowGet);
}
This returns a JSON, which i have checked using Postman. Then i try to access the data using axios.
state = {
yearlyBonds: []
}
componentDidMount() {
axios.get(
'http://localhost/Stamdata.Web/LeagueTable/YearlyManagersJSON',
{ withCredentials: true }
)
.then(res => {
const yearlyBonds = res.data;
this.setState({ yearlyBonds });
})
}
render() {
return (
// Tags removed for simplicity
<ListTable data={this.state.yearlyBonds.Bonds} />
The data is then passed down into the component
function ListTable(props) {
const { classes, header, data } = props;
return(
// Tags removed for simplicity
<TableBody>
{data.map((x, i) => {
return(
<TableRow key={i}>
<TableCell scope="row">{x.Name}</TableCell>
<TableCell scope="row">{x.TotalAmount}</TableCell>
<TableCell scope="row">{x.Share}</TableCell>
<TableCell scope="row">{x.NumberOfIssues}</TableCell>
</TableRow>
)
})}
</TableBody>
So, this returns the error
"Uncaught (in promise) TypeError: data.map is not a function", which I would like to have display the data retrieved.

Your initial state is,
yearlyBonds: []
When component first renders it takes initial state. Initially you have empty array. So iteration over empty array giving you the error.
You can conditionally add your component like,
{ this.state.yearlyBonds.Bonds && <ListTable data={this.state.yearlyBonds.Bonds} />}

Note that, componentDidMount gets called after 1st render (when component mounts into DOM).
You have following workflow for the component -
During the 1st render, you have a state -
state = {
yearlyBonds: []
}
In the render function, you want to pass Bonds key data which doesn't exist in your initial state until API call is made and state has Bonds data.
Since this.state.yearlyBonds.Bonds is undefined during initial render, you can't call map method on undefined object. That is why you're seeing that error.
Now to fix this, there are quite a few methods:
Method #1 (Simplest):
Update your state like this -
state = {
yearlyBonds: {
bonds: []
}
}
Your render would work without any additional changes.
Method #2 (Moderate):
Update your function to accept de-structured props with default value for data
function ListTable({ classes, header, data=[] }) {
// rest of the code goes here
Method #3: (The right approach for API calls):
Add a isLoading flag in your component state. We will use this to show a fallback 'Loading ...' UI until we have data from the API.
state = {
yearlyBonds: [],
isLoading: false,
}
Before API call is made, update your state with 'isLoading' set to true.
componentDidMount() {
// update state
this.setState({ isLoading: true });
axios.get(
'http://localhost/Stamdata.Web/LeagueTable/YearlyManagersJSON',
{ withCredentials: true }
)
.then(res => {
const yearlyBonds = res.data;
// set isLoading to false, as data is received
this.setState({ yearlyBonds, isLoading: false });
})
}
Finally in the render method, read isLoading state and render a fallback.
// rest of the code
render() {
if (this.state.isLoading) {
return <div> Loading ... </div>;
// when data is available
return (
// Tags removed for simplicity
<ListTable data={this.state.yearlyBonds.Bonds} />

It happens because you are iterating over an empty array.

Problem on how to update the DOM but do a check on the data with the code-behind

This is with ASP.NET Web Forms .NET 2.0 -
I have a situation that I am not sure how to fulfill all the requirements. I need to update an img source on the page if selections are made from a drop down on the same page.
Basically, the drop downs are 'options' for the item. If a selection is made (i.e. color: red) then I would update the img for the product to something like (productID_red.jpeg) IF one exists.
The problem is I don't want to do post backs and refresh the page every time a selection is made - especially if I do a check to see if the image exists before I swap out the img src for that product and the file doesn't exist so I just refreshed the entire page for nothing.
QUESTION:
So I have easily thrown some javascript together that formulates a string of the image file name based on the options selected. My question is, what options do I have to do the following:
submit the constructed image name (i.e. productID_red_large.jpg) to some where that will verify the file exists either in C# or if it is even possible in the javascript. I also have to check for different possible file types (i.e. .png, .jpg...etc.).
not do a post back and refresh the entire page
Any suggestions?

submit the constructed image name
(i.e. productID_red_large.jpg) to some
where that will verify the file exists
either in C# or if it is even possible
in the javascript. I also have to
check for different possible file
types (i.e. .png, .jpg...etc.).
not do a post back and refresh the
entire page
If you wish to not post back to the page you will want to look at $.ajax() or $.post() (which is just short hand for $.ajax() with some default options)
To handle that request you could use a Generic Http Handler.
A simple outline could work like the following:
jQuery example for the post:
$("someButton").click(function () {
//Get the image name
var imageToCheck = $("#imgFileName").val();
//construct the data to send to the handler
var dataToSend = {
fileName: imageToCheck
};
$.post("/somePath/ValidateImage.ashx", dataToSend, function (data) {
if (data === "valid") {
//Do something
} else {
//Handle error
}
}, "html");
})
Then on your asp.net side you would create an http handler that will validate that request.
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
var fileName = context.Request["fileName"];
var fullPath = Path.Combine("SomeLocalPath", fileName);
//Do something to validate the file
if (File.Exists(fullPath))
{
context.Response.Write("valid");
}
else
{
context.Response.Write("invalid");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
Hope this helps, if I missed the mark at all on this let me know and I can revise.

We have an app of the same type, webforms .net 2, we do something similar with the following setup:
Using jQuery you can call a method in the page behind of the current page, for example, the following will trigger the AJAX call when the select box called selectBoxName changes, so your code work out the image name here and send it to the server.
$(document).ready(function () {
$('#selectBoxName').change(function (event) {
var image_name = 'calculated image name';
$.ajax({
type: "POST",
url: 'SomePage.aspx/CheckImageName',
data: "{'imageName': '" + image_name + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert(msg);
},
error: function (a, b, c) {
alert("The image could not be loaded.");
}
});
});
});
Where SomePage.aspx is the current page name, and image_name is filled with the name you have already worked out. You could replace the img src in the success and error messages, again using jQuery.
The code behind for that page would then have a method like the following, were you could just reutrn true/fase or the correct image path as a string if needed. You can even return more complex types/objects and it will automatically send back the proper JSON resposne.
[System.Web.Services.WebMethod(true)]
[System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
public static bool CheckImageName(string imageName)
{
/*
* Do some logic to check the file
if (file exists)
return true;
return false;
*/
}
As it is .net 2 app, you may need to install the AJAX Extensions:
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en

Could you not use a normal ajax call to the physical path of the image and check if it returns a 404?
Like this:
http://stackoverflow.com/questions/333634/http-head-request-in-javascript-ajax
<script type="text/javascript">
function UrlExists(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status != 404;
}
function ConstructImage() {
var e = document.getElementById("opt");
var url = '[yourpath]/' + e.value + '.jpg';
if (!UrlExists(url)) {
alert('doesnt exists');
//do stuff if doesnt exist
} else {
alert('exists');
//change img if it does
}
}
</script>
<select id="opt" onchange="ConstructImage()">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>

javascript OO question - specify private member function in c# object?

I'm not sure how to achieve the following in javascript, or even if I'm thinking about it correctly. Basically I want to attach a javascript member function to each custom object rendered, so I could have something like this in C#:
public class NumericTextBox : TextBox
{
...
string clientScript = "function isValid() { return isNumericValue(this.value); }";
AttachValidationFunction(clientScript);
}
public class EmailTextBox : TextBox
{
...
string clientScript = "function isValid() { return isEmail(this.value); }";
AttachValidationFunction(clientScript);
}
and then use the following javascript function in the page
function isFormValid() {
var controls = getElementsByClass("validatingControl");
...
if (!controls[i].isValid()) return false;
...
}
obvisouly in pseudo-code, but hopefully that gives the idea of what I need to achieve. Any suggestions?

what i would do, is to make sure that AttachValidationFunction receives this.ClientID along with the validation function, adds to a list (say, Dictionary<String, String>) and at render time, registers a javascript block with an array of all the added controls, where the result would look like this:
<script type="text/javascript">
var controlsToValidate = [
{ id: 'ctl00_txtNumeric', validate: function(e) { return isNumeric(e.value); } },
{ id: 'ctl00_txtEmail', validate: function(e) { return isEmail(e.value); } }
];
</script>
And then you could iterate over that array like so:
<script type="text/javascript">
function isFormValid() {
for(var i = 0; i < controlsToValidate.length; i++) {
var control = controlsToValidate[i];
var field = document.getElementById(control.id);
if(!control.validate(field))
return false;
}
return true;
}
</script>
I hope that's quite clear.

How can I maintain ModelState with RedirectToAction?

How can I return the result of a different action or move the user to a different action if there is an error in my ModelState without losing my ModelState information?
The scenario is; Delete action accepts a POST from a DELETE form rendered by my Index Action/View. If there is an error in the Delete I want to move the user back to the Index Action/View and show the errors that are stored by the Delete action in the ViewData.ModelState. How can this be done in ASP.NET MVC?
[AcceptVerbs(HttpVerbs.Post | HttpVerbs.Delete)]
public ActionResult Delete([ModelBinder(typeof(RdfUriBinder))] RdfUri graphUri)
{
if (!ModelState.IsValid)
return Index(); //this needs to be replaced with something that works :)
return RedirectToAction("Index");
}

Store your view data in TempData and retrieve it from there in your Index action, if it exists.
...
if (!ModelState.IsValid)
TempData["ViewData"] = ViewData;
RedirectToAction( "Index" );
}
public ActionResult Index()
{
if (TempData["ViewData"] != null)
{
ViewData = (ViewDataDictionary)TempData["ViewData"];
}
...
}
[EDIT] I checked the on-line source for MVC and it appears that the ViewData in the Controller is settable, so it is probably easiest just to transfer all of the ViewData, including the ModelState, to the Index action.

Use Action Filters (PRG pattern) (as easy as using attributes)
Mentioned here and here.

Please note that tvanfosson's solution will not always work, though in most cases it should be just fine.
The problem with that particular solution is that if you already have any ViewData or ModelState you end up overwriting it all with the previous request's state. For example, the new request might have some model state errors related to invalid parameters being passed to the action, but those would end up being hidden because they are overwritten.
Another situation where it might not work as expected is if you had an Action Filter that initialized some ViewData or ModelState errors. Again, they would be overwritten by that code.
We're looking at some solutions for ASP.NET MVC that would allow you to more easily merge the state from the two requests, so stay tuned for that.
Thanks,
Eilon

In case this is useful to anyone I used #bob 's recommended solution using PRG:
see item 13 -> link.
I had the additional issue of messages being passed in the VeiwBag to the View being written and checked / loaded manually from TempData in the controller actions when doing a RedirectToAction("Action"). In an attempt to simplify (and also make it maintainable) I slightly extended this approach to check and store/load other data as well. My action methods looked something like:
[AcceptVerbs(HttpVerbs.Post)]
[ExportModelStateToTempData]
public ActionResult ChangePassword(ProfileViewModel pVM) {
bool result = MyChangePasswordCode(pVM.ChangePasswordViewModel);
if (result) {
ViewBag.Message = "Password change success";
else {
ModelState.AddModelError("ChangePassword", "Some password error");
}
return RedirectToAction("Index");
}
And my Index Action:
[ImportModelStateFromTempData]
public ActionResult Index() {
ProfileViewModel pVM = new ProfileViewModel { //setup }
return View(pVM);
}
The code in the Action Filters:
// Following best practices as listed here for storing / restoring model data:
// http://weblogs.asp.net/rashid/archive/2009/04/01/asp-net-mvc-best-practices-part-1.aspx#prg
public abstract class ModelStateTempDataTransfer : ActionFilterAttribute {
protected static readonly string Key = typeof(ModelStateTempDataTransfer).FullName;
}
:
public class ExportModelStateToTempData : ModelStateTempDataTransfer {
public override void OnActionExecuted(ActionExecutedContext filterContext) {
//Only export when ModelState is not valid
if (!filterContext.Controller.ViewData.ModelState.IsValid) {
//Export if we are redirecting
if ((filterContext.Result is RedirectResult) || (filterContext.Result is RedirectToRouteResult)) {
filterContext.Controller.TempData[Key] = filterContext.Controller.ViewData.ModelState;
}
}
// Added to pull message from ViewBag
if (!string.IsNullOrEmpty(filterContext.Controller.ViewBag.Message)) {
filterContext.Controller.TempData["Message"] = filterContext.Controller.ViewBag.Message;
}
base.OnActionExecuted(filterContext);
}
}
:
public class ImportModelStateFromTempData : ModelStateTempDataTransfer {
public override void OnActionExecuted(ActionExecutedContext filterContext) {
ModelStateDictionary modelState = filterContext.Controller.TempData[Key] as ModelStateDictionary;
if (modelState != null) {
//Only Import if we are viewing
if (filterContext.Result is ViewResult) {
filterContext.Controller.ViewData.ModelState.Merge(modelState);
} else {
//Otherwise remove it.
filterContext.Controller.TempData.Remove(Key);
}
}
// Restore Viewbag message
if (!string.IsNullOrEmpty((string)filterContext.Controller.TempData["Message"])) {
filterContext.Controller.ViewBag.Message = filterContext.Controller.TempData["Message"];
}
base.OnActionExecuted(filterContext);
}
}
I realize my changes here are a pretty obvious extension of what was already being done with the ModelState by the code # the link provided by #bob - but I had to stumble on this thread before I even thought of handling it in this way.

Please don't skewer me for this answer. It is a legitimate suggestion.
Use AJAX
The code for managing ModelState is complicated and (probably?) indicative of other problems in your code.
You can pretty easily roll your own AJAX javascript code. Here is a script I use:
https://gist.github.com/jesslilly/5f646ef29367ad2b0228e1fa76d6bdcc#file-ajaxform
(function ($) {
$(function () {
// For forms marked with data-ajax="#container",
// on submit,
// post the form data via AJAX
// and if #container is specified, replace the #container with the response.
var postAjaxForm = function (event) {
event.preventDefault(); // Prevent the actual submit of the form.
var $this = $(this);
var containerId = $this.attr("data-ajax");
var $container = $(containerId);
var url = $this.attr('action');
console.log("Post ajax form to " + url + " and replace html in " + containerId);
$.ajax({
type: "POST",
url: url,
data: $this.serialize()
})
.done(function (result) {
if ($container) {
$container.html(result);
// re-apply this event since it would have been lost by the form getting recreated above.
var $newForm = $container.find("[data-ajax]");
$newForm.submit(postAjaxForm);
$newForm.trigger("data-ajax-done");
}
})
.fail(function (error) {
alert(error);
});
};
$("[data-ajax]").submit(postAjaxForm);
});
})(jQuery);

Maybe try
return View("Index");
instead of
return Index();