.NET 8 Blazor表单绑定对象提交返回Null值问题

问题场景 #

使用.NET 8开发Blazor应用，提交表单后打印控制台发现模型所有字段均为默认Null值。已创建InputAddress类实例，表单字段与类属性完成双向绑定，序列化对象为JSON后仍无有效数据。

相关代码 #

EditForm组件代码 #

<EditForm Model="@addressToBeCorrected" FormName="addressForm" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group col-md-4">
        <label for="Number">Number</label>
        <InputText id="Number" class="form-control" @bind-Value="@addressToBeCorrected.Number" />
    </div>

    <div class="form-group col-md-4">
        <label for="Street">Street</label>
        <InputText id="Street" class="form-control" @bind-Value="@addressToBeCorrected.Street" />
    </div>

    <div class="form-group col-md-4">
        <label for="Unit">Unit</label>
        <InputText id="Unit" class="form-control" @bind-Value="@addressToBeCorrected.Unit" />
    </div>

    <div class="form-group col-md-4">
        <label for="City">City</label>
        <InputText id="City" class="form-control" @bind-Value="@addressToBeCorrected.City" />
    </div>

    <div class="form-group col-md-4">
        <label for="Postcode">Postcode</label>
        <InputText id="Postcode" class="form-control" @bind-Value="@addressToBeCorrected.Postcode" />
    </div>

    <div class="form-group col-md-4">
        <label for="Region">Region</label>
        <InputText id="Region" class="form-control" @bind-Value="@addressToBeCorrected.Region" />
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</EditForm>

组件逻辑代码 #

@code {
    private Models.InputAddress addressToBeCorrected = new Models.InputAddress();

    private async Task HandleValidSubmit()
    {
        Console.WriteLine(addressToBeCorrected.Number);

        // convert the InputAddress object to a JSON string
        string json = JsonSerializer.Serialize(addressToBeCorrected);

        Console.WriteLine(json);
        // send the JSON string to the server
    }
}

InputAddress类定义 #

public class InputAddress
{
    public string? Number { get; set; }
    public string? Street { get; set; }
    public string? Unit { get; set; }
    public string? City { get; set; }
    public string? Postcode { get; set; }
    public string? Region { get; set; }
}

问题原因 #

.NET 8 Blazor中，页面默认采用静态渲染模式，该模式下组件不具备交互能力，表单输入无法与模型完成双向绑定，导致提交时模型字段保持初始Null值。

解决方法 #

在页面组件的顶部添加@rendermode配置，启用交互式渲染模式，示例：

@rendermode InteractiveServer

根据项目需求，也可选择InteractiveWebAssembly或InteractiveAuto渲染模式。添加配置后，组件具备交互能力，表单输入将正确绑定到模型字段。

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