使用 AJAX 进行 GET 的 Razor Pages PageModel 绑定答案

【问题标题】：Razor Pages PageModel binding for GET with AJAX使用 AJAX 进行 GET 的 Razor Pages PageModel 绑定
【发布时间】：2021-08-20 20:12:29
【问题描述】：

我无法让绑定适用于一组特定的情况。我正在使用带有 ASP.NET Core 3.1 的 Razor Pages 来充当为 AJAX 调用提供服务的控制器。我已经在 Startup.cs 中添加了防伪令牌：

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

我的 AJAX 调用在调用中包含防伪功能，如下所示：

function getTankConfig(tankId) {
    var json = { id: tankId };
    $.ajax({
        cache: false,
        type: "GET",
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        url: "/Tank/Config",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify(json),
        success: getTankConfigSuccess
    });
}

function getTankConfigSuccess(data) {
    if (data !== null) {
        // do stuff with data
    }
}

我已经尝试了所有绑定技术的组合。正常使用参数，添加[FromBody]，添加公共属性并赋予[BindProperty]属性，使用[BindProperty(SupportsGet = true)]。使用控制器执行此操作似乎很简单，但我没有发现让它与 Razor Pages 和 PageModels 一起工作的魔力。

这是我的 PageModel 类的简化版本：

public class TankConfigModel : PageModel
{
    public JsonResult OnGet(int id)
    {
        TankConfigViewModel config = new TankConfigViewModel();
        config.Id = id;
        return new JsonResult(config);
    }
}

任何帮助或指导将不胜感激。谢谢。

【问题讨论】：

您可以使用 @Html.AntiForgeryToken() 将其添加到表单中并且我认为您希望使用 POST 而不是 GET ...您不需要绑定。（使用 ajax 调用时还要检查双重帖子...我想我必须删除布局中的 @renderbody 内容，并重新编写页眉/页脚。）
感谢您的回复。我没有使用表格。这是纯 JavaScript。我只在数据要更改时使用 POST 方法。如下所述，我计划改为仅使用查询字符串。
啊，好吧...不要认为 GET 请求根本需要防伪令牌。在那种情况下没有必要。（这些令牌的目的是防止假冒......如果使用，攻击者必须在中间扮演人，这使得他们更难......）

标签： ajax asp.net-core data-binding razor-pages

【解决方案1】：

您必须将此添加到您的剃须刀页面

@page "{id}"

并修复 ajax

$.ajax({
        type: "GET",
        url: "/Tank/Config/"+tankId,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
       
        success: function (result) {
                           getTankConfigSuccess(result)
                    },
         error: function (jqXHR) {

                    }
    });

【讨论】：

感谢您的回答。我开始相信 GET 请求从来都不是用来处理请求正文中的任何数据的。所以，我可能只会使用查询字符串将 id 传递给处理程序。这种方法不需要任何绑定属性，并且不需要防伪令牌即可工作。