[英]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.我从 Blazor 开始,我做了一个非常小的项目,其中包含一个表格和一个分页组件,但是在对结果进行分页时,它并没有刷新 UI。
If I debug I see that when paging the results obtained are correct but the UI does not change.如果我调试,我会看到分页时获得的结果是正确的,但 UI 没有改变。
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();
}
}
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)旁注: Task vs ValueTask ( 快到2021 年了)
Thanks for the answers, I modified my code to be Async but the problem persists感谢您的回答,我将代码修改为 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());
}
Regarding the IHttpClientFactory, I am not quite into the subject yet to replace it关于 IHttpClientFactory,我还不太了解这个主题,还没有替换它
The last changes I made were:我所做的最后更改是:
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);
}
And I also tried with:我也尝试过:
protected override Task OnInitializedAsync()
{
await LoadTest();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.