Bad request fetching json from razor post with fullcalendar

Question

I have implemented full calendar. It does show as it supposed to, but fetching data goes wrong

.cshtml

    <div id='calendar'></div>

.cshtml.cs

    public class IndexModel : PageModel
    {
        public JsonResult OnPost(DateTime start, DateTime end)
        {
            return new JsonResult(new
            {
                url = "something",
                title = "something else",
                start = ConvertToUnixTimestamp(DateTime.Now).ToString(),
                end = ConvertToUnixTimestamp(DateTime.Now.AddDays(2)).ToString(),
                allDay = false,
                backgroundColor = "red",
                textColor = "green"
            });
        }
    }

.js

            document.addEventListener('DOMContentLoaded', function () {
                var calendarEl = document.getElementById('calendar');

                var calendar = new FullCalendar.Calendar(calendarEl, {
                    events: {
                        url: '/Overview/Employee/Index',
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("XSRF-TOKEN",
                                $('input:hidden[name="__RequestVerificationToken"]').val());
                        },
                        method: 'POST'
                    },
                    plugins: ['dayGrid']
                });

                calendar.render();
            });

When i load the page, i see a request happening, but it returns a 400, bad request. Any idea why?

The request:

Out of curiosity, does it work if you take out the `DateTime start` and `DateTime end` parameters on `OnPost`? — Arcanox, Apr 16 '19 at 17:54
@Arcanox It still doesn't hit any code when i remove the parameters — MartW, Apr 17 '19 at 08:18
You're calling the URL `/Overview/Employee/Index` but the name of the function you want is `OnPost` ... clearly those two things don't match (unless you have defined a custom route somewhere?). I would guess `/Overview/Employee/Index/OnPost` might be right — ADyson, Apr 17 '19 at 14:55
@ADyson the OP is using Razor Pages, so `OnPost` will handle a POST request to the page's default route, which appears to be `Overview/Employee/Index`, assuming that is the route defined by the `@page` attribute in the `cshtml` file — Arcanox, Apr 18 '19 at 17:49

Ryan · Answer 1 · 2019-04-17T07:32:40.537

I tried your code without 400 error( use @Html.AntiForgeryToken() in the form), but the event is not added to the calendar successfully. It works when I return a List Model, try to use below code to add events:

public class EventModel
{
    public int id { get; set; }
    public string start { get; set; }
    public string end { get; set; }
    public string title { get; set; }
    public bool allDay { get; set; }
    public string url { get; set; }
    public string color { get; set; }
    public string textColor { get; set; }
}

public class IndexModel : PageModel
{
    public JsonResult OnPost(DateTime start, DateTime end)
    {
        IEnumerable<EventModel> events = new List<EventModel>()
        {
            new EventModel()
            {
                url = "something",
                title = "something else",
                start = (DateTime.Now).ToString(),
                end = (DateTime.Now.AddDays(2)).ToString(),
                allDay = false,
                color = "red",
                textColor = "green"
            }

        };
        return new JsonResult(events);
    }
}

Results:

After adding the anti-forgery token it still returns a bad request without hitting any code. — MartW, Apr 17 '19 at 08:16
@Martijn Woudstra Do you mean if you add breakpoints in you OnPost handler,the code was not hit at all?Do you have any detailed error messages? — Ryan, Apr 17 '19 at 08:32

Bad request fetching json from razor post with fullcalendar

1 Answers1