问Blazor不刷新UI
EN

Stack Overflow用户

提问于 2020-10-22 02:05:28

回答 1查看 163关注 0票数 1

我从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();
    }
}

user-interface

blazor

回答 1

Stack Overflow用户

发布于 2020-10-22 02:14:31

使用异步：

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年了)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64469287

复制

相似问题

问Blazor不刷新UI
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Blazor不刷新UIEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Blazor不刷新UI
EN