Blazor Server项目中Blazorise侧边栏渲染后不可见问题求助

问题描述 #

在Blazor Server项目中引入Blazorise，替换了Blazorise WASM模板的布局文件后，项目可正常运行，但侧边栏已在HTML中完成渲染，却无法在页面上显示。

解决方法 #

修改App.razor文件，为<HeadOutlet>和<Routes>组件添加@rendermode="@InteractiveServer"属性，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="_content/Blazorise/blazorise.css" />
    <link rel="stylesheet" href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" />
    <HeadOutlet @rendermode="@InteractiveServer" />
</head>
<body>
    <Routes @rendermode="@InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>

说明 #

Blazor Server默认渲染模式未匹配Blazorise WASM布局的交互逻辑，显式指定InteractiveServer渲染模式后，组件可正常进行服务端交互渲染，侧边栏即可正常显示。

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