Blazor Server静态SSR页面Enhance表单功能异常求助

以下是针对你遇到的两个Enhance表单提交后状态互相清空问题的具体解决方案：

1. 用PersistedState持久化组件状态 #

静态SSR模式下，组件默认无状态，每次表单提交后会重新渲染整个组件导致状态丢失。通过PersistedState可以在组件实例间保存和恢复状态：

@inject PersistedState PersistedState

<!-- 表单1 -->
<EditForm Enhance OnValidSubmit="HandleForm1Submit">
    <InputText @bind-Value="Form1Value" />
    <button type="submit">提交表单1</button>
</EditForm>

<!-- 表单2 -->
<EditForm Enhance OnValidSubmit="HandleForm2Submit">
    <InputText @bind-Value="Form2Value" />
    <button type="submit">提交表单2</button>
</EditForm>

@code {
    private string Form1Value { get; set; } = string.Empty;
    private string Form2Value { get; set; } = string.Empty;

    protected override void OnInitialized()
    {
        // 从持久化存储恢复状态
        if (PersistedState.TryGet<string>("Form1Value", out var savedForm1Val))
            Form1Value = savedForm1Val;
        
        if (PersistedState.TryGet<string>("Form2Value", out var savedForm2Val))
            Form2Value = savedForm2Val;
    }

    private async Task HandleForm1Submit()
    {
        // 执行表单1的提交逻辑
        // 提交后保存状态
        PersistedState.Set("Form1Value", Form1Value);
        await PersistedState.PersistAsync();
    }

    private async Task HandleForm2Submit()
    {
        // 执行表单2的提交逻辑
        // 提交后保存状态
        PersistedState.Set("Form2Value", Form2Value);
        await PersistedState.PersistAsync();
    }
}

2. 使用Scoped状态容器管理共享状态 #

如果需要更灵活的状态管理，或者多个组件需要共享表单状态，可以创建一个Scoped状态容器：

第一步：定义状态容器类 #

public class FormState
{
    public string Form1Input { get; set; } = string.Empty;
    public string Form2Input { get; set; } = string.Empty;
}

第二步：注册为Scoped服务 #

在Program.cs中添加：

builder.Services.AddScoped<FormState>();

第三步：在组件中注入并使用 #

@inject FormState CurrentState

<EditForm Model="CurrentState" Enhance OnValidSubmit="HandleForm1Submit">
    <InputText @bind-Value="CurrentState.Form1Input" />
    <button type="submit">提交表单1</button>
</EditForm>

<EditForm Model="CurrentState" Enhance OnValidSubmit="HandleForm2Submit">
    <InputText @bind-Value="CurrentState.Form2Input" />
    <button type="submit">提交表单2</button>
</EditForm>

@code {
    private async Task HandleForm1Submit()
    {
        // 处理表单1提交逻辑
    }

    private async Task HandleForm2Submit()
    {
        // 处理表单2提交逻辑
    }
}

3. 检查Enhance属性和JS加载 #

• 确认每个<EditForm>都正确添加了Enhance属性，没有拼写错误或遗漏
• 确保blazor.web.js在App.razor中正确引入，建议放在<body>标签末尾，避免加载顺序问题：

<script src="_framework/blazor.web.js"></script>

4. 避免静态字段存储状态 #

不要用静态字段保存组件的表单值，静态字段是全局共享的，会导致状态混乱，所有状态都应该是组件实例的非静态属性。

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