使用 AJAX POST 到 return 剃须刀页面部分

Question

我已经搜索过这个，尝试了 Whosebug 建议的问题中可接受的解决方案，在尝试了我能想到或找到的一切之后，我作为最后的手段来到这里。我想在我的 razor 页面上有一个按钮来发送 post 请求，通过我必须使用的 ajax 函数，以及 return 一个没有布局的 razor 页面。

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');

AJAXobject我不得不使用添加如下headers：

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

以及向 url 端点添加 '?' 后跟 unix 时间码。

据我所知，请求必须首先发送到剃须刀页面后面的 cshtml.cs class，然后该页面将重定向到我的部分。

无论我如何命名我的 C# 方法、onPost、myawesomeurl、许多其他名称，我都会收到 404 错误，而不是在 myawesomediv.

中渲染部分内容

我试图添加一个防伪令牌，将服务器上的 CORS 值设置为 'accept all' 并尝试将请求直接发送到部分的 onPost，但我一无所获。

更新。

我已添加：

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

我的初创公司。

我的 javascript 读取：

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

这是 cshtml.cs 文件中的处理程序方法：

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

而且我仍然收到 404。这在剃刀页面中真的可行吗？

Answer 1

您似乎正在向命名处理程序方法发出 POST 请求。处理程序仍需要将 On[Http Method] 合并到其名称中，以便可以找到它。如果是POST请求，处理方法的名字应该是OnPostMyAwesomeUrl.

您还需要处理请求验证内置于 Razor Pages 的事实，因此您需要在 AJAX 请求 (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
{
    ...
}

Answer 2

谢谢大家的意见。这就是我达到预期结果的方式。

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');

启动

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
}

这只是使 URL 和端点方法名称匹配的问题。

使用 AJAX POST 到 return 剃须刀页面部分

Use AJAX POST to return razor pages partial

javascript

ajax

asp.net-core

razor-pages

partial-views