MarceloQ
MarceloQ

Reputation: 11

Blazor not refresh UI

I am starting with Blazor, I did a very small project with a table and a pagination component but when paging the results it is not refreshing the UI.

If I debug I see that when paging the results obtained are correct but the UI does not change.

I leave you my code to see if you can help me:

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

Upvotes: 1

Views: 624

Answers (1)

Brian Parker
Brian Parker

Reputation: 14523

Use async :

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);

 }

Side note: Task vs ValueTask (its almost 2021)

Upvotes: 1

Related Questions