使用 AJAX POST 部分返回剃须刀页面

Posted 2023-03-27

【中文标题】使用 AJAX POST 部分返回剃须刀页面

【英文标题】：Use AJAX POST to return razor pages partial

【发布时间】：2021-12-22 15:32:50

【问题描述】：

我已经搜索了这个，尝试了从 *** 建议的问题中接受的解决方案可能会起作用，在尝试了我能想到或找到的一切之后，我作为最后的手段来到这里。 我希望我的 razor 页面上有一个按钮，通过我必须使用的 ajax 函数发送发布请求，并返回一个没有布局的 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');

我必须使用的 AJAX 对象添加了以下标头：

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

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

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

无论我如何命名我的 C# 方法、onPost、myawesomeurl 以及许多其他名称，我都会收到 404 错误，而不是在 myawesomediv 中呈现部分内容。

我尝试添加一个防伪令牌，将服务器上的 CORS 值设置为“全部接受”，并尝试将请求直接发送到部分的 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。 这真的可以在剃刀页面中实现吗？

【问题讨论】：

404 表示没有找到路由，你需要检查你的路由而不是检查你的标题。

您是否尝试过使用 var myawesomeajaxobject=new ajax("/?handler=myawesomeurl");

谢谢@YiyiYou，你是对的，问题应该是，创建可发现端点的正确方法是什么。

是的，@Zafor。我已经尝试过具有不同端点的各种组合。我并不是说我不一定需要它，但是我如何构成终点？

【参考方案1】：

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

您还需要处理 Razor 页面中内置的请求验证这一事实，因此您需要在 AJAX 请求中包含令牌 (https://www.learnrazorpages.com/security/request-verification#ajax-post-requests-and-json)，或者完全禁用该页面的令牌 (https://www.learnrazorpages.com/security/request-verification#opting-out) ：

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

    ...

【参考方案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 和端点方法名称匹配的问题。