.NET Core Razor Pages：如何将表格行ID传递至模态弹窗

嗨，别担心，刚接触Razor Pages遇到这种小问题太正常啦！其实不用纠结隐藏字段，有几个更简洁的方案能轻松搞定这个需求，我给你详细说说～

方案一：利用自定义data属性传递ID（最直观） #

这个思路是把每行的ID绑定到触发模态框的按钮上，弹出模态框时把ID暂存起来，点击删除按钮时直接传给你的Ajax函数。

1. 表格行与模态框触发按钮 #

在Razor的表格循环里，给删除按钮加上data-trip-id属性存储当前行的ID：

<table class="table">
    @foreach (var trip in Model.SeasonTrips)
    {
        <tr data-trip-id="@trip.Id">
            <td>@trip.TripName</td>
            <!-- 其他列内容 -->
            <td>
                <!-- 触发模态框的按钮，绑定ID -->
                <button type="button" class="btn btn-danger" 
                        data-bs-toggle="modal" 
                        data-bs-target="#deleteModal"
                        data-trip-id="@trip.Id">
                    删除
                </button>
            </td>
        </tr>
    }
</table>

2. 模态框与删除按钮 #

模态框的结构不用改太多，只需要给确认删除按钮加个ID方便监听：

<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                确定要删除这条行程记录吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">确认删除</button>
            </div>
        </div>
    </div>
</div>

3. JavaScript逻辑 #

监听模态框的显示事件，拿到当前要删除的ID，再绑定删除按钮的点击事件调用你的函数：

// 暂存当前要删除的ID
let currentDeleteId = 0;

// 监听模态框即将显示的事件
document.getElementById('deleteModal').addEventListener('show.bs.modal', function(event) {
    // 触发模态框的按钮就是表格里的删除按钮
    const triggerBtn = event.relatedTarget;
    // 从自定义属性里拿到ID
    currentDeleteId = triggerBtn.getAttribute('data-trip-id');
});

// 绑定确认删除按钮的点击事件
document.getElementById('confirmDelete').addEventListener('click', function() {
    // 调用你的删除函数，传入ID
    DeleteSeasonTrip(currentDeleteId);
    // 关闭模态框
    const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
    modal.hide();
});

// 你的Ajax删除函数
function DeleteSeasonTrip(tripId) {
    $.ajax({
        url: '/YourPageName/DeleteSeasonTrip', // 替换成你的Razor Page处理路径
        type: 'POST',
        // 别忘了带上防伪造令牌，Razor Pages必须的
        headers: {
            RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
        },
        data: { id: tripId },
        success: function(result) {
            // 删除成功后可以移除对应行
            $(`tr[data-trip-id="${tripId}"]`).remove();
            alert('删除成功');
        },
        error: function() {
            alert('删除失败，请稍后重试');
        }
    });
}

方案二：直接在模态框显示时传递ID（无需全局变量） #

如果不想用全局变量存储ID，也可以把ID直接绑定到确认删除按钮的data属性上：
在模态框的show.bs.modal事件里，给确认按钮赋值：

document.getElementById('deleteModal').addEventListener('show.bs.modal', function(event) {
    const triggerBtn = event.relatedTarget;
    const tripId = triggerBtn.getAttribute('data-trip-id');
    // 把ID绑定到确认按钮上
    document.getElementById('confirmDelete').setAttribute('data-id', tripId);
});

然后删除按钮的点击事件改成：

document.getElementById('confirmDelete').addEventListener('click', function() {
    const tripId = this.getAttribute('data-id');
    DeleteSeasonTrip(tripId);
    const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
    modal.hide();
});

关于你提到的隐藏字段方案 #

其实隐藏字段的思路也完全可行，比如在模态框里加一个<input type="hidden" id="tripIdHidden" />，然后在模态框显示时给它赋值document.getElementById('tripIdHidden').value = tripId，删除时再获取这个值。这个方案也没问题，只是用自定义data属性会更简洁一些。

最后提醒一下，Razor Pages的POST请求必须带上防伪造令牌，不然会被拦截，我上面的代码已经加了这个处理，记得在页面里加上@Html.AntiForgeryToken()哦！

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