Razor Pages delete using AJAX

Question

I'm trying to figure out using AJAX with Razor Pages.

I've been searching the Web but each example I've found does something different, and most are incomplete or not for Razor Pages.

So far, I've been focusing on variations of something like this:

$.post('/?handler=Delete', 5, function (x) {
    alert(x);
});

And then my page model looks like this:

public void OnPostDelete(int id)
{

}

I've tried variations on this but, so far, my C# code is not getting called.

Questions:

Can someone show me what I'm missing?
Can anyone offer some good references for this? (I need to perform other AJAX tasks as well.)
Some examples I found had special handling related to anti-forgery tokens. Do I need to code for that as well?

UPDATE:

So I've been working with this and this is what I have now:

$.ajax({
    url: '?handler=Delete',
    data: {
        id: $(this).data('id')
    }
})
.fail(function (e) {
    // Error
    alert(e.responseText); // Way too much info
})
.done(function () {
    // Success
})
.always(function () {
    // Always
});

And my handler:

public void OnGetDelete(int id)
{

}

This is in fact calling my handler and I finally got it to pass the id argument.

Since I have a bounty, here's what I'd like to see in an answer:

If I set the AJAX call to use POST and rename my handler to OnPostDelete(), the handler is not called. How would I do a post?
Any other suggestions or criticisms with the code above? I know there are many ways to do this. I'm just looking for the simplest way and trying to refine it.

Why don't you write ajax like this $.ajax({ url: "Controller /Action", type: "POST", dataType: "json", data: JSON.stringify(data), success: function (response) { // Your Response Logic } }); — Md Farid Uddin Kiron
– Md Farid Uddin Kiron, Commented Mar 13, 2020 at 0:18
@MdFaridUddinKiron: Well, this is Razor Pages so there is no controller. Other than that, $.post() just calls $.ajax(), so I'm not seeing how that would address my issue. — Jonathan Wood
– Jonathan Wood, Commented Mar 13, 2020 at 0:20
I understand, I want to know backend, is it Web from or mvc? — Md Farid Uddin Kiron
– Md Farid Uddin Kiron, Commented Mar 13, 2020 at 0:26

Xueli Chen · Accepted Answer · 2020-03-13 02:58:22Z

2

You could pass F12 to check the request in Network tab , you may see 400 bad request error.

Razor Pages are designed to be automatically protected from cross-site request forgery (CSRF/XSRF) attacks. You don’t have to write any additional code. Antiforgery token generation and validation is automatically included in Razor Pages. Here the request fails, there is no AntiForgeryToken present on the page.

For the question , you could add explicitly using @Html.AntiForgeryToken() To add AntiForgeryToken, we can use any of the approaches. Both the approaches add an input type hidden with name __RequestVerificationToken. The Ajax request should send the anti-forgery token in request header to the server. So, the modified Ajax request looks like,

@Html.AntiForgeryToken()

@section Scripts
{
<script>

    $.ajax({
        type: "POST",
        url: "/?handler=Delete&id="+5,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        success: function (x) {
            alert(x);
        },
        failure: function (response) {
            alert(response);
        }
    });
</script>

}

Since the script sends the token in a header called X-CSRF-TOKEN, configure the antiforgery service to look for the X-CSRF-TOKEN header:

public void ConfigureServices(IServiceCollection services)
{
        services.AddRazorPages();
        services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
}

Reference:https://www.talkingdotnet.com/handle-ajax-requests-in-asp-net-core-razor-pages/

answered Mar 13, 2020 at 2:58

Xueli Chen

12.7k3 gold badges28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jonathan Wood Over a year ago

I tried adding services.AddAntiforgery(...) in startup and @Html.AntiForgeryToken() in the page, but I can't seem to do anything to have my handler called.

Xueli Chen Over a year ago

After adding the AntiForgeryToken ,put the breakpoint at the Delete handler and press f12 to check if there is error when the ajax is triggered.

Adam Vincent Over a year ago

did ya change the ajax type to 'POST'?

HazardousGlitch · Accepted Answer · 2020-03-13 13:04:56Z

1

This is how I like to do it:

Configure your Javascript

//If you're returning a object, configure it
var yourObject = {
    field1: "value1",
    field2: "value2"
};

//setup ajax
$.ajax({
    data: yourObject,
    type: "POST",
    url: "urltoyourhandler/delete" //you can add other paramters here as well by doing ?parm=value
    success: function(data){
      //do success stuff here
      //based off my handler code below:
      if(data.success){
          console.log("Success!");
      }
      else{
          console.log("Failed for some reason!");
      }
    }
    error: function(){
        //do error stuff here
       //gets called if there is a issue contacting the URL or if there is a server error like 500
    }
});

Configuring your handler. For my CRUD operations, I like making a CRUD controller to handle everything

[BindProperty]
public YourClass Name { get; set; }

