Blazor 重新渲染组件块元素

Question

我有点卡在我的索引页面上，正在从我的 excel 页面加载所有内容。每个项目都有一个编辑按钮和删除按钮，就像我在 mvc 中使用的那样。我可以在稍后调用 'StateHasChanged()' 的地方删除 1 个项目，但是当我想删除另一个项目时，什么也没有发生，我也没有进入我的代码。

我的html:

@if (clients == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div>
        <input type="button" data-toggle="modal" data-target="#taskModal" class="btn btn-primary" value="Add Client" @onclick="(() => AddClient())" />
    </div>
    <br />
    <table class="table">
        <thead class="thead-light">
            <tr>                
                <th><span @onclick="@(() => Sort("RefId"))">Id</span><i class="@(SortIndicator("RefId"))"></i></th>
                <th><span @onclick="@(() => Sort("FirstName"))">First Name</span><i class="@(SortIndicator("FirstName"))"></i></th>
                <th><span @onclick="@(() => Sort("LastName"))">Last Name</span><i class="@(SortIndicator("LastName"))"></i></th>
                <th><span @onclick="@(() => Sort("Address"))">Address</span><i class="@(SortIndicator("Address"))"></i></th>
                <th><span @onclick="@(() => Sort("Company"))">Company</span><i class="@(SortIndicator("Company"))"></i></th>
                <th><span @onclick="@(() => Sort("VATNumber"))">Vat number</span><i class="@(SortIndicator("VATNumber"))"></i></th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            @foreach (ClientDto item in clients)
            {
            <tr>                
                <td>@item.RefId</td>
                <td>@item.FirstName</td>
                <td>@item.LastName</td>
                <td>@item.Address</td>
                <td>@item.Company</td>
                <td>@item.VatNumber</td>
                <td><input type="button" class="btn btn-primary" @onclick="(() => EditClient(item))" data-toggle="modal" data-target="#taskModal" value="Edit" /></td>
                <td><input type="button" class="btn btn-danger" @onclick="(() => Delete_Click(item.RefId))" data-toggle="modal" data-target="#confirmDelteModal" value="Delete" /></td>
                <Confirm @ref="DeleteConfirmation" ConfirmationChanged="ConfirmDelete_Click" ConfirmMessage="@($"Are you sure you want to delete this client!")"></Confirm>
            </tr>
            }
        </tbody>
    </table>
}

<Pager PageIndex=@paginatedList.PageIndex TotalPages=@paginatedList.TotalPages OnClick="PageIndexChanged"
       HasNextPage=@paginatedList.HasNextPage HasPreviousPage=@paginatedList.HasPreviousPage>
</Pager>

我的代码：

IEnumerable<ClientDto> clients;
PaginatedList<ClientDto> paginatedList = new PaginatedList<ClientDto>();    

int? pageNumber = 1;
string currentSortField = "RefId";
string currentSortOrder = "Asc";


protected ConfirmationComponent DeleteConfirmation { get; set; }

private int RefId { get; set; }


protected void Delete_Click(int refId)
{
    RefId = refId;
    DeleteConfirmation.Show();
}

protected void ConfirmDelete_Click(bool deleteConfirmed)
{
    if(deleteConfirmed)
    {
        DeleteClient(RefId);
        //reload client list
        paginatedList = ClientService.ClientReader(1, currentSortField, currentSortOrder);
        clients = paginatedList.Items;
    }
}

protected override void OnInitialized()
{
    Log.Information("Initializing clients");
    paginatedList = ClientService.ClientReader(1, currentSortField, currentSortOrder);
    clients = paginatedList.Items;
}     

private void AddClient()
{
    NavigationManager.NavigateTo("/addclient");
}

private void EditClient(ClientDto client)
{
    NavigationManager.NavigateTo("/editclient/" + client.RefId);
}

private void DeleteClient(int clientId)
{
    Log.Information($"Client with id: {clientId} has been deleted");
    ClientService.DeleteClient(clientId);
    StateHasChanged();
}

在最后一个方法中调用了 StateHasChanged() 是的，我实时看到项目消失并被删除，但是当我在另一个项目中再次单击删除时，即使我在我的项目中放置断点也没有任何反应'confirmation_delete' 方法。所以我似乎什么也没发生，我也没有收到删除弹出框。

Answer 1

您可以使用 @key 来优化 Blazor 性能，它会为每个元素创建一个值，Blazor 可以使用此值将现有项目与新项目进行比较，因此 Blazor 可以更好地看到变化并渲染组件。

Blazor 重新渲染组件块元素

Blazor re-rendering components blocks elements

c#

.net-core

blazor-server-side