Blazor 不刷新用户界面

Question

我从 Blazor 开始，我做了一个非常小的项目，其中包含一个表格和一个分页组件，但是在对结果进行分页时，它并没有刷新 UI。

如果我调试，我会看到分页时获得的结果是正确的，但 UI 没有改变。

我给你留下我的代码，看看你是否可以帮助我：

@page "/test"
@using BlazorPagination
@using System.Text.Json
@inject IJSRuntime js
@inject HttpClient http

<h3>TEST</h3>
        <table data-toggle="table" id="table">
            <tbody>
                @foreach (var t in _data.Results)
                {
                    <tr>
                        <td scope="row">@t.Id</td>
                        <td>@t.Text</td>
                        <td>@t.Value</td>
                    </tr>
                }
            </tbody>
        </table>
        <JSFunction></JSFunction>

        <BlazorPager CurrentPage="@_data.CurrentPage"
                     PageCount="@_data.PageCount"
                     OnPageChanged="(async e => { _page = e; LoadTest(); })"
                     ShowFirstLast="false"
                     ShowPageNumbers="true"
                     VisiblePages="10"
                     FirstText="First"
                     LastText="Last" />
@code {
    List<Common.TestEntity> testList;
    private PagedResult<Common.TestEntity> _data;
    private int _page = 1;

    protected override void OnInitialized()
    {
        LoadTest();
    }

    void LoadTest()
    {
        HttpClient http = new HttpClient();

        var httpResponse = http.GetAsync($"https://localhost:44348/api/test").GetAwaiter().GetResult();
        if (httpResponse.IsSuccessStatusCode)
        {
            var responseString = httpResponse.Content.ReadAsStringAsync().GetAwaiter().GetResult();
            testList = JsonSerializer.Deserialize<List<Common.TestEntity>>(responseString,
                new JsonSerializerOptions() { PropertyNameCaseInsensitive = true });

            _data = testList.AsQueryable().ToPagedResult(_page, 10);
        }
        this.StateHasChanged();
    }
}

Answer 1

使用异步：

OnPageChanged="(async e => { _page = e; await LoadTest(); })"

 protected override Task OnInitializedAsync()
 {
       await LoadTest();
 }

 async ValueTask LoadTest()
 {
        HttpClient http = new HttpClient();

        var httpResponse = await http.GetAsync($"https://localhost:44348/api/test");
        if (httpResponse.IsSuccessStatusCode)
        {
            var responseString = await httpResponse.Content.ReadAsStringAsync();
            testList = JsonSerializer.Deserialize<List<Common.TestEntity>>(responseString,
                new JsonSerializerOptions() { PropertyNameCaseInsensitive = true });

            _data = testList.AsQueryable().ToPagedResult(_page, 10);
        }

        // InvokeAsync forces the StateHasChanged to be executed on the UI thread.
        await InvokeAsync(StateHasChanged);

 }

旁注： Task vs ValueTask （ 快到2021 年了）

Answer 2

感谢您的回答，我将代码修改为 Async 但问题仍然存在

async Task LoadTest()
{
    HttpClient http = new HttpClient();

        testList = await http.GetFromJsonAsync<List<Common.TestEntity>>($"https://localhost:44348/api/test");
        _data = testList.AsQueryable().ToPagedResult(_page, 10);

        await InvokeAsync(() => StateHasChanged());
}

关于 IHttpClientFactory，我还不太了解这个主题，还没有替换它

Answer 3

我所做的最后更改是：

protected override void OnInitialized()
{
     LoadTest();
}

async ValueTask LoadTest()
{
     HttpClient http = new HttpClient();

     testList = await http.GetFromJsonAsync<List<Common.TestEntity>>($"https://localhost:44348/api/test");
     _data = testList.AsQueryable().ToPagedResult(_page, 10);

     await InvokeAsync(StateHasChanged);
}

我也尝试过：

    protected override Task OnInitializedAsync()
    {
        await LoadTest();
    }