Blazor SSR中NavMenu.razor带Enhance的EditForm异常问题

问题根源 #

NavMenu作为布局组件，渲染时机早于页面组件，SSR模式下直接使用Model绑定的EditForm加Enhance参数时，会因组件上下文初始化顺序问题导致Model绑定失效，抛出缺少Model/EditContext的异常；改用EditContext但移除Enhance则会失去无刷新导航特性，直接用Enhance又会因客户端脚本无法正确识别表单上下文出现Cannot read properties of null错误。

解决方案 #

通过显式初始化EditContext结合正确配置表单提交方式，在NavMenu中实现带Enhanced Navigation的搜索表单：

1. 定义搜索视图模型 #

创建用于绑定搜索表单的ViewModel（可按需添加验证规则）：

public class SearchViewModel
{
    [Required(ErrorMessage = "请输入搜索内容")]
    public string Query { get; set; } = string.Empty;
}

2. 在NavMenu中实现表单 #

使用EditContext而非直接绑定Model，确保组件初始化时就创建上下文，同时配置Enhance参数和正确的提交逻辑：

方式一：使用Get方法直接导航（推荐用于搜索场景）

@inject NavigationManager NavigationManager

<div class="nav-item">
    <EditForm EditContext="_editContext" 
              FormName="NavSearchForm" 
              Enhance 
              Method="FormMethod.Get" 
              Action="/search">
        <DataAnnotationsValidator />
        <div class="input-group">
            <InputText @bind-Value="_searchModel.Query" 
                       class="form-control" 
                       placeholder="搜索..." />
            <button type="submit" class="btn btn-outline-light">搜索</button>
            <ValidationMessage For="() => _searchModel.Query" class="text-danger ms-2" />
        </div>
    </EditForm>
</div>

@code {
    private readonly SearchViewModel _searchModel = new();
    private EditContext _editContext;

    protected override void OnInitialized()
    {
        // 初始化EditContext，确保SSR渲染时上下文存在
        _editContext = new EditContext(_searchModel);
    }
}

• Method="FormMethod.Get"：符合搜索表单的语义，提交时会将参数拼接到URL，触发Enhanced Navigation无刷新跳转至搜索页
• Action="/search"：指定搜索结果页的路由，需确保项目中存在对应路由的页面组件

方式二：通过OnValidSubmit处理自定义逻辑

如果需要在提交前执行额外逻辑（比如参数处理），可使用OnValidSubmit结合NavigationManager导航：

@inject NavigationManager NavigationManager

<div class="nav-item">
    <EditForm EditContext="_editContext" 
              FormName="NavSearchForm" 
              Enhance 
              OnValidSubmit="HandleSearch">
        <DataAnnotationsValidator />
        <div class="input-group">
            <InputText @bind-Value="_searchModel.Query" 
                       class="form-control" 
                       placeholder="搜索..." />
            <button type="submit" class="btn btn-outline-light">搜索</button>
            <ValidationMessage For="() => _searchModel.Query" class="text-danger ms-2" />
        </div>
    </EditForm>
</div>

@code {
    private readonly SearchViewModel _searchModel = new();
    private EditContext _editContext;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(_searchModel);
    }

    private void HandleSearch()
    {
        // 自定义逻辑：比如对搜索词做转义处理
        var encodedQuery = Uri.EscapeDataString(_searchModel.Query);
        // 使用Enhanced Navigation跳转（forceLoad: false 启用无刷新）
        NavigationManager.NavigateTo($"/search?query={encodedQuery}", forceLoad: false);
    }
}

关键注意事项 #

• 唯一FormName：确保FormName值在整个应用中唯一，避免客户端脚本混淆不同表单的上下文
• 验证配置：添加DataAnnotationsValidator和ValidationMessage实现前端验证，提升用户体验
• 脚本加载：确保根布局中存在Blazor核心脚本 <script src="_framework/blazor.web.js"></script>，Enhanced Navigation依赖此脚本实现无刷新导航

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