Modal弹窗无法正确显示数据库对应图书数据记录问题求助

问题根源 #

你当前代码中所有模态框的ID均为#exampleModal，Bootstrap查找模态框时只会匹配第一个拥有该ID的元素，因此无论点击哪个按钮，都会弹出第一条记录的模态框。

针对你提到的通过SelectedBook()方法获取对应图书并返回至模态框的需求，以下提供两种可行解决方案：

方案一：为每本图书生成唯一ID的模态框 #

直接在视图中为每本图书创建独立模态框，每个模态框使用包含图书ID的唯一标识：

修改 Overview.cshtml（注：你代码中写的Index.cshtml应为笔误） #

@using myBooks.Models

<div class="card-columns">
    <div class="row row-cols-1 row-cols-md-3 g-4">
        @foreach (Book book in ViewBag.Books)
        {
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">@book.Title</h5>
                    </div>
                    <div class="card-footer">
                        <!-- 按钮目标ID绑定图书唯一标识 -->
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal-@book.Id">
                            Details
                        </button>

                        <!-- 模态框ID包含图书ID -->
                        <div class="modal fade" id="exampleModal-@book.Id" tabindex="-1" aria-labelledby="exampleModalLabel-@book.Id" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="modal-title fs-5" id="exampleModalLabel-@book.Id">@book.Title</h1>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        @book.Description
                                        <p>ISBN: @book.ISBN</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        <button type="button" class="btn btn-primary">Save changes</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

该方案无需修改控制器，直接在视图层完成，适合数据量较小的场景。

方案二：通过AJAX调用控制器方法动态加载详情 #

保留单个模态框模板，点击按钮时异步调用控制器方法获取对应图书数据并填充：

步骤1：修改BookController，添加SelectedBook方法 #

using Microsoft.AspNetCore.Mvc;
using myBooks.Data;
using myBooks.Models;

namespace myBooks.Controllers
{
    public class BookController : Controller
    {
        private readonly AppDbContext _appDbContext;

        public BookController(AppDbContext appDbContext)
        {
            _appDbContext = appDbContext;
        }

        public IActionResult Overview()
        {
            var books = _appDbContext.Books.ToList();
            ViewBag.Books = books;
            return View();
        }

        // 返回图书详情的JSON数据
        [HttpGet]
        public IActionResult SelectedBook(int bookId)
        {
            var bookInDb = _appDbContext.Books.Find(bookId);
            if (bookInDb == null)
            {
                return NotFound();
            }
            return Json(bookInDb);
        }
    }
}

步骤2：修改Overview.cshtml，实现AJAX填充逻辑 #

@using myBooks.Models

<div class="card-columns">
    <div class="row row-cols-1 row-cols-md-3 g-4">
        @foreach (Book book in ViewBag.Books)
        {
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">@book.Title</h5>
                    </div>
                    <div class="card-footer">
                        <!-- 按钮绑定图书ID属性 -->
                        <button type="button" class="btn btn-primary btn-book-details" data-book-id="@book.Id">
                            Details
                        </button>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

<!-- 通用模态框模板 -->
<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">
                <h1 class="modal-title fs-5" id="exampleModalLabel"></h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="book-description"></p>
                <p id="book-isbn"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script>
// 确保页面已引入Bootstrap 5的bootstrap.bundle.min.js文件
document.querySelectorAll('.btn-book-details').forEach(button => {
    button.addEventListener('click', function() {
        const bookId = this.getAttribute('data-book-id');
        // 调用控制器接口获取数据
        fetch(`/Book/SelectedBook?bookId=${bookId}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('图书不存在');
                }
                return response.json();
            })
            .then(book => {
                // 填充模态框内容
                document.getElementById('exampleModalLabel').textContent = book.title;
                document.getElementById('book-description').textContent = book.description;
                document.getElementById('book-isbn').textContent = `ISBN: ${book.iSBN}`;
                // 显示模态框
                const modal = new bootstrap.Modal(document.getElementById('exampleModal'));
                modal.show();
            })
            .catch(error => {
                alert(error.message);
            });
    });
});
</script>

该方案适合数据量大或需要动态更新数据的场景，减少页面初始加载的DOM元素数量。

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