Blazor中如何在用户选择后初始化获取的数据？

核心问题 #

你的代码存在两个关键问题导致数据无法正确显示：

1. InsertData方法仅返回获取到的数据，但未将其赋值给用于UI展示的Handler对象，也未切换OnScreen状态来显示数据区域。
2. 尝试在OnInitAsync调用InsertData无效，因为组件初始化时用户还未输入参数，district对象是空的，此时发起请求无法拿到有效数据。

修复步骤 #

1. 修改InsertData方法

更新方法逻辑，将获取到的数据赋值给Handler，并切换UI显示状态：

protected async Task InsertData()
{
    IsBranchSelectionShown = false;

    using var result = await Http.PostAsJsonAsync<District>("SqlData/Insertion", district);
    // 增加请求成功校验
    if (result.IsSuccessStatusCode)
    {
        Handler = await result.Content.ReadFromJsonAsync<District>();
        OnScreen = true; // 显示数据区域
    }
    else
    {
        // 可添加错误处理逻辑，比如提示用户请求失败
        await JS.InvokeVoidAsync("alert", "数据获取失败");
        IsBranchSelectionShown = true; // 重新显示表单
    }
}

2. 调整UI状态控制（可选优化）

建议用display: none替代visibility，因为visibility: hidden仍会占用布局空间：

<div class="choose-form" style="display: @(IsBranchSelectionShown ? "block" : "none" )">
    <!-- 表单内容不变 -->
</div>

<div class="fetched-data" style="display: @(OnScreen ? "block" : "none" )">
    <!-- 数据展示内容不变 -->
</div>

3. 初始化默认数据（可选）

如果需要页面加载时就填充默认参数并获取数据，可在OnInitializedAsync中设置默认值后调用InsertData：

protected override async Task OnInitializedAsync()
{
    // 设置默认参数，比如默认地区名和日期
    district.DistrictName = "默认地区";
    district.PresentationDate = DateTime.Now.ToString("yyyy-MM-dd");
    await InsertData();
}

完整修改后代码 #

@page "/sql"
@using MyApp.Shared
@using Microsoft.AspNetCore.Components.Forms
@inject HttpClient Http
@inject IJSRuntime JS

<div class="choose-form" style="display: @(IsBranchSelectionShown ? "block" : "none" )">
    <input type="text" @bind="district.DistrictName" /> <span>:מחוז</span>
    <br /><br />
    <input type="text" @bind="district.PresentationDate" /> <span>:תאריך</span>
    <div class="choose-btn">
        <button class="btn btn-primary" @onclick="InsertData">בחר</button>
    </div>
</div>

<div class="fetched-data" style="display: @(OnScreen ? "block" : "none" )">
    <ul>
        <li>@Handler.DistrictName</li>
        <li>@Handler.PresentationDate</li>
    </ul>
</div>

@code {
    bool IsBranchSelectionShown = true;
    bool OnScreen = false;

    private List<District> MyList = new();
    private District district = new();
    private District Handler = new();

    protected async Task InsertData()
    {
        IsBranchSelectionShown = false;

        using var result = await Http.PostAsJsonAsync<District>("SqlData/Insertion", district);
        if (result.IsSuccessStatusCode)
        {
            Handler = await result.Content.ReadFromJsonAsync<District>();
            OnScreen = true;
        }
        else
        {
            await JS.InvokeVoidAsync("alert", "数据获取失败");
            IsBranchSelectionShown = true;
        }
    }

    // 可选：初始化默认数据
    // protected override async Task OnInitializedAsync()
    // {
    //     district.DistrictName = "默认地区";
    //     district.PresentationDate = DateTime.Now.ToString("yyyy-MM-dd");
    //     await InsertData();
    // }
}

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