ASP.NET Core Blazor 中 InputFile 组件事件未触发的解决方案

问题背景

在 ASP.NET Core Blazor 应用开发中，文件上传是一个常见需求。开发者通常会使用 InputFile 组件来实现这一功能，并通过 OnChange 事件来处理文件选择操作。然而，在 .NET 8 版本的 Blazor Web App 中，部分开发者遇到了 InputFile 组件的 OnChange 事件未被触发的问题。

问题现象

开发者按照官方文档的示例代码实现了文件上传功能，代码如下：

<InputFile OnChange="LoadFiles" multiple />

@code {
    private void LoadFiles(InputFileChangeEventArgs e)
    {
        // 文件处理逻辑
    }
}

但在实际运行中，当用户选择文件后，LoadFiles 方法并未被调用，事件没有被触发。

根本原因

经过分析，这个问题与 Blazor 在 .NET 8 中的新渲染模式有关。在 .NET 8 中，Blazor 引入了更灵活的渲染模式控制机制，包括：

1. 静态渲染（Static）
2. 交互式服务器渲染（Interactive Server）
3. 交互式WebAssembly渲染（Interactive WebAssembly）

事件处理程序（如 OnChange）仅在交互式渲染模式下才能正常工作。如果应用运行在静态渲染模式下，所有客户端事件都将被忽略。

解决方案

要解决这个问题，需要确保应用运行在交互式渲染模式下。有以下两种配置方式：

全局配置方式

在 App.razor 文件中，为 Routes 组件添加渲染模式属性：

<Routes @rendermode="InteractiveServer" />

这种方式会将整个应用设置为服务器端交互模式。

页面级配置方式

如果只需要特定页面支持交互，可以在页面顶部添加渲染模式指令：

@rendermode InteractiveServer

与旧版本的区别

在 .NET 6 版本的 Blazor 中，渲染模式是通过 _Host.cshtml 文件中的以下配置控制的：

<component type="typeof(App)" render-mode="ServerPrerendered" />

而在 .NET 8 中，这一机制被更灵活的 @rendermode 指令所取代，开发者可以更精细地控制每个组件或页面的渲染行为。

最佳实践建议

1. 对于需要处理用户交互的组件，务必确保它们运行在交互式渲染模式下
2. 考虑应用的性能需求，合理选择全局或页面级交互模式配置
3. 在迁移旧版 Blazor 应用到 .NET 8 时，注意检查所有事件处理相关的组件是否配置了正确的渲染模式
4. 对于文件上传等需要客户端交互的功能，建议使用交互式服务器渲染模式（InteractiveServer）

通过正确配置渲染模式，可以确保 InputFile 组件的事件处理程序按预期工作，实现流畅的文件上传体验。