Blazor Server Side中如何向外部URL提交表单数据并跳转？

方法一：直接嵌入原生HTML表单（最简单） #

Blazor允许直接使用原生HTML表单，你可以直接复用类似原生的写法，还能结合Blazor的数据绑定来动态设置参数：

<form action="https://externalUrl.com" method="post">
    <input type="number" name="amount" @bind="@OrderAmount" placeholder="输入金额" />
    <button type="submit">发起支付</button>
</form>

@code {
    // 绑定Blazor组件内的金额变量
    private decimal OrderAmount { get; set; }
}

这种方式完全依赖浏览器原生表单提交逻辑，Blazor只负责把组件数据同步到输入框，提交后直接跳转到支付网关，不需要额外JS操作，适合简单的支付场景。

方法二：先处理Blazor逻辑再动态提交表单 #

如果需要先在Blazor端做校验、获取订单号等前置操作，再跳转支付网关，可以通过JS互操作动态生成表单提交：

1. Blazor组件代码

<button @onclick="HandlePaymentSubmit" class="btn-pay">提交支付</button>

@code {
    [Inject]
    private IJSRuntime JSRuntime { get; set; }

    private decimal OrderAmount { get; set; } = 199.9m;
    private string OrderId { get; set; } = "ORD_20240501_001";

    private async Task HandlePaymentSubmit()
    {
        // 先执行Blazor端的业务逻辑：比如校验金额是否合法
        if (OrderAmount <= 0)
        {
            // 这里可以加错误提示，比如弹出警告
            return;
        }

        // 调用JS方法，传递支付网关地址和需要提交的参数
        await JSRuntime.InvokeVoidAsync("submitPaymentForm", "https://externalUrl.com", new Dictionary<string, object>
        {
            { "amount", OrderAmount },
            { "order_id", OrderId },
            { "currency", "CNY" } // 其他需要传递的参数
        });
    }
}

2. 添加JS代码

在wwwroot/index.html（Blazor WebAssembly）或者Pages/_Host.cshtml（Blazor Server）的<script>标签里添加以下代码：

window.submitPaymentForm = function(targetUrl, formParams) {
    // 创建隐藏表单
    const paymentForm = document.createElement('form');
    paymentForm.action = targetUrl;
    paymentForm.method = 'POST';
    paymentForm.style.display = 'none';

    // 把参数转换成隐藏输入框
    Object.keys(formParams).forEach(key => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = formParams[key];
        paymentForm.appendChild(input);
    });

    // 把表单加入页面并提交
    document.body.appendChild(paymentForm);
    paymentForm.submit();
    // 提交后移除表单
    document.body.removeChild(paymentForm);
};

这种方式能让你在跳转前完成Blazor端的所有必要逻辑，再通过JS动态构建表单提交，灵活性更高。

内容的提问来源于stack exchange，提问作者Matias Masso