Reputation: 11
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
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