Blazor 重新渲染组件块元素 [关闭]

Posted 2023-02-19

【中文标题】Blazor 重新渲染组件块元素 [关闭]

【英文标题】：Blazor re-rendering components blocks elements [closed]

【发布时间】：2022-01-19 14:58:00

【问题描述】：

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

我的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”中放置断点也没有任何反应' 方法。所以我似乎没有发生任何事情，我也没有得到删除弹出框。

【问题讨论】：

<Confirm /> 来自哪里？ Delete_Click() 是第二次命中了吗？

请尝试添加<EditForm Model=[Yourmodel]> arround 你输入！

@user13256346 我确实有我拍了一张快照，但我的表单被包裹在编辑表单中

@HenkHolterman 自定义组件

@user13256346 @key="item" 作品我可以多次删除，谢谢大家的帮助。

【参考方案1】：

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