MAUI Razor中FilePicker选文件后文本框不实时显示路径的解决方法

你的问题出在异步方法的返回值类型上：Blazor中如果事件处理方法用async void，异步操作完成后不会自动触发组件的UI更新，所以你选择文件后filePath已经赋值，但界面没刷新；再次点击按钮时触发了组件渲染，才会显示出之前设置的路径。

修复方案（推荐） #

把OpenFileAsync的返回类型从async void改成async Task，Blazor会自动在异步操作完成后处理UI更新：

<div>
    <label for="inputdata">Input Data:</label>
    <input type="text" name="inputdata" value="@filePath" />
    <button @onclick="OpenFileAsync">Open</button>
</div>

@code {
    private string filePath;

    // 把async void改成async Task
    public async Task OpenFileAsync()
    {
        var customFileType = new FilePickerFileType(
            new Dictionary<DevicePlatform, IEnumerable<string>>
            {
                { DevicePlatform.WinUI, new[] { "jpg" } },
            }
        );

        PickOptions options = new()
        {
            PickerTitle = "Please select a comic file",
            FileTypes = customFileType,
        };
        var result = await FilePicker.Default.PickAsync(options);
        if (result != null)
        {
            filePath = result.FullPath;
        }
    }
}

备选方案（手动触发更新） #

如果因为某些原因必须保留async void，可以在给filePath赋值后手动调用StateHasChanged()通知组件更新UI：

// 在赋值后添加这一行
if (result != null)
{
    filePath = result.FullPath;
    StateHasChanged();
}

内容的提问来源于stack exchange，提问作者Üh Lieh