ASP.NET Core 7 MVC中Razor组件重复显示问题求助

问题描述 #

在ASP.NET Core 7 MVC视图中嵌入Razor组件时，出现组件重复显示的偶发现象——每两次页面加载中仅有一次能正常显示组件。

相关代码 #

Create.razor（被嵌入的Razor组件）

@using CarStock.Data
@using Microsoft.AspNetCore.Components.Forms
@inject NavigationManager NavigationManager
@inject IPostService postS

<EditForm Model="@Post" OnValidSubmit="@CreatePost">
    <DataAnnotationsValidator />

    <div class="form-group">
        <label for="Title">Title</label>
        <InputText id="Title" @bind-Value="Post.Title" class="form-control" />
    </div>
    <div class="form-group">
        <label for="Content">Content</label>
        <InputTextArea id="Content" @bind-Value="Post.Content" class="form-control" />
    </div>
    <button onclick="@CreatePost()" class="btn btn-primary">Create</button>
</EditForm>

@code {
    Post Post = new Post();

    async Task CreatePost()
    {
        // Call service to create post
        await postS.CreatePost(Post);

        NavigationManager.NavigateTo("Blog", true);
        await Task.CompletedTask;
    }
}

Create.cshtml（MVC视图页面）

@using CarStock.Components.Blog;
@model CarStock.Data.Post

@{
    ViewBag.Title = "Create";
}

<div class="my-3 p-2">
    <component type="typeof(Create)" render-mode="Server" />
</div>

问题现象：组件内容被重复渲染，页面上显示两套完全相同的表单控件。

问题原因及解决方法 #

1. 错误的按钮事件绑定（核心原因） #

组件中按钮的onclick="@CreatePost()"写法存在问题：

• 这种写法会在组件渲染阶段就立即执行CreatePost方法，而非点击按钮时触发。
• 方法中调用NavigationManager.NavigateTo("Blog", true)时，true参数会强制重载页面，导致页面重新加载后再次渲染组件，最终出现重复显示的情况。

修正方案：
因为已经通过EditForm的OnValidSubmit绑定了提交逻辑，按钮只需设置为type="submit"即可，无需额外绑定点击事件。修改按钮代码为：

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

如果需要单独绑定点击事件（不依赖表单验证），则使用Blazor标准的@onclick语法，且不要加括号（加括号会立即执行方法）：

<button @onclick="CreatePost" class="btn btn-primary">Create</button>

2. 检查Blazor Server配置完整性 #

确保项目已正确配置Blazor Server相关服务和中间件：

• 在Program.cs中添加Blazor服务：

  builder.Services.AddServerSideBlazor();
  

• 配置Blazor Hub路由：

  app.MapBlazorHub();
  

缺失配置可能导致组件渲染异常，出现重复加载的情况。

3. 避免重复触发提交逻辑 #

原代码中EditForm的OnValidSubmit和按钮的onclick同时绑定了CreatePost方法，会导致表单提交时触发两次方法执行，加剧异常风险。保留其中一种绑定方式即可（推荐依赖EditForm的表单验证逻辑）。

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