![](/img/trans.png)
[英]Blazor Server UI PlotlyChart not updating after page change or refresh
[英]Blazor not refresh UI
我從 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();
}
}
使用異步:
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 年了)
感謝您的回答,我將代碼修改為 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,我還不太了解這個主題,還沒有替換它
我所做的最后更改是:
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();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.