bootstrap 5 模态实现的问题

Question

我有一个 ASP.NET CORE mvc 项目，我在其中调用 API 并在 table 中显示数据，包括玩家的原始数据和用于更新和删除的两列.问题是当我实现删除功能的bootstrap模态时，它显示TempData的成功结果，但未能完成操作并且播放器仍在table！这是控制器中的删除操作

[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();
            }
        }

这是风景

    @model IEnumerable<Player>
@{
    ViewData["title"] = "All Players";
}
<style>
    .container {
        max-width: 95vw;
    }
</style>
<a asp-action="GetPlayer" class="btn btn-primary">Get Player</a>
<a asp-action="AddPlayer" class="btn btn-primary">Add Player</a>
<h2 class="h3 my-5 text-muted text-center fw-bold">A List of All Players</h2>
<div class="container" style="overflow:scroll">
    <div class="row">
        <div class="col">
            <table class="table table-striped table-bordered text-center">
                <thead>
                    <tr class="bg-secondary text-white">
                        <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 class="bg-dark text-white">@player.Id</td>
                            <td class="bg-warning">@player.Name</td>
                            <td class="bg-primary">@player.Position</td>
                            <td class="bg-info">@player.Nationality</td>
                            <td>
                                <a asp-action="UpdatePlayer" asp-route-id="@player.Id">
                                    <i class="h3 bi bi-pencil-fill"></i>
                                </a>
                            </td>
                               <button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
                               <i class="h3 bi bi-x-square-fill"></i>
                               </button>

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


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

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

Answer 1

<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
<i class="h3 bi bi-x-square-fill"></i>
</button>

 <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog">

<button> 有一个类似于 data-bs-target 的属性，它定义了我们要打开的模式的 ID。因此，data-bs-target 的值和 <div> 中模态的 id 必须相同。

您将 id="exampleModal" 设置为第一个，因此模态实施仅适用于第一个玩家而非所有玩家。

尝试更改 <button> 中的 data-bs-target="#@player.Id" 和上面 <div> 中的 id="@player.Id"。然后将重定向应用程序以删除操作并删除播放器。

bootstrap 5 模态实现的问题

Problem with bootstrap 5 modal implementation

c#

api

asp.net-core

model-view-controller

bootstrap-5