Use AJAX POST to return razor pages partial

Question

I have searched for this, tried the accepted solutions from the questions stackoverflow has suggested might work and I am here as a last resort, after trying everything I can think of or find. I would like a button on my razor page to send a post request, via an ajax function I am obliged to use, and return a razor page with no layout.

HTML

<button id="myawesomebutton">Go get a partial</button>

javascript

 var myawesomeajaxobject=new ajax('/myawesomeurl');
 myawesomeajaxobject.done=function(dat)
 {
  document.getElementById('myawesomediv'),innerHTML=dat
 }
 myawesomeajaxobject.go('myawesomeparameter01=1&myawesomeparameter02=2');

The AJAX object I am obliged to use adds the following headers:

   Content-type, application/x-www-form-urlencoded
   Access-Control-Allow-Origin, *

As well as adding a '?' followed by a unix time code to the url endpoint.

It is my understanding the request mus first be sent to the cshtml.cs class behind the razor page which will then redirect to my partial.

No matter what I name my C# method, onPost, myawesomeurl, many other names, I get a 404 error instead of rendering the partial inside myawesomediv.

I have attempted to add an anti forgery token, set CORS values on the server to 'accept all' and tried sending the request directly to the partial's onPost but I'm getting nowhere.

UPDATE.

I have added:

services.AddRazorPages().AddRazorPagesOptions(options =>
{
    options.Conventions.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute());
});

to my Startup.

My javascript reads:

var myawesomeajaxobject=new ajax('/myawesomeurl');
myawesomeajaxobject.done=function(dat)
{
 document.getElementById('myawesomediv'),innerHTML=dat
}
myawesomeajaxobject.go('handler=myawesomeurl&myawesomeparameter01=1&myawesomeparameter02=2');

This is the handler method in the cshtml.cs file:

public void OnPostmyawesomeurl()
{
  //myawesomecoded added, so I have a break point to hit.       
}

and I'm still getting a 404. Is this actually possible in razor pages?

`404` means the route is not found,you need to check your route rather than check your headers. — Yiyi You, Nov 10 '21 at 01:47
Did you try using var myawesomeajaxobject=new ajax("/?handler=myawesomeurl"); — Zafor, Nov 10 '21 at 04:38
Thank you, @YiyiYou, you are correct, The question should be, what is the correct method to create a discoverable end point. — sanepete, Nov 10 '21 at 10:03
Yes, @Zafor. I have tried it in various combinations with different end points. I'm not suggesting I don't need it necessarily, but how do I compose the end point? — sanepete, Nov 10 '21 at 10:06

score 0 · Answer 1 · answered Nov 10 '21 at 09:47

It looks like you are making a POST request to a named handler method. The handler still needs On[Http Method] incorporated into its name so that it can be found. If it is a POST request, the name of the handler method should be OnPostMyAwesomeUrl.

You also need to handle the fact that Request verification is built in to Razor Pages, so you either need to include the token in your AJAX request (https://www.learnrazorpages.com/security/request-verification#ajax-post-requests-and-json), or disable it for that page entirely (https://www.learnrazorpages.com/security/request-verification#opting-out):

[IgnoreAntiforgeryToken(Order = 1001)]
public class IndexModel : PageModel
{
    ...
}

score 0 · Accepted Answer · answered Nov 15 '21 at 22:03

Thank you everyone for your input. This is how I achieved the desired results.

HTML

<button id="myawesomebutton">Go get a partial</button>

javascript

var myawesomeajaxobject=new ajax('/myawesomeurl');
myawesomeajaxobject.done=function(dat)
{
 document.getElementById('myawesomediv'),innerHTML=dat
}
myawesomeajaxobject.go('/shared/myawesomepartial/?handler=myawesomehandler&myawesomeparameter01=1&myawesomeparameter02=2');

Startup

services.AddRazorPages().AddRazorPagesOptions(options =>
{
 options.Conventions.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute());
});

myawesomepartial.cshtml.cs

public void OnPostmyawesomehandler(MyAwesomeModel myawesomemodel)
{
  //Do something with myawesomemodel and return myawesomepartial.cshtml
}

It was just a question of making the URL and endpoint method names match up.

Use AJAX POST to return razor pages partial

2 Answers2