ASP.NET Core Blazor Web App 全局交互模式下的重连UI问题解析

在ASP.NET Core Blazor Web App的开发过程中，全局交互服务器渲染模式(global interactive server rendering)是一个重要特性。然而在.NET 10 Preview 2版本中，开发者可能会遇到一个典型问题：当服务器进程意外终止时，浏览器端未能正确显示重连UI界面。

问题现象

当开发者创建一个采用全局交互服务器渲染模式的Blazor Web App项目后，如果在运行时突然关闭服务器进程，按照预期浏览器应该显示重连UI界面，提示用户当前连接已断开并尝试重新连接。但在Preview 2版本中，这一重连机制未能正常工作，导致用户界面无任何反馈，影响用户体验。

问题根源

经过技术团队分析，这个问题源于Blazor的重连模态组件(ReconnectModal)的放置位置不当。在Preview 2版本中，该组件被默认放置在MainLayout.razor布局文件中，而实际上它需要被放置在App.razor文件的body部分才能确保在全局交互模式下正常工作。

解决方案

对于仍在使用Preview 2版本的开发者，可以通过以下步骤手动修复此问题：

1. 将ReconnectModal组件从Components/Layout/MainLayout.razor文件中移除
2. 将其添加到Components/App.razor文件的body部分
3. 确保在_Imports.razor文件中添加了对应布局组件的命名空间引用

版本演进

值得注意的是，在后续的Preview 3版本中，微软开发团队已经通过内部合并修复了这个问题。修复方案调整了重连UI的渲染位置，确保其在全局交互模式下能够正确显示。这一改进使得开发者无需再手动调整组件位置，提升了开发体验。

技术启示

这个问题提醒我们，在Blazor应用开发中，组件的放置位置有时会影响其功能的正常运作。特别是对于像重连UI这样的基础设施组件，其渲染位置需要特别考虑应用的整体架构和交互模式。开发者应当注意不同版本间的行为差异，并及时更新到修复了已知问题的版本。