Question

我有一个ASP.NET Core 3.1 C＃剃刀页面应用程序，该应用程序还使用了一些Blazor服务器端剃刀组件。我已将其发布到Windows 2008 R2 Server上的IIS。但是，当在一台安卓手机上使用Chrome浏览网站时，会定期出现一条消息：

尝试重新连接到服务器

此外，当用户一段时间不活动时，例如关闭手机显示屏，出现一条消息

已与服务器断开连接。重新加载页面...

该网站不是英语，这些通用消息不利于最终用户体验。有什么方法可以禁用这些消息，或者至少将它们翻译成另一种语言？

Answer 1

服务器端Blazor实际上也有一个答案。根据以下内容：ASP.NET Core Blazor hosting models，可以在components-reconnect-modal的主体中定义id为_Host.cshtml的div元素，以处理在连接断开的情况下显示的覆盖。

这看起来像这样：

<body>
...
<!-- Blazor overlay -->
<div id="components-reconnect-modal"></div>

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
...
</body>

Blazor根据应用程序的状态应用这些自定义类。根据文档，这些类有效：

components-reconnect-show：连接丢失。客户端正在尝试重新连接。显示模态，然后您可以使用CSS将自定义样式应用于屏幕叠加层。如果要全部删除它们，则可以选择根本不显示它们。
components-reconnect-hide：与服务器建立了活动连接。隐藏模态。
components-reconnect-failed：重新连接失败，可能是由于网络故障。要尝试重新连接，请致电window.Blazor.reconnect()。
components-reconnect-rejected：重新连接被拒绝。已到达服务器，但拒绝连接，并且服务器上的用户状态丢失。要重新加载该应用，请致电location.reload()。

要完全隐藏叠加层，例如，您可以添加以下CSS：

.components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected {
     display: none;
}

如果您希望自定义外观，则可以按照自己的喜好填充_Host.cshtml中的div：

<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
<div class="show">
    <p>
        // Message when attempting to connect to server
    </p>
</div>
<div class="failed">
    <p>
        // Message when failing to connect
    </p>
</div>
<div class="rejected">
    <p>
        // Message when refused
    </p>
</div>

我不知道这是否适用于客户端，因为我只使用服务器端Blazor。我希望这对您有用。

Answer 2

到目前为止，我仅找到一种方法来禁用不包含任何服务器端Blazor组件的页面上的Blazor覆盖。很简单，我创建了一个空的接口IPageWithBlazor，并使所有包含服务器端Blazor的剃刀页面模型都实现了该空接口。现在，我可以在_Layout.cshtml中使用以下条件：

@if (this.Model is IPageWithBlazor)
{
    <script type="text/javascript" src="~/js/blazor.polyfill.min.js"></script>
    <script src="~/_framework/blazor.server.js"></script>
}

关于翻译邮件，有another question that covers the topic。

如何在服务器上的ASP.NET Core产品上禁用“尝试重新连接到服务器”消息

2 个答案: