Blazor WASM application stops responding after handling modal ok eventcallback, which performs a delete request

Question

I implemented a delete button for a table, and when clicking the button a modal is shown to make sure the user really wants to delete that entry, but after the ok button is clicked, the application stops responding. This only happens if I both delete and then get the data from the database using http request to my ASP.NET REST API.

Here are the relevant codes:

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

MoviesClient:

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

HTML part:

@*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);
        }

So if I don't add the line movies = await MoviesClient.GetMovies(); the application doesn't freeze, but it's not an option, because the UI must update to show the user that the deletion was successful.

After a long wait, I get the following error in the console:

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

errors occurred. (The remote party closed the WebSocket connection without completing the close handshake.) ---> System.Net.WebSockets.WebSocketException (0x80004005): The remote party closed the WebSocket connection without completing the close handshake. at System.Net.WebSockets.ManagedWebSocket.ThrowIfEOFUnexpected(Boolean throwOnPrematureClosure) at System.Net.WebSockets.ManagedWebSocket.EnsureBufferContainsAsync(Int32 minimumRequiredBytes, CancellationToken cancellationToken, Boolean throwOnPrematureClosure) at System.Runtime.CompilerServices.PoolingAsyncValueTaskMethodBuilder 1.StateMachineBox 1.System.Threading.Tasks.Sources.IValueTaskSource.GetResult(Int16 token) at System.Net.WebSockets.ManagedWebSocket.ReceiveAsyncPrivate[TResult](Memory 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) --- End of stack trace from previous location --- at Microsoft.WebAssembly.Diagnostics.DevToolsProxy.ReadOne(WebSocket socket, CancellationToken token) --- End of inner exception stack trace --- at Microsoft.WebAssembly.Diagnostics.DevToolsProxy.Run(Uri browserUri, WebSocket ideSocket)

Edit:

It turned out that the problem was that I've put the modal inside a column, and when I clicked on the delete icon, it opened a modal for each record, but the ok button closed the "wrong" modal, and the EventCallback couldn't return.

Answer 1

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

    }

you're not returning an ActionResult, so I bet it's getting caught up doing a database call, try changing to code above.

Similarly, from your delete action you're returning ActionResult not ActionResult. Change that to return Ok(0) (if you client is expecting an int, or change the signiture to ActionResult).

Finally, I suspect you don't want to be awaiting the db save changes call, you actually want to wait for it.