在Blazor服务器应用程序中使用SignalR删除元素时,UI不会自动更新的原因是,SignalR仅控制服务器上的连接,而不管理浏览器上的DOM元素。因此,需要手动调用StateHasChanged方法以更新组件的UI。以下是一个示例:
using Microsoft.AspNetCore.SignalR.Client;
using Microsoft.AspNetCore.Components;
using System.Threading.Tasks;
public class SignalRService
{
private readonly NavigationManager _navigation;
private readonly HubConnection _connection;
public SignalRService(NavigationManager navigation)
{
_navigation = navigation;
_connection = new HubConnectionBuilder()
.WithUrl(_navigation.ToAbsoluteUri("/hub"))
.Build();
_connection.Closed += async (error) =>
{
await Task.Delay(1000);
await _connection.StartAsync();
};
_connection.StartAsync();
}
public async Task DeleteItem(int itemId)
{
await _connection.InvokeAsync("DeleteItem", itemId);
}
}
@inject SignalRService SignalR
My List
@foreach (var item in Items)
{
- @item.Name
}
@code {
public List- Items { get; set; } = new List
- ();
protected override async Task OnInitializedAsync()
{
await LoadItems();
}
private async Task LoadItems()
{
// load items from server
Items = await Http.GetJsonAsync
>("api/items");
}
private async Task DeleteItem(int itemId)
{
await SignalR.DeleteItem(itemId); // delete item using SignalR
Items.RemoveAll(item => item.Id == itemId); // remove item from list
StateHasChanged(); // update UI
}
}
上一篇:Blazor服务器应用程序在Windows2016上的行0处有空引用异常?
下一篇:Blazor服务器应用程序:为什么在带有嵌入式Input标签的HTML表中输入后按Tab键会在下一个单元格中显示?