使用剃须刀页面调用服务器方法而无需重新加载页面

Question

在我的 .net core razor 页面项目中，我想从 cshtml 输入调用服务器端方法，而无需重新加载页面。我仍然是剃刀页面的新手。

.cshtml : 

input type="submit" id="AddCart" asp-page-handler="AddToCart" hidden

Some JS to .click() the input.

.cs :
public async void OnPostAddToCart()
{
//code
}

到目前为止，我还没有找到阻止页面重新加载并仍然访问我的服务器端方法的方法。

谢谢

编辑： 查看 brad 提供的链接，我设法使它工作。

我添加了@Page "{handler?}" 来编写没有处理程序的 url（不确定它是否对 ajax 重要）， 我将我的 ajax url 设置为“thePage/theMethod”， 我用 [ValidateAntiForgeryToken] 装饰了我的剃须刀控制器类 并提到了ajax中的防伪令牌：

$.ajax({
                url: "/mainPage/AddToCart",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                success: function () {
                    alert("success");
                },
                complete: function () {
                    alert("complete")
                },
                failure: function () {
                    alert("failure");
                }
            });

Answer 1

首先，更改 Handler 方法的命名，如下所示：

 public async void OnPostAddToCartAsync()
    {
        //code
    }

有关命名约定的更多详细信息，请参阅Handler Methods in Razor Pages。

其次，如果你想在 Razor Pages 中使用 ajax，URL 模式应该类似于“/mainPage?handler=AddToCart”。需要注意的一点是，Razor Pages 旨在防止 (CSRF/XSRF)攻击。因此，防伪令牌生成和验证自动包含在 Razor 页面中。我相信这就是这里的问题。如果您的 HTML 中有表单标签，则您的页面上可能存在防伪令牌。但是您需要在 Ajax 请求中传递相同的内容。

• 如果没有，则使用 @Html.AntiForgeryToken() 添加防伪令牌 存在。

• 修改您的 Ajax 请求以在请求标头中发送相同的内容，例如 下面：

  <input type="button" id="AddCart"  onclick="clickbtn()" value="Submit"/>
  function clickbtn() {
      $.ajax({
          url: "/Test?handler=AddToCart",
          type: 'POST',
          beforeSend: function (xhr) {
              xhr.setRequestHeader("X-XSRF-TOKEN",
                  $('input:hidden[name="__RequestVerificationToken"]').val());
          },
          success: function ()
          {
              alert("success");
          },
          complete: function ()
          {
              alert("complete")
          },
          failure: function ()
          {
              alert("failure");
          }
      });
  }
  

• 由于脚本在名为 X-XSRF-TOKEN 的标头中发送令牌， 配置防伪服务以查找 X-XSRF-TOKEN 标题：

  services.AddAntiforgery(option => option.HeaderName = "X-XSRF-TOKEN");
  

  阅读这篇文章Handle Ajax Requests in ASP.NET Core Razor Pages，了解更多关于使用 ASP.NET Core razor 页面发出 ajax 请求的信息。

Answer 2

如果您不想重新加载页面，则必须使用ajax或XMLHttpRequest，（前者基于后者）。

<script>
window.onload=function()
{
  window.click=function()
  {
        $.ajax({  
            url: '[baseUrl/OnPostAddToCart]',  
            data: JSON.stringify(postData), //your data 
            type: 'POST',  
            contentType: 'application/json',  
            dataType: 'json',  

            success: function (result) {  
                alert(result);  //do something if successful
            },  
            complete: function(){  
                 //do something on complete
            },  
            failure: function (err) {                  
                alert(err); // Display error message  
            }  
        });
   }
}
</script>
<input  onclick="click()" type="button"/>

使用XMLHttpRequest：

window.click=function()
{
var xhr = new XMLHttpRequest();
xhr.open("POST", "[Your URL]");
xhr.onload=function()
{
  if(xhr.status==200)
    resolve(xhr.response);
  else
    reject("error:"+xhr.status);
}
var data=JSON.stringify({some_data});
xhr.send(data);
}

控制器方法

 public class MyController:Controller
 {
    [HttPost]
    [Route("/OnPostAddToCart")]
    public async Task AddToCart(object data)
    {

    }
 }

P.S欲了解更多信息ajax