//set handler to only accept POST and set a URL for it. URL should be to the same folder you're in
//the 'delete' in route doesn't have to match the function name but it's less confusing if it does
[HttpPost, Route("RouteToThisHandler/delete)]
public async Task<IActionResult> Delete()
{
    //verify data and the do something with it
    //I like returning a JsonResult. Add whatever data you want. I like returning success 
    //with true or false and some other data if needed
    return new JsonResult(new { success: true, importantInfo: "This is important" });
}

Ajax has more configuration options to give you more information about any server errors that occur

As for the anti-forgery token, Microsoft says:

Antiforgery middleware is added to the Dependency injection container when one of the following APIs is called in Startup.ConfigureServices:

AddMvc

MapRazorPages

MapControllerRoute

MapBlazorHub

Here is a Microsoft link about the anti-forgery token: https://learn.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-3.1

answered Mar 13, 2020 at 13:04

HazardousGlitch

1601 silver badge16 bronze badges

4 Comments

Jonathan Wood Over a year ago

Can I ask why you don't use the ?handler method? I would use your approach for a create or update operation. But it doesn't seem ideal for delete.

HazardousGlitch Over a year ago

Personal preference. There are many ways to do things and this is the way I prefer. It works great for everything I do including deletes. I don't just use this method for manipulating data but for getting data as well. For example, a autocomplete box.

Adam Vincent Over a year ago

MVC1002 'HttpPostAttribute' cannot be applied to Razor Page handler methods. Not only does this introduce a warning, it is fighting the Razor Pages conventions. If you do not like the conventions, stick to MVC.

HazardousGlitch Over a year ago

These are some in a controller as my post says.

Adam Vincent · Accepted Answer · 2020-03-23 06:09:29Z

I investigated a few things, what happens when you pass a string from AJAX instead of an integer and how the different routes affect the call (see interesting note below if you've got time) But mostly, all I found is that Razor Pages are pretty forgiving and everything seemed to just work. Like I mentioned, even passing a string where an integer type id still hit the handler method (it just gave me a default(int))

I created this repo just for exploring: https://github.com/EntityAdam/RazorPageHandlers

The major blocker, as @Yan pointed out is the Anti-Forgery token. That is really the only thing that caused a handler not to hit a breakpoint. As was suggested, check your network tab for failed requests or the console for bum JavaScript code.

From your snippet, to change it to a OnPostDelete you would need to use the POST type in the AJAX call AND include the Anti-Forgery Token.

$.ajax({
    type: 'POST',
    headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
    url: '?handler=Delete',
    data: {
        id: $(this).data('id')
    }
})
.fail(function (e) {
    // Error
    alert(e.responseText); // Way too much info
})
.done(function () {
    // Success
})
.always(function () {
    // Always
});

Another topic that I didn't see discussed is where is this token coming from? It's generated by Razor automagically whenever there is a <form> element. If you do not have a <form> element, you can generate tokens when you need them, check out the @functions {} block in this MSDN Article. There are also scenarios where CSRF is useless or not required and you could also turn anti-forgery off if you don't need it (That's an entirely different discussion).

My criticisms of the approach are opinions so take 'em or leave 'em.

Don't use jQuery if you can avoid it based on the premise that improvements to JavaScript have arguably obsoleted jQuery. Use plain vanilla JS code.
Ajax is showing it's age as well. If you only need to support modern browsers consider the Fetch API
Don't write any JS at all! Blazor is new and shiny. There are still some growing pains, but I'd rather my pain be in C# than in JavaScript =)

An interesting thing I came across..

For this demo, I used the following @page directive

@page "{id?}"

In the HTML part of the forms like:

<form method="post" asp-page-handler="Delete">
    <input type="hidden" name="id" value="1" />
    <button class="btn btn-danger">Delete</button>
</form>

I'm using the asp-page-handler tag helper to assist in generating the correct URL. For the Create handler, with that @page directive the tag helper comes up with a form target of /?handler=Create

If you swap out that @page directive with @page "{handler?}/{id:int?}", the tag helper figures out the route which is now /Delete. But guess what? The AJAX calls work with either @page directive, even though the URL in the AJAX is hard coded to ?handler=Delete'

Ashiquzzaman · Accepted Answer · 2020-04-10 04:37:37Z

0

Two suggestion:

1- add the page path in front of the url. (I am not sure if it is mentioned in your words).

$.post('/{page_path}/?handler=Delete', 5, function (x) {
    alert(x);
});

2- Follow the route map rule. For example, there is the 'id' in your function. The page may have configured like @page "{id:int}". So the url should be something like

$.post('/{page_path}/{id}/?handler=Delete', 5, function (x) {
    alert(x);
 });

edited Apr 10, 2020 at 4:37

Ashiquzzaman

5,3144 gold badges30 silver badges40 bronze badges

answered Mar 13, 2020 at 1:39

user8779562

Collectives™ on Stack Overflow

Razor Pages delete using AJAX

4 Answers 4

3 Comments

4 Comments

An interesting thing I came across..

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

An interesting thing I came across..

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related