Blazor Webassembly中如何获取非EditForm的动态HTML表单POST提交值

你可以通过JS互操作（IJSRuntime）实现需求，具体实现代码如下：

第一步：添加前端JS监听方法 #

在你的项目wwwroot目录下新增JS文件（或者直接加到index.html/_Host.cshtml的script标签里）：

window.getFormData = (formId, dotNetRef) => {
  const form = document.getElementById(formId);
  form.addEventListener('submit', (e) => {
    // 阻止原生表单默认跳转提交行为
    e.preventDefault();
    // 序列化表单全部参数
    const formData = new FormData(form);
    const submitParams = Object.fromEntries(formData.entries());
    // 将参数回传给Blazor侧
    dotNetRef.invokeMethodAsync('OnFormSubmit', submitParams);
  });
}

第二步：Blazor组件侧代码调整 #

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<!-- 渲染动态表单 -->
@renderFragment

private RenderFragment? renderFragment;
private DotNetObjectReference<你的组件类名>? _dotNetRef;
// 存储全量提交参数
private Dictionary<string, object>? _allSubmitParams;
// 存储Name字段值
private string? _nameValue;

protected override async Task OnInitializedAsync()
{
    _dotNetRef = DotNetObjectReference.Create(this);
    // 原有拉取表单、生成RenderFragment的逻辑保持不变
    var content = await agencyFormService.GetAgencyForm();
    renderFragment = builder =>
    {
        builder.OpenElement(1, "p");
        builder.AddContent(2, new MarkupString(content));
        builder.CloseElement();
    };
    await base.OnInitializedAsync();
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 表单渲染完成后注册提交监听事件
        await JSRuntime.InvokeVoidAsync("getFormData", "AgencyForm", _dotNetRef);
    }
    await base.OnAfterRenderAsync(firstRender);
}

/// <summary>
/// 供JS侧调用的提交回调方法
/// </summary>
[JSInvokable]
public void OnFormSubmit(Dictionary<string, object> submitParams)
{
    // 问题二：获取全部提交参数集合，直接拿submitParams即可，支持动态增减的表单字段
    _allSubmitParams = submitParams;
    
    // 问题一：获取Name字段取值，直接从参数字典中读取
    if (submitParams.TryGetValue("Name", out var nameVal))
    {
        _nameValue = nameVal?.ToString();
    }
    
    // 后续业务逻辑写在此处，比如调用后端接口提交数据等
}

// 释放引用避免内存泄漏
public async ValueTask DisposeAsync()
{
    if (_dotNetRef != null)
    {
        await _dotNetRef.DisposeAsync();
    }
}

说明 #

该方案兼容所有带name属性的原生表单控件（input/select/checkbox/radio等），不需要关心表单字段的动态变化，会自动全量序列化所有提交参数。

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