Blazor Server中InputFile组件RenderMode在组件上失效问题咨询

Blazor Server中直接在InputFile组件上设置@rendermode=RenderMode.InteractiveServer无法触发OnChange事件，核心原因有两点：

1. 内置组件的渲染模式限制
   并非所有Blazor内置组件都支持直接在自身上指定交互渲染模式，InputFile就属于这类组件。它依赖Blazor底层的文件上传JS互操作机制，以及与服务器的SignalR连接上下文，单独给InputFile设置渲染模式时，无法正确初始化这些依赖环境，导致事件无法通过SignalR传递到服务器端方法。

2. 上下文绑定差异
   当在页面顶部设置@rendermode InteractiveServer时，整个页面处于统一的InteractiveServer交互上下文，InputFile能自动接入这个上下文，JS层的文件选择事件可以正常转发到服务器端的LoadFiles方法。而组件级设置渲染模式时，InputFile无法与页面的主上下文建立有效绑定，事件链路断裂。

如果不想让整个页面使用InteractiveServer模式，可以把InputFile封装到一个独立的交互式组件中，再在主页面引用该组件时指定渲染模式：

封装的交互式组件（FileUploadComponent.razor） #

<InputFile id="input-file" OnChange="@LoadFiles" multiple/> 

<label>
    @FileCount
</label>
@code {
    [Parameter]
    public string FileCount { get; set; } = "0";

    private void LoadFiles(InputFileChangeEventArgs e)
    {
        FileCount = e.FileCount.ToString();
    }
}

主页面引用 #

@page "/"

<FileUploadComponent @rendermode=RenderMode.InteractiveServer />

这样既实现了局部组件的交互式渲染，又能保证InputFile的事件正常触发。

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