I have an ASP.NET CORE mvc project in which I call an API and show the data in a table including the raw data of players and two columns for update and delete. The problem is when I implement bootstrap modal for delete function, It shows the success result of TempData, But fails to complete the action and the player is still in the table! Here is the delete action in the controller

[HttpPost]
        public async Task<IActionResult> DeletePlayer(int id)
        {
            var request = new HttpRequestMessage(HttpMethod.Delete, "http://localhost:42045/api/player/"   id);
            var client = _clientFactory.CreateClient();
            HttpResponseMessage response = await client.SendAsync(request, HttpCompletionOption.ResponseHeadersRead);
            if (response.StatusCode == System.Net.HttpStatusCode.NoContent)
            {
                TempData["success"] = "Player Deleted Successfully!";
                return RedirectToAction("GetAllPlayers");
                
            }
            else
            {
                return BadRequest();
            }
        }

This is the view

    @model IEnumerable<Player>
@{
    ViewData["title"] = "All Players";
}
<style>
    .container {
        max-width: 95vw;
    }
</style>
<a asp-action="GetPlayer" >Get Player</a>
<a asp-action="AddPlayer" >Add Player</a>
<h2 >A List of All Players</h2>
<div  style="overflow:scroll">
    <div >
        <div >
            <table >
                <thead>
                    <tr >
                        <th>Id</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Nationality</th>
                        <th>Update</th>
                        <th>Delete</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var player in Model)
                    {
                        <tr>
                            <td >@player.Id</td>
                            <td >@player.Name</td>
                            <td >@player.Position</td>
                            <td >@player.Nationality</td>
                            <td>
                                <a asp-action="UpdatePlayer" asp-route-id="@player.Id">
                                    <i ></i>
                                </a>
                            </td>
                               <button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
                               <i ></i>
                               </button>

                               <div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                               <div >
                               <div >
                               <div >
                               <h5  id="exampleModalLabel">Delete Player</h5>
                               <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
                               </div>
                               <div >
                               Are you sure?
                               </div>
                               <div >
                               <form method="post" asp-controller="Home" asp-action="DeletePlayer">
                               <a  data-bs-dismiss="modal">Close</a>
                               <input type="hidden" value="@player.Id" name="id" />
                               <button type="submit" >Yes</button>
                               </form>
                               </div>
                               </div>
                               </div>
                               </div>


                            <td>
                                
                            </td>
                        </tr>
                    }
                </tbody>
            </table>

        </div>
    </div>
</div>

CodePudding user response：

<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
<i ></i>
</button>

 <div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div >

<button> has an attribute like data-bs-target which defines the id of the modal that we want to open. So, value for data-bs-target and id of the modal in <div> has to be the same.

You set id="exampleModal"for the first, so Modal implementation is only for the first player not all of them.

Try to change data-bs-target="#@player.Id"in the <button> and the id="@player.Id"in above <div>. Then will redirect the application to delete action and delete a player.