AJAX Post request with Razor Pages and Full Calendar

Question

Hey All,

Im am rather new to AJAX and especially Full Calendar JS.

I am wanting to post an event to my FullCalendar using ajax and have the event displayed but im running into a 400 bad request

My post request using a handler method is as follows, just very basic for now

 public IActionResult OnPostAddTimesheet()

        {

            _db.Timesheets.Add(Timesheeting);
            _db.SaveChanges();
            return RedirectToPage("Index");

        }

and my ajax is as follows

function submitDetailsForm() {

        var requestData = {
            Id: parseInt($('#id').val()),
            Title: $('#title').val(),
            StartDate: $('#timesheetDate').val(),
            Duration: $('#duration').val(),
            Category: $('#category').val(),
            AssignementId: $('#assignmentId').val(),
            UserId: $('#userId').val(),
            EndDate: $('#timesheetDateEnd').val()
        }

        $.ajax({
            type: "POST",
            url: routeUrl + "?handler=AddTimesheet",
            data: requestData,
            success: function (data) {
                console.log(data)
                calendar.refetchEvents();
                onCloseModal();
            }
        });

    }

I know my post request within the razor code is missing a few bits but im not sure what, any help would be appreciated

Answer 1

Hi @JROW ,

The Razor Pages are automatically protected from XSRF/CSRF. This is the reason why you get the 400 error. You should set the XSRF-TOKEN when you want to use the ajax to send request in razor page.

More details, you could refer to below codes:

1.If you are using the asp.net core6, please add below codes into the program.cs
builder.Services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");

2.If you are using the asp.net core 5, please add below codes into the startup.cs:

services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");  

3.Add below codes into the razor pages

    @Html.AntiForgeryToken()  

4.Modify the ajax codes:

         $.ajax({  
             type: "POST",  
             beforeSend: function (xhr) {  
        xhr.setRequestHeader("XSRF-TOKEN",  
            $('input:hidden[name="__RequestVerificationToken"]').val());  
    },  
             url: routeUrl + "?handler=AddTimesheet",  
             data: requestData,  
             success: function (data) {  
                 console.log(data)  
                 calendar.refetchEvents();  
                 onCloseModal();  
             }  
         });