.NET 8登录页EditForm绑定值失效，无法用交互渲染模式

问题原因 #

你的登录页使用了静态渲染模式（RenderMode=null），这种模式下组件仅在服务器端一次性生成HTML，无实时交互能力——Blazor的双向绑定依赖交互式渲染的SignalR连接或客户端运行时，静态渲染无法同步用户输入到服务器端模型，因此提交时Input始终为空。

解决方案1：使用InteractiveAuto渲染模式（推荐） #

该模式既能在初始渲染时获取HttpContext，又能提供交互式渲染的双向绑定能力。

修改App.razor中的渲染模式判断逻辑：

private IComponentRenderMode? RenderModeForPage => 
    HttpContext.Request.Path.StartsWithSegments("/Account") 
        ? RenderMode.InteractiveAuto 
        : RenderMode.InteractiveServer;

可行性说明：

• 初始请求时，登录页以静态渲染方式生成，可正常获取HttpContext并执行OnInitializedAsync中的SignOutAsync操作；
• 页面加载完成后自动切换为交互式渲染（Blazor Server环境下为SignalR连接），此时MudTextField的双向绑定正常工作，输入内容实时同步到服务器端Input模型；
• 登录逻辑（LogInUser）可正常调用SignInManager完成认证。

解决方案2：启用增强型静态渲染（无需切换交互式模式） #

若必须保持静态渲染，可利用.NET8的增强型静态渲染，让静态表单支持数据绑定与提交。

修改登录页的EditForm，添加Enhanced="true"属性：

<EditForm Model="Input" OnValidSubmit="LogInUser" FormName="SignInUserForm" Enhanced="true">

可行性说明：

• 增强型静态渲染允许静态组件通过传统表单提交，将用户输入绑定到服务器端模型；
• 提交时浏览器发送POST请求，服务器端重新渲染组件并填充Input模型，LogInUser方法可获取正确输入值；
• 无需切换到交互式渲染，仍能在初始渲染时访问HttpContext。

解决方案3：改用传统HTML表单提交（完全静态） #

若上述两种方式均不适用，可放弃Blazor的EditForm，改用原生HTML表单提交到服务器端点。

1. 修改登录页的表单部分：

<MudContainer MaxWidth="MaxWidth.Small">
    <MudCard>
        <form method="post" action="/Account/Login">
            <MudCardContent>
                <MudTextField Name="Email" 
                              Label="Courriel" 
                              Required 
                              ErrorMessage="Le courriel ne doit pas être vide." />
                <MudTextField Name="Password" 
                              Label="Mot de passe" 
                              InputType="InputType.Password" 
                              Required 
                              ErrorMessage="Le mot de passe ne doit pas être vide." />
            </MudCardContent>
            <MudCardActions>
                @if (InProgress)
                {
                    <MudProgressCircular Color="Color.Primary" Indeterminate="true" Class="ml-auto" />
                }
                else
                {
                    <MudButton Variant="Variant.Filled" Color="Color.Primary" Class="ml-auto" Type="submit">Se connecter</MudButton>
                }
            </MudCardActions>
        </form>
    </MudCard>
</MudContainer>

2. 在Program.cs中添加登录POST请求处理端点：

app.MapPost("/Account/Login", async (
    SignInManager<ApplicationUser> signInManager,
    ILogger<Program> logger,
    [FromForm] InputModel input,
    HttpContext context) =>
{
    if (!ModelState.IsValid)
    {
        return Results.Redirect($"/Account/Login?error=invalid_input");
    }

    var result = await signInManager.PasswordSignInAsync(input.Email, input.Password, true, lockoutOnFailure: true);
    if (result.Succeeded)
    {
        logger.LogInformation("L'utilisateur est connecté.");
        return Results.Redirect("/Home");
    }
    else if (result.IsLockedOut)
    {
        logger.LogWarning("Le compte a été bloqué.");
        return Results.Redirect($"/Account/Login?error=locked_out");
    }
    else
    {
        return Results.Redirect($"/Account/Login?error=invalid_login");
    }
});

public sealed class InputModel
{
    [Required(ErrorMessage = "Le courriel ne doit pas être vide.")]
    [EmailAddress(ErrorMessage = "Ceci n'est pas une adresse courriel valide.")]
    public string Email { get; set; } = "";

    [Required(ErrorMessage = "Le mot de passe ne doit pas être vide.")]
    [DataType(DataType.Password)]
    public string Password { get; set; } = "";
}

3. 修改登录页的错误信息获取逻辑：

protected override async Task OnInitializedAsync()
{
    if (HttpMethods.IsGet(HttpContext.Request.Method))
    {
        await HttpContext.SignOutAsync(IdentityConstants.ExternalScheme);
        errorMessage = HttpContext.Request.Query["error"] switch
        {
            "locked_out" => "Le compte a été bloqué.",
            "invalid_login" => "Erreur: tentative de connexion invalide.",
            "invalid_input" => "Veuillez remplir tous les champs obligatoires.",
            _ => null
        };
    }
}

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