.NET8 Blazor含JS组件渲染异常及使用问题咨询

背景 #

基于.NET8创建Blazor Web App（交互式自动模式），Visual Studio默认生成服务端和客户端两个项目。此前用.NET7开发的ImageSelect带图片下拉框组件，在.NET7 Blazor WebAssembly中运行正常。将该组件添加到.NET8项目的客户端后，在服务端App.razor引入所需CSS和JS，在标记为@attribute [RenderModeInteractiveAuto]的Razor页面使用组件时，触发错误：

InvalidOperationException: JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method.

原组件在OnInitializedAsync中调用JSInterop的代码：

protected override async Task OnInitializedAsync()
{
    if (string.IsNullOrEmpty(Id))
        Id = "imageselect-" + Guid.NewGuid().ToString();

    if (Config == null)
        Config = new Config() { };

    if (!string.IsNullOrEmpty(CssClass))
        Config.MainCss += " " + CssClass;

    var dotNetObjectRef = DotNetObjectReference.Create(this);
    JSModule = new ImageSelectJsInterop(JSRuntime);
    await JSModule.Setup(dotNetObjectRef, Id, Config);
}

按照提示改为在OnAfterRenderAsync中调用后，组件出现异常渲染：同时显示带图片的下拉框和纯文本下拉框。

问题 #

1. 依赖JavaScript的组件应在服务端还是客户端项目中使用？
2. 如何正确使用依赖JavaScript的Blazor组件？

问题1：依赖JS的组件部署位置 #

依赖JavaScript的组件必须放在客户端项目中。服务端渲染（SSR）阶段浏览器JS环境未就绪，无法执行JS interop逻辑；客户端项目运行在浏览器中，具备完整JS执行环境，可正常处理JS交互逻辑。服务端项目仅负责静态渲染、路由分发和初始页面输出，不能直接运行依赖JS的组件逻辑。

问题2：正确使用依赖JS组件的步骤 #

1. 规范JS interop调用时机 #

Blazor交互式自动模式默认预渲染，此时JS环境不可用，所有JS interop调用必须放在OnAfterRenderAsync中，且通过firstRender判断确保仅执行一次：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        if (string.IsNullOrEmpty(Id))
            Id = "imageselect-" + Guid.NewGuid().ToString();

        if (Config == null)
            Config = new Config() { };

        if (!string.IsNullOrEmpty(CssClass))
            Config.MainCss += " " + CssClass;

        var dotNetObjectRef = DotNetObjectReference.Create(this);
        JSModule = new ImageSelectJsInterop(JSRuntime);
        await JSModule.Setup(dotNetObjectRef, Id, Config);
    }

    await base.OnAfterRenderAsync(firstRender);
}

2. 解决双元素渲染问题 #

出现同时显示两个下拉框的原因是：预渲染时输出了原始纯文本下拉框，客户端接管后JS渲染了带图片版本，导致元素并存。解决方法：

• 在组件根元素添加条件渲染，预渲染时隐藏原始下拉框，JS初始化完成后再显示或替换：

  <select id="@Id" style="@(_isJsInitialized ? "display:block" : "display:none")">
      <!-- 下拉选项内容 -->
  </select>
  

  在JS初始化完成的回调中，将_isJsInitialized设为true，或直接让JS逻辑替换掉原始select元素。

3. 正确引入资源文件 #

确保JS和CSS资源放在客户端项目的wwwroot目录下，在客户端的布局文件（如_Layout.cshtml）中引入，而非服务端App.razor。服务端渲染阶段引入的资源无法在客户端生效，必须让客户端加载这些资源。

4. 可选：禁用组件预渲染 #

若无需预渲染，可给组件或页面指定RenderModeInteractiveWebAssembly，跳过预渲染步骤，此时可在OnInitializedAsync中调用JS interop：

@attribute [RenderModeInteractiveWebAssembly]

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