Question

在我的.net核心剃须刀页面项目中，我想从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网址设置为“ 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

如果您不想重新加载页面，则必须使用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)
    {

    }
 }

PS 有关ajax

的更多信息

Answer 2

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

 public async void OnPostAddToCartAsync()
    {
        //code
    }

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

第二，如果要在Razor Pages中使用ajax，则URL模式应类似于“ / mainPage？handler = AddToCart”。要注意的一件事是，Razor Pages旨在防止（{{3} }）攻击。因此，防伪令牌的生成和验证会自动包含在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");
```
阅读这篇文章CSRF/XSRF，以了解有关使用ASP.NET Core剃须刀页面发出Ajax请求的更多信息。

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

2 个答案: