Blazor WASM 应用程序在处理执行删除请求的模态 ok 事件回调后停止响应

Question

我为表格实现了一个删除按钮，当单击该按钮时，会显示一个模式以确保用户确实想要删除该条目，但在单击确定按钮后，应用程序停止响应。 只有当我使用 http 对我的 ASP.NET REST API 的请求从数据库中删除并获取数据时才会发生这种情况。

以下是相关代码：

 @code{
    private async Task HandleCinemaModalOk(MouseEventArgs e)
    {
        visibleCinemaModal = false;
        var deleteResponse = await httpClient.DeleteAsync($"list_movies/{deleteableMovieId}");
        movies = await MoviesClient.GetMovies();
    }
 }

电影客户端：

public async Task<IEnumerable<Movie>> GetMovies() =>
            await httpClient.GetFromJsonAsync<IEnumerable<Movie>>("list_movies");
       

HTML部分：

@*Extra column for edit and delete*@
    <AntDesign.Column Width="300" @bind-Field="@context.Id" Title="">
        @{
            deleteableMovieId = @context.Id;
        }
        <Button type="danger" @onclick="@(() => visibleCinemaModal = true )" icon="delete">
        </Button>
        <Modal Title="Delete Movie"
               Visible="visibleCinemaModal"
               OnOk="HandleCinemaModalOk"
               OnCancel="HandleCinemaModalCancel">
            <Text>Are you sure you want to delete @context.Title ?</Text>
        </Modal>

        <Button type="primary" @onclick="@(() => NavigationManager.NavigateTo(@$"/editmovie/{context.Id}" ))" icon="edit">
        </Button>

    </AntDesign.Column>

Controller：

        [HttpGet]
        public async Task<ActionResult<List<Movie>>> GetMovies()
        {
            return await _db.Movies.ToListAsync();
        }


        [HttpDelete("{id}")]
        [Route("list_movies/{id}")]
        public async Task<ActionResult<int>> DeleteMovieById(int id)
        {
            var movie = await _db.Movies.FirstOrDefaultAsync(i => i.Id == id);
            if (movie == null)
            {
                return NotFound();
            }
            _db.Movies.Remove(movie);
            await _db.SaveChangesAsync();
            return Ok(movie);
        }

因此，如果我不添加行movies = await MoviesClient.GetMovies(); 应用程序不会冻结，但这不是一个选项，因为 UI 必须更新以向用户显示删除成功。

经过漫长的等待，我在控制台中收到以下错误：

 fail: Microsoft.WebAssembly.Diagnostics.DevToolsProxy[0] DevToolsProxy::Run: Exception System.AggregateException: One or more

发生错误。 （对方没有完成关闭握手就关闭了WebSocket连接。） ---> System.Net.WebSockets.WebSocketException (0x80004005): 对方没有完成关闭握手就关闭了WebSocket连接。 在 System.Net.WebSockets.ManagedWebSocket.ThrowIfEOFUnexpected（布尔值1.StateMachineBox ） .Tasks.Sources.IValueTaskSource.GetResult（Int16 令牌）在 System.Net.WebSockets.ManagedWebSocket.ReceiveAsyncPrivate[TResult]（内存1 payloadBuffer, CancellationToken cancellationToken) at System.Runtime.CompilerServices.PoolingAsyncValueTaskMethodBuilder 1.StateMachineBox 1.System.Threading.Tasks.Sources.IValueTaskSource<TResult>.GetResult(Int16 token) at System.Threading.Tasks.ValueTask 1.ValueTaskSourceAsTask.<>c.<.cctor>b__4_0(Object state) --- 上一个位置的堆栈跟踪结束 - -- 在 Microsoft.WebAssembly.Diagnostics.DevToolsProxy.ReadOne(WebSocket socket, CancellationToken token) --- 内部 except 结束离子堆栈跟踪 --- 在 Microsoft.WebAssembly.Diagnostics.DevToolsProxy.Run（Uri browserUri，WebSocket ideSocket）

编辑：

原来问题出在我把模态放在一个列里面，当我点击删除图标时，它为每条记录打开了一个模态，但是 ok 按钮关闭了“错误”的模态，EventCallback 不能'返回。

Answer 1

[HttpGet]
    public async Task<ActionResult<List<Movie>>> GetMovies()
    {
        var l= await _db.Movies.ToListAsync();
        return Ok(l);

    }

您没有返回 ActionResult，所以我敢打赌它在进行数据库调用时遇到了麻烦，请尝试更改为上面的代码。

同样，从您的删除操作中，您返回的是 ActionResult 而不是 ActionResult。 将其更改为返回 Ok(0)（如果您的客户需要一个 int，或将签名更改为 ActionResult）。

最后，我怀疑您不想等待 db save changes 调用，您实际上想要等待它。