.NET 9 Blazor SSR中SectionOutlet/SectionContent导航不重渲染问题

这是Blazor .NET 9 SSR无刷新导航场景下SectionContent的设计限制，并非你的使用方式错误。

核心原因 #

Blazor SSR中，HeadContent是专门针对<head>区域的特殊组件框架，在无刷新导航时会自动触发<head>内容的增量更新（移除旧页面的HeadContent、添加新页面的HeadContent）。而SectionContent/SectionOutlet是通用的内容插槽，默认仅在首次加载或全量刷新时渲染DOM内容，无刷新导航时Blazor不会重新渲染SectionOutlet所在的布局部分，因此会出现两种问题：

• 从无SectionContent的页面导航到有该内容的页面时，新的脚本/HTML不会被注入DOM
• 从有SectionContent的页面导航到其他页面时，已注入的内容不会被移除

你的配置（在App.razor的</body>前添加SectionOutlet）本身没有语法错误，但不符合无刷新导航场景下的动态内容需求。

解决方案 #

推荐以下两种适配无刷新导航的方案：

1. 手动管理脚本的加载与卸载

利用组件生命周期钩子，在页面渲染时加载脚本，页面销毁时清理资源，完全控制脚本的生命周期：

在AddProduct.razor中：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<div id="quill-editor"></div>

@code {
    private IJSObjectReference? _quillModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 加载Quill脚本（支持ES模块或普通脚本）
            _quillModule = await JSRuntime.InvokeAsync<IJSObjectReference>(
                "import", "./scripts/quill.min.js");
            
            // 初始化编辑器
            await JSRuntime.InvokeVoidAsync("initQuillEditor", "#quill-editor");
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_quillModule != null)
        {
            // 销毁编辑器实例
            await JSRuntime.InvokeVoidAsync("destroyQuillEditor", "#quill-editor");
            
            // 释放JS模块引用
            await _quillModule.DisposeAsync();
        }
    }
}

对应的全局JS文件（如wwwroot/scripts/quill-utils.js）：

window.initQuillEditor = (selector) => {
    return new Quill(selector, {
        theme: 'snow',
        // 其他配置
    });
};

window.destroyQuillEditor = (selector) => {
    const element = document.querySelector(selector);
    if (element) {
        const quillInstance = Quill.find(element);
        if (quillInstance) {
            quillInstance.destroy();
        }
        // 可选：清理DOM元素
        element.innerHTML = '';
    }
};

2. 自定义动态内容插槽组件

如果需要复用类似SectionContent的插槽逻辑，可以自定义一个组件，利用路由变化事件来动态更新DOM内容：

1. 在App.razor中添加自定义插槽容器：

<div id="dynamic-scripts-container"></div>

2. 创建DynamicScriptSection.razor组件：

@inject IJSRuntime JSRuntime
@implements IDisposable

[Parameter] public RenderFragment? ChildContent { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 将ChildContent渲染为HTML字符串并注入到容器
        await JSRuntime.InvokeVoidAsync(
            "updateDynamicScripts", 
            "#dynamic-scripts-container", 
            RenderToMarkupString(ChildContent));
    }
}

private string RenderToMarkupString(RenderFragment? fragment)
{
    using var writer = new StringWriter();
    fragment?.Invoke(writer);
    return writer.ToString();
}

public void Dispose()
{
    // 页面销毁时移除对应内容
    _ = JSRuntime.InvokeVoidAsync("clearDynamicScripts", "#dynamic-scripts-container");
}

3. 对应的JS工具函数：

window.updateDynamicScripts = (containerSelector, html) => {
    const container = document.querySelector(containerSelector);
    if (container) {
        container.innerHTML = html;
        // 执行新插入的脚本（如果是内联脚本）
        const scripts = container.querySelectorAll('script');
        scripts.forEach(script => {
            const newScript = document.createElement('script');
            Object.assign(newScript, {
                src: script.src,
                async: script.async,
                defer: script.defer,
                type: script.type
            });
            newScript.textContent = script.textContent;
            container.replaceChild(newScript, script);
        });
    }
};

window.clearDynamicScripts = (containerSelector) => {
    const container = document.querySelector(containerSelector);
    if (container) {
        container.innerHTML = '';
    }
};

4. 在AddProduct.razor中使用：

<DynamicScriptSection>
    <script src="./scripts/quill.min.js"></script>
    <script>
        // 初始化代码
    </script>
</DynamicScriptSection>

总结 #

SectionContent更适合静态内容的插槽场景，无刷新导航下的动态脚本/资源加载需要依赖组件生命周期或自定义逻辑来管理。上述方案都能解决你遇到的Quill Editor加载问题，其中手动管理脚本的方式更轻量、可控。

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