.NET 8 Blazor EditForm值绑定失败怎么解决？

核心问题 #

表单点击提交后页面重新初始化、模型值丢失为null，本质原因是当前组件使用了静态渲染模式（.NET 8 Blazor Web App默认路由组件为静态渲染）。静态渲染下，EditForm会触发传统HTTP表单提交，导致页面全量刷新，identity实例被重新创建，之前输入的所有值自然丢失。

具体修复步骤 #

1. 启用交互式渲染模式 #

在页面顶部添加渲染模式指令，让组件以交互式方式运行，阻止默认表单提交并保留组件状态：

@page "/logon"
@inject NavigationManager NavManager
@layout BlankLayout
@rendermode InteractiveServer <!-- 也可使用InteractiveWebAssembly/InteractiveAuto -->

2. 确保Identity类属性可绑定 #

确认Identity类属性拥有public的get和set访问器，这是Blazor双向绑定的必要条件：

public class Identity
{
    public string Username { get; set; }
    public string Password { get; set; }
    public string Database { get; set; }
}

3. 修正大小写匹配问题 #

InputSelect选项值为"local"，但LoginMethod中switch判断的是"Local"，会导致匹配失败，需统一大小写：

switch (identity.Database)
{
    case "local": // 改为与option的value一致的小写
        // 你的逻辑代码
        break;
    default:
        break;
}

修改后的完整代码 #

@page "/logon"
@inject NavigationManager NavManager
@layout BlankLayout
@rendermode InteractiveServer

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .login-box {
        text-align: left;
        font-family: 'Segoe UI';
        background-color: #ffffff;
        padding: 20px;
        border: 1px solid #e0e0e0;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }

    .login-image {
        max-width: 465px;
        margin-bottom: 20px;
    }

    .form-group {
        margin-bottom: 20px;
        font-family: 'Segoe UI';
    }

    .form-control {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
    }
</style>

<EditForm Model="@identity" OnValidSubmit="@LoginMethod" FormName="loginForm">
    <DataAnnotationsValidator />
    <div class="container">
        <div class="login-box">
            <div class="form-group row">
                <div class="col-sm-12">
                    <label for="username">Username</label>
                </div>
                <div class="col-sm-12">
                    <InputText @bind-Value="identity.Username" id="username" class="form-control" />
                </div>
            </div>

            <div class="form-group row">
                <div class="col-sm-12">
                    <label for="password">Password</label>
                </div>
                <div class="col-sm-12">
                    <InputText @bind-Value="identity.Password" type="password" id="password" class="form-control" />
                </div>
            </div>

            <div class="form-group row">
                <div class="col-sm-12">
                    <label for="logonTo" class="col-sm-2 col-form-label">Database</label>
                </div>
                <div class="col-sm-10">
                    <InputSelect @bind-Value="identity.Database" id="logonTo" class="form-control">
                        <option value="local">Local</option>
                    </InputSelect>
                </div>
            </div>

            <div class="form-group row">
                <div class="col-sm-12">
                    <button type="submit" class="btn btn-primary">Login</button>
                </div>
            </div>
        </div>
    </div>
</EditForm>

@code {
    private Identity identity = new Identity();
    private bool loading;

    public void LoginMethod()
    {
        Console.WriteLine($"Username: {identity.Username}");
        Console.WriteLine($"Password: {identity.Password}");
        Console.WriteLine($"Database: {identity.Database}");

        switch (identity.Database)
        {
            case "local":
                if (string.IsNullOrEmpty(identity.Username))
                {
                    Console.WriteLine("User doesnt exist not logging in");
                }
                else
                {
                    NavManager.NavigateTo("/");
                }
                break;

            default:
                break;
        }
    }
}

public class Identity
{
    public string Username { get; set; }
    public string Password { get; set; }
    public string Database { get; set; }
}

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