MVC+HTML/JS实现下拉选书自动填充标签及添加功能求助

1. 调整后的完整视图代码 #

@model IEnumerable<BookWebApp.Models.Books>
@{
    ViewData["Title"] = "OrderBooks";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<center>
    <h1>OrderBooks</h1>
    <hr/>

    <div id="Title">
        <select id="Title_Select">
            <option value="" disabled selected>选择书籍</option>
            @foreach(var item in Model)
            {
                <option value="@item.BookID">@item.Title</option>
            }
        </select>
    </div>

    <button onclick="loadBookDetails()">查看详情</button>
    <button onclick="addToCheckoutList()" style="margin-left:10px;">添加至结账列表</button>
    <hr/>

    <!-- 书籍详情展示区 -->
    <h3>书籍详情</h3>
    <div>
        <table class="table">
            <thead>
                <tr>
                    <th>@Html.DisplayNameFor(model => model.BookID)</th>
                    <th>@Html.DisplayNameFor(model => model.Title)</th>
                    <th>@Html.DisplayNameFor(model => model.Author)</th>
                    <th>@Html.DisplayNameFor(model => model.Price)</th>
                    <th>@Html.DisplayNameFor(model => model.Quantity)</th>
                </tr>
            </thead>
            <tbody>
                <tr id="bookDetailsRow">
                    <td id="bookId"></td>
                    <td id="bookTitle"></td>
                    <td id="bookAuthor"></td>
                    <td id="bookPrice"></td>
                    <td id="bookQuantity"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 结账列表展示区 -->
    <h3>结账列表</h3>
    <div>
        <table class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>作者</th>
                    <th>价格</th>
                    <th>库存</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="checkoutListBody">
                <!-- 动态添加的行将在这里显示 -->
            </tbody>
        </table>
    </div>
</center>

<script>
    // 将后端书籍数据转换为前端可访问的JS数组
    const books = @Html.Raw(Json.Serialize(Model));
    // 存储当前选中的书籍对象
    let selectedBook = null;

    // 加载并填充选中书籍的详情
    function loadBookDetails() {
        const selectedBookId = document.getElementById('Title_Select').value;
        if (!selectedBookId) {
            alert('请先选择书籍');
            return;
        }
        // 根据ID匹配对应书籍
        selectedBook = books.find(book => book.BookID == selectedBookId);
        // 填充详情到表格单元格
        document.getElementById('bookId').textContent = selectedBook.BookID;
        document.getElementById('bookTitle').textContent = selectedBook.Title;
        document.getElementById('bookAuthor').textContent = selectedBook.Author;
        document.getElementById('bookPrice').textContent = selectedBook.Price;
        document.getElementById('bookQuantity').textContent = selectedBook.Quantity;
    }

    // 将选中书籍添加至结账列表
    function addToCheckoutList() {
        if (!selectedBook) {
            alert('请先选择并查看书籍详情');
            return;
        }
        // 检查书籍是否已在列表中，避免重复添加
        const existingRow = document.querySelector(`#checkoutListBody tr[data-book-id="${selectedBook.BookID}"]`);
        if (existingRow) {
            alert('该书籍已在结账列表中');
            return;
        }
        // 创建新的列表行
        const newRow = document.createElement('tr');
        newRow.setAttribute('data-book-id', selectedBook.BookID);
        newRow.innerHTML = `
            <td>${selectedBook.BookID}</td>
            <td>${selectedBook.Title}</td>
            <td>${selectedBook.Author}</td>
            <td>${selectedBook.Price}</td>
            <td>${selectedBook.Quantity}</td>
            <td><button onclick="removeFromList(this)">移除</button></td>
        `;
        // 将行添加到结账列表
        document.getElementById('checkoutListBody').appendChild(newRow);
    }

    // 从结账列表移除指定书籍
    function removeFromList(button) {
        const targetRow = button.parentElement.parentElement;
        targetRow.remove();
    }

    // 可选优化：下拉菜单切换时自动加载详情
    document.getElementById('Title_Select').addEventListener('change', loadBookDetails);
</script>

2. 关键修改说明 #

• 下拉菜单优化：将选项的value改为BookID（而非标题），避免因标题重复导致的匹配错误，保证数据唯一性。
• 数据传递：通过@Html.Raw(Json.Serialize(Model))直接将后端书籍集合转换为前端JS数组，无需额外AJAX请求（适合数据量较小的场景）。
• 详情填充逻辑：loadBookDetails函数根据选中的ID匹配书籍，将数据填充到预定义ID的表格单元格中。
• 结账列表管理：
  • addToCheckoutList负责创建新行并添加到列表，同时检查重复项
  • removeFromList实现列表项的移除功能
• 体验优化：添加下拉菜单的change事件监听，选择书籍时自动加载详情，减少用户操作步骤。

3. 注意事项 #

• 确保Books模型的属性名称（如BookID、Title）与JS代码中使用的名称完全一致（大小写敏感）。
• 若书籍数据量较大，建议改用AJAX请求从后端获取单本书籍详情，避免一次性加载大量数据。

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