Blazor中调用带参数DELETE API实现数据删除问题求助

你当前代码存在两个核心问题，分别在API后端和Blazor前端，按下面的步骤修改即可正常运行：

1. 修复API端Delete接口逻辑 #

你写的删除接口漏了提交数据库变更的步骤，而且返回值写法不符合ASP.NET Core API的规范，修改后的代码如下：

[HttpDelete("{id}")]
// 去掉多余的Route特性，直接写在HttpDelete里更简洁，也不需要加/覆盖全局路由
public async Task<IActionResult> Delete(int id)
{
    var user = await _context.PrgUser.FindAsync(id);
    if (user == null)
    {
        return NotFound();
    }
    try 
    {
        _context.PrgUser.Remove(user);
        // 必须调用SaveChangesAsync，否则删除操作只会停留在内存，不会同步到数据库
        await _context.SaveChangesAsync();
        return Ok();
    }
    catch (Exception ex)
    {
        // 生产环境建议在这里加日志输出异常信息
        return StatusCode(StatusCodes.Status500InternalServerError, ex.Message);
    }
}

2. 修复Blazor端逻辑 #

前端删除后没有刷新本地数据，也没有做异常情况判断，修改后的代码如下：

@code {
    public PrgUser[] users { get; set; }
    IList<PrgUser> selectedUser;

    protected override async Task OnInitializedAsync()
    {
        await LoadUsers();
    }

    // 把加载数据的逻辑封装成公共方法，删除后可以直接复用刷新列表
    private async Task LoadUsers()
    {
        users = await Http.GetFromJsonAsync<PrgUser[]>("http://localhost:30958/api/Test");
        selectedUser = users.Take(1).ToList();
    }

    protected async Task Enter()
    {
        Console.WriteLine("Pressed");
        // 加空判断，防止没有选中用户时出现下标越界报错
        if (selectedUser == null || !selectedUser.Any())
        {
            Console.WriteLine("请先选择要删除的用户");
            return;
        }
        var response = await Http.DeleteAsync($"http://localhost:30958/api/Test/{selectedUser[0].UserId}");
        if (response.IsSuccessStatusCode)
        {
            Console.WriteLine("删除成功");
            // 删除成功后重新加载数据，页面表格会自动更新
            await LoadUsers();
        }
        else
        {
            Console.WriteLine($"删除失败，错误状态码：{response.StatusCode}");
        }
    }
}

额外注意事项 #

如果是Blazor WebAssembly项目，需要确认API后端已经配置了CORS策略，允许你的Blazor站点域名发起DELETE请求，否则浏览器会拦截跨域删除请求。

内容的提问来源于stack exchange，提问作者Brecht_Mels