POST 向 Blazor razor 组件发送数据 (application/x-www-form-urlencoded)

POST Form Data to Blazor razor component (application/x-www-form-urlencoded)

刚开始学习Blazor,有什么奇怪的问题请耐心等待。

是否可以将 POST 数据作为内容类型“application/x-www-form-urlencoded”发送到 Blazor razor 组件,以便在浏览器中打开页面时显示调用者提供的初始值?在使用 querystring 和调用 razor 组件 url 时使用 HTTP GET 方法并在 navigationManager 的帮助下效果很好。在这种情况下,我无法更改数据的发送方式。我需要能够处理内容类型为 application/x-www-form-urlencoded 的 HTTP POST 调用,主体提供初始值作为键=值。加载页面时,数据应显示在屏幕上。然后应该在页面上为用户提供一些选项,并通过单击按钮进行选择。

如果这不可能,那么满足此特定要求的正确方法是什么,即不能更改数据的发送方式(必须是内容类型为 application/x-www-form-urlencoded 的 HTTP POST)和接收方式应用程序是 Blazor。

更新:Blazor 应用程序最好是服务器端,但如果需要可以更改为 Web 程序集(客户端)。

听起来您正在寻找一种 MVC 风格的解决方案,但它是在 Blazor 页面组件中实现的——我目前也是。使用 EditForm 的 Blazor post 请求或仅使用 vanilla HTML 提交操作是一个很容易找到指导的主题,但是配备 Blazor 页面组件以便它可以处理传入的表单正文数据,就好像它是MVC 控制器 [HttpPost] 装饰方法是一个挑战。然而,在某些情况下,例如在交易成功或失败时重定向到您的应用程序的外部卡支付门户,这正是您所需要的。许多支付门户仅配备服务和 post 返回给具有隐藏输入字段的消费者,并形成正文键值元组,就像 20 年前一样!我感觉到你的痛苦。我怀疑我们需要结合使用 MVC 和 Blazor 功能来实现这一目标。

在 Blazor Server 中,应用内导航是通过 websocket 完成的,没有发出 HTTP 请求,因此没有 GETPOST 操作。您只能处理外部 HTTP 请求,这应该正是问题所在。

Blazor Components,或者实际上是 Razor Components,尽管其中一些表现得像带有 @page 标签的页面,但是只是组件。它们不是独立存在的,而是必须托管在 Razor 页面,即默认情况下您的 _Host.cshtml。对 Blazor 应用程序的任何外部 HTTP 请求实际上都是对托管页面的请求,托管页面又会根据请求 URI 加载相应的 页面组件 。这些请求在组件中看不到,但可以在托管页面中处理,因为它只是一个普通的旧 Razor 页面。

为此:

  1. 创建一个 PostFormService 在主机页面和您的组件之间传递 post 表单:
using Microsoft.AspNetCore.Http;

public class PostFormService
{
    public IFormCollection? Form { get; set; }
}
  1. PostFormService注册到DI。在Startup.cs中的ConfigureServices方法中,添加:
services.AddScoped<PostFormService>();
  1. 将以下代码块添加到您的主机页面:
@using Microsoft.AspNetCore.Mvc.RazorPages;

<!-- ignore anti-forgery token for external post requests -->
@attribute [IgnoreAntiforgeryToken]

<!-- specify model for the page -->
@model HostPageModel

@{

public class HostPageModel : PageModel
{
    // postFormService is injected by the DI
    public HostPageModel(PostFormService postFormService)
    {
        PostFormService = postFormService;
    }

    private PostFormService PostFormService { get; }

    public void OnPost()
    {
        // store the post form in the PostFormService
        PostFormService.Form = Request.Form;
    }

}

}
  1. 现在您可以将 PostFormService 注入您的 Razor 组件并访问请求表单:
@inject PostFormService PostFormService;
@code{
    protected override void OnInitialized()
    {
        base.OnInitialized();

        // PostFormService.Form will be null if the page is not requested by 
        // a POST method
        var data = PostFormService.Form?["data"];
        Console.WriteLine(data);
    }
}