400 从 Htmx 发布到 .Net Razor 页面的错误请求

Question

我已经退出 FE 游戏有一段时间了，大约 4-5 年前，我专门从事 .Net 后端 API 开发，所以请原谅我，如果这是一个简单的项目，但它是一个使用 Razor Pages 和 Htmx 的项目，两者都使用我只是在尝试其中。

我一直在关注 Jetbrains 的这个教程，作为对 Htmx 的简单介绍

https://www.jetbrains.com/guide/dotnet/tutorials/htmx-aspnetcore/htmx-counter/

与教程不同，我使用 .Net 8 作为后端部分。

我面临的问题是针对我自己的，当按照他们演示的代码进行操作时，我的计数器页面返回 400 错误请求。

我有一个 Counter razor 页面，它有一个简单的按钮，可以触发当前页面的空 hx-post ，并且应该用服务器中的新值替换目标 div 的内容。非常简单。尽管严格遵循他们的示例，但当我按下按钮时，我收到了 400 错误请求。

我的Razor页面代码如下：

<!-- Counter.cshtml -->

@page
@model Counter
@{
    ViewData["Title"] = "Counter";
}

<div class="card p-5 mb-4">
    <div class="d-flex justify-content-between">
        <div>
            <!-- change the button -->
            <button class="btn btn-primary"
                    hx-post=""
                    hx-target="#example_one_count"
                    hx-vals="">
                <i class="fa fa-plus-circle"></i>
                Increment
            </button>
        </div>
        <div>
            <h2 id="example_one_count" class="fs-2" style="text-align: right">
                <span>0</span>
            </h2>
        </div>
    </div>
</div>

在后端我的处理程序如下：

<!-- Counter.cshtml.cs -->

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace HtmxWebApp.Pages;

public class Counter : PageModel
{
    private static int count = 0;
    
    public void OnGet()
    {
        // reset on refresh
        count = 0;
    }

    public async Task<IActionResult> OnPostAsync()
    {
        // TODO: Increment the count on each request
        return Content($"<span>{++count}</span>", "text/html");
    }
}

我知道 Htmx 已被包含并正常工作，因为它被注入到 _layout 模板中，并且我可以看到我运行的前面的示例用 get 请求替换内容工作得非常好，但我只是不确定这会带来什么。

是否可能更改 .Net 8 中 Razor 页面处理帖子的方式？就像我说的，我是一名 API 开发人员，所以我只使用 .Net Core Web API，所以我不再熟悉 Razor Pages 的来龙去脉，因为我永远不需要使用它们

任何有关此问题的帮助将不胜感激。我确信这很简单，但我已经尝试了一切。

Answer 1

对于 2024 年或以后可能偶然发现相同教程的任何其他人，他们没有告诉您的是，如果您想在自己的项目中执行这些示例，您需要忽略 Razor Pages 中使用的防伪令牌，即应该根据帖子请求发送。

因为他们使用按钮，所以会将数据作为帖子的一部分以表单形式发送，因此后端正在处理并期望存在防伪令牌。

查看完整的最终项目代码后，他们的 Program.cs 中有此代码

// Add services to the container.
//builder.Services.AddRazorPages();
builder.Services.AddRazorPages(o => {
    // this is to make demos easier
    // don't do this in production
    o.Conventions.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute());
});

正如类名所示，这会忽略防伪令牌，这意味着 post 请求将按原样处理。

不要在任何生产代码中使用它，并且请注意，如果您在生产中使用 htmx-post，您将需要找到一种方法，将防伪令牌包含在您传回服务器的内容中。