如何将列表中的指定模型传递到按钮关联的Modal弹窗？

我来帮你解决这个问题～看你给出的代码，现在所有按钮都绑定到同一个#detailsModal，但没有把当前循环的item数据传递进去，所以点击任何按钮弹窗内容都是一样的。这里给你两种实用的解决方案：

方案一：通过Data属性传递数据（适合简单数据） #

这种方法直接把需要的字段存在按钮的data-*属性里，然后用JavaScript读取并填充弹窗。

第一步：修改按钮，添加Data属性 #

把循环里的按钮改成这样，把item的字段存到自定义data属性中：

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#detailsModal" 
        data-id="@item.Id" data-firstname="@item.FirstName">
    Details
</button>

第二步：完善Modal弹窗结构 #

给Modal的内容区域添加用于展示数据的元素：

<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailsModalLabel">Item Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p><strong>ID:</strong> <span id="modal-item-id"></span></p>
                <p><strong>First Name:</strong> <span id="modal-first-name"></span></p>
                <!-- 如果有其他字段，继续添加对应的span -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

第三步：添加JavaScript监听弹窗事件 #

监听Modal的show.bs.modal事件，获取按钮上的data属性值，填充到弹窗里：

// 监听Modal即将显示的事件
$('#detailsModal').on('show.bs.modal', function (event) {
    // 获取触发弹窗的按钮元素
    const triggerBtn = $(event.relatedTarget);
    // 从按钮的data属性中读取数据
    const itemId = triggerBtn.data('id');
    const firstName = triggerBtn.data('firstname');
    
    // 获取Modal实例，填充内容
    const modal = $(this);
    modal.find('#modal-item-id').text(itemId);
    modal.find('#modal-first-name').text(firstName);
});

方案二：通过AJAX从后端获取完整模型（适合复杂/敏感数据） #

如果你的模型数据比较多，或者不想把数据暴露在HTML里，可以通过AJAX请求后端接口获取对应item的完整数据。

第一步：修改按钮，只传递ID #

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#detailsModal" 
        data-id="@item.Id">
    Details
</button>

第二步：编写JavaScript发送AJAX请求 #

$('#detailsModal').on('show.bs.modal', function (event) {
    const triggerBtn = $(event.relatedTarget);
    const itemId = triggerBtn.data('id');
    const modal = $(this);
    
    // 发送AJAX请求到后端接口
    $.ajax({
        url: '@Url.Action("GetItemDetails", "YourController")', // 替换成你的控制器和方法名
        type: 'GET',
        data: { id: itemId },
        success: function (itemData) {
            // 用返回的数据填充弹窗
            modal.find('#modal-item-id').text(itemData.Id);
            modal.find('#modal-first-name').text(itemData.FirstName);
            // 其他字段同理
        },
        error: function () {
            alert('加载详情失败，请稍后重试');
        }
    });
});

第三步：后端添加接口方法（C#示例） #

在你的控制器里添加一个返回模型数据的方法：

public ActionResult GetItemDetails(int id)
{
    // 从数据库或数据源中获取对应ID的模型
    var item = _yourRepository.GetById(id);
    // 返回JSON格式的数据
    return Json(item, JsonRequestBehavior.AllowGet);
}

两种方案的区别 #

• 方案一简单直接，适合数据量小、无敏感信息的场景，数据会存在HTML的data属性中；
• 方案二更安全，能获取实时数据，适合数据量大或需要保密的场景。

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