时间戳

首页 > 解决方案 > 删除函数从数据库中删除表值，但不从 BLAZOR 中的 HTML 表中删除

c# - 删除函数从数据库中删除表值，但不从 BLAZOR 中的 HTML 表中删除

问题描述

我的 blazor 应用程序中有这个 html 表，它显示公司列表。现在，当我想删除特定行时，我单击删除图标。我注意到删除函数正在从数据库中删除行值，而不是从视图中删除。请检查我的代码，如果我错过了什么，请告诉我。

代码：

            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Company Name</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var Result in lstCompanies)
                    {
                    <tr>
                        <td>@Result.id</td>
                        <td>@Result.companyName</td>
                        <td>
                            <button @onclick="() => RemoveCompanyFromList(Result)">
                                <i class="fa fa-trash-o fa-lg"></i>
                            </button>
                        </td>
                    </tr>
                    }
                </tbody>
            </table>

onclick 删除功能代码：

   [Parameter]
    public EventCallback<List<Models.UTP>> ItemUpdated { get; set; }
        private void RemoveCompanyFromList(Models.UTP utpResult)
        {
            string utpidResult = utpResult.utpid;
            try
            {
                Http.PutAsJsonAsync($"api/Users/company/remove/{utpidResult}", utpidResult);
                ItemUpdated.InvokeAsync(lstCompanies);
                StateHasChanged();
            }
            catch (Exception ex)
            {
                string exMsg = ex.Message;
            }
        }

标签： c#htmlblazorblazor-webassembly

解决方案

只需确保该项目已从 lstCompanies 中删除。

// make it async
private async Task RemoveCompanyFromList(Models.UTP utpResult)
{ 
    await Http.PutAsJsonAsync(
           $"api/Users/company/remove/{utpidResult}", 
           utpidResult);
    lstCompanies.Remove(utpidResult);     // add this
    ItemUpdated.InvokeAsync(lstCompanies);
    StateHasChanged();
}

或者，从后备存储（数据库）重新获取列表。

推荐阅读