Blazor中新增数据库记录后如何不跳转页面实时显示？

你的核心需求是添加新文章后，在当前页面实时显示新增内容，不用跳转。先说说你现有代码里的问题：

• AddNewArticle 方法应该是异步的（服务的增删改查操作通常都是异步的），你现在写的是同步方法，可能导致操作未完成就执行后续逻辑
• 手动调用 OnParametersSetAsync() 是错误的，这是Blazor框架的生命周期方法，不该由开发者主动调用

下面给你两种实用的解决方案：

方案一：重新获取完整列表（简单直接） #

把获取文章列表的逻辑抽成单独的异步方法，初始化和添加新文章后都能复用。添加完成后重新拉取数据，就能拿到最新的列表。

修改后的代码：

@code {
    private List<ViewArticleModel> Articles;
    private NewArticleModel newArticle = new NewArticleModel();

    protected override async Task OnInitializedAsync()
    {
        await LoadArticles();
    }

    // 抽离获取列表的逻辑，方便复用
    private async Task LoadArticles()
    {
        var something = await _blogService.GetArticles();
        Articles = something.Select(x => x.ToModelView()).ToList();
    }

    // 改成异步方法，匹配服务的异步操作
    private async Task AddNewArticle()
    {
        await _blogService.AddNewArticle(newArticle.ToModel());
        newArticle = new NewArticleModel();
        // 重新加载列表
        await LoadArticles();
    }
}

方案二：直接添加新项到现有列表（性能更优） #

如果不想重新请求数据库，可以在添加成功后，把新创建的文章转换成ViewArticleModel直接加到Articles列表里，然后触发组件重新渲染（Blazor大部分时候会自动检测状态变化，但手动调用更稳妥）。

修改后的代码：

@code {
    private List<ViewArticleModel> Articles;
    private NewArticleModel newArticle = new NewArticleModel();

    protected override async Task OnInitializedAsync()
    {
        var something = await _blogService.GetArticles();
        Articles = something.Select(x => x.ToModelView()).ToList();
    }

    private async Task AddNewArticle()
    {
        // 调用服务添加新文章，用服务返回的新增实体更准确
        var addedArticle = await _blogService.AddNewArticle(newArticle.ToModel());
        // 转换成View模型，加到现有列表
        Articles.Add(addedArticle.ToModelView());
        newArticle = new NewArticleModel();
        // 触发组件重新渲染，确保新项显示出来
        StateHasChanged();
    }
}

注意点 #

• 确保你的_blogService.AddNewArticle是异步方法（返回Task或Task<T>），如果现在是同步的，建议改成异步，避免阻塞UI
• 如果方案二中服务不返回新增的文章实体，你可以直接把newArticle转换成ViewArticleModel添加，但要注意和数据库生成的字段（比如ID）保持一致

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