Use AJAX POST to return razor pages partial-CodePudding

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?

CodePudding user response：

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
{
    ...
}

CodePudding user response：

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.