Blazor SSR页面Model绑定异常：Person属性始终为null

核心问题 #

1. 原生form的post提交触发页面回发：Blazor中使用<form method="post">会导致整页刷新，破坏组件生命周期，无法通过[SupplyParameterFromForm]正确绑定数据。
2. 缺少双向绑定机制：原生input仅设置了单向value绑定，无法同步用户输入到Model，表单提交时也无法正确传递参数。

修复方案 #

方案一：使用Blazor官方EditForm组件（推荐） #

EditForm是Blazor专门为表单场景设计的组件，内置双向绑定、验证逻辑，完全适配组件生命周期：

@page "/"
<PageTitle>Home</PageTitle>

<EditForm Model="@Model" OnValidSubmit="@Save">
    <DataAnnotationsValidator />
    <ValidationSummary />

    Salutation <InputText @bind-Value="Model.Salutation" /><br/>
    Personal name <InputText @bind-Value="Model.PersonalName" /><br />
    Family name <InputText @bind-Value="Model.FamilyName" /><br />
    <button type="submit">Save</button>
</EditForm>

@code {
    public class Person
    {
        public string? Salutation { get; set; }
        public string? PersonalName { get; set; }
        public string? FamilyName { get; set; }
    }

    private Person Model { get; set; } = new();

    private void Save()
    {
        if (Model?.Salutation is null)
            throw new NullReferenceException("This should not happen");
        // 此处编写保存逻辑
    }
}

方案二：修复原生表单使用（仅用于原理理解，不推荐） #

若坚持使用原生form，需避免页面回发并手动实现输入同步：

@page "/"
<PageTitle>Home</PageTitle>

<form @formname="MyForm" @onsubmit="HandleSubmit">
    <AntiforgeryToken />
    Salutation <input name="Salutation" value="@Model.Salutation" @oninput="(e) => Model.Salutation = e.Value?.ToString()" /><br/>
    Personal name <input name="PersonalName" value="@Model.PersonalName" @oninput="(e) => Model.PersonalName = e.Value?.ToString()" /><br />
    Family name <input name="FamilyName" value="@Model.FamilyName" @oninput="(e) => Model.FamilyName = e.Value?.ToString()" /><br />
    <button type="submit">Save</button>
</form>

@code {
    public class Person
    {
        public string? Salutation { get; set; }
        public string? PersonalName { get; set; }
        public string? FamilyName { get; set; }
    }

    [SupplyParameterFromForm(FormName = "MyForm")]
    public required Person Model { get; set; }

    protected override void OnInitialized()
    {
        Model ??= new();
    }

    private void HandleSubmit()
    {
        // 阻止默认表单提交，避免页面回发
        Microsoft.AspNetCore.Components.Web.EventCallback.Factory.CreateVoid(this, () => {}).InvokeAsync(null);
        
        if (Model?.Salutation is null)
            throw new NullReferenceException("This should not happen");
    }
}

关键说明 #

• EditForm是Blazor官方推荐方案，自动处理双向绑定、验证和提交逻辑，无需手动操作DOM事件。
• 原生form的method=post会触发整页刷新，导致组件重新初始化，输入数据丢失，必须移除该属性并阻止默认提交行为。
• @bind-Value是Blazor双向绑定语法，自动同步用户输入与Model属性值，替代原生input的单向value绑定。

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