.Net Core 2.2. Calling Identity Razor page ajax methods

Question

I'm doing a .Net Core 2.2 project and trying to customize (or rather add) a few Identity pages. My project is not razor pages. However, when I scaffolded out the Identity pages that I needed, they appear to be Razor pages.

Identity creates an Areas directory structure like so:

Areas/Pages/Account/Manage

I've added a Razor page which creates the following files inside the Manage folder:

ManageProfilePicture.cshtml

ManageProfilePicture.cshtml.cs

I'm using the default OnGet and OnPut methods to do other stuff (choose, upload and manipulate the image) and therefore want to call a separate ajax method to save the image. I've tried using a handler and verification token as other SO questions and articles suggest, but can't seem to get anything other than a 404 on calling the link in my ajax:

My method in the code behind is like so:

public async Task<IActionResult> OnPostSaveProfilePictureAsync(string t, string l, string h, string w, string fileName)
    {
                var userName = User.Identity.Name;
                  ...
    }

My javascript looks like so:

$('#saveProfilePicture').on('click', function () {
        var img = $('#preview-pane .preview-container img');
        $('#avatar-crop-box button').addClass('disabled');
        $.ajax({
            type: "POST",
            url: "/Identity/Account/Manage/ManageProfilePicture?handler=SaveProfilePicture",
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            data: {
    ...
    }

I know I'm getting to where it tries the url in that code as I've console.log(ged) other variables in there from the data section of my ajax call (length, width, etc values). Plus, I can see the url change each time in the 404 message.

My ajax cshtml button is:

<button id="saveProfilePicture" class="btn btn-default">SaveProfilePictureAsync</button> (inside and outside different form tags)

For the ajax url, I've tried:

/Identity/Account/Manage/ManageProfilePicture?handler=SaveProfilePicture
/ManageProfilePicture?handler=SaveProfilePicture

I've tried what seems like a million other variations of that url (examples):

Swapping pagehandler= in place of handler= as well as /SaveProfilePicture to replace the entire handler querystring parameter.

Swapping SaveProfilePicture with all variations of what my ActionResult is actually called (OnPastSaveProfilePictureAsync, SaveProfilePictureAsync, etc)

The following code (non-js post) gets me to my method:

<form asp-page-handler="saveProfilePicture" method="post">
    <input type="submit" id="btnSubmit" value="Save" />
</form>

and shows (in Firefox inspect element) /ManageProfilePicture?handler=SaveProfilePicture as the file section and /Identity/Account/Manage/ManageProfilePicture?handler=SaveProfilePicture in the referrer properties.

The exact error is always (with variations in the url when I change it):

XML Parsing Error: no root element found Location: https://localhost:44366/Identity/Account/Manage/ManageProfilePicture?handler=saveProfilePicture Line Number 1, Column 1:

At this point I feel like I'm simply missing something entirely fundamental and am out of ideas. Anyone know what I'm doing wrong?

UPDATE: Per the comments, different browsers show slightly different errors:

Chrome:

Failed to load resource: the server responded with a status of 400 ()

Opera:

POST https://localhost:44366/Identity/Account/Manage/ManageProfilePicture?handler=SaveProfilePicture 400

Edge:

HTTP400: BAD REQUEST - The request could not be processed by the server due to invalid syntax. (XHR)POST - https://localhost:44366/Identity/Account/Manage/ManageProfilePicture?handler=SaveProfilePicture

Starting to look like it was never a 404 and maybe not processing the verification token properly?

Answer 1

The solution was to change:

xhr.setRequestHeader("XSRF-TOKEN",

To:

xhr.setRequestHeader("RequestVerificationToken",

All is well now after insanity has started to set in. See you guys soon...