Razor cshtml中Post表单内模态框打开后立即关闭问题求助

你的判断完全正确：表单默认的Post提交会触发页面刷新，导致刚渲染的模态框随页面重载消失。下面是几种实用的解决方法，都是通过避免页面同步刷新来保持模态框显示：

方法1：用AJAX异步获取数据并渲染模态框 #

核心思路：放弃表单默认提交，通过AJAX调用后台方法获取数据，手动填充模态框后再显示。

页面代码（cshtml） #

<!-- 表格行中的编辑按钮 -->
@foreach (var item in Model.Items)
{
    <tr>
        <td>@item.Name</td>
        <td>
            <button type="button" class="btn btn-primary btn-edit" data-id="@item.Id">
                编辑
            </button>
        </td>
    </tr>
}

<!-- 模态框容器 -->
<div class="modal fade" id="editModal" 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" id="modalContent">
                <!-- 动态填充编辑表单 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

JavaScript代码 #

// 绑定所有编辑按钮的点击事件
document.querySelectorAll('.btn-edit').forEach(btn => {
    btn.addEventListener('click', async () => {
        const itemId = btn.getAttribute('data-id');
        // 发送POST请求获取编辑数据
        const response = await fetch(`?handler=GetEditData&id=${itemId}`, {
            method: 'POST',
            headers: {
                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
            }
        });

        if (response.ok) {
            const item = await response.json();
            // 填充模态框内容（根据你的数据结构调整）
            document.getElementById('modalContent').innerHTML = `
                <input type="hidden" id="editId" value="${item.Id}">
                <div class="mb-3">
                    <label class="form-label">名称</label>
                    <input type="text" class="form-control" id="editName" value="${item.Name}">
                </div>
                <div class="mb-3">
                    <label class="form-label">描述</label>
                    <textarea class="form-control" id="editDesc">${item.Description}</textarea>
                </div>
            `;
            // 显示模态框
            const modal = new bootstrap.Modal(document.getElementById('editModal'));
            modal.show();
        }
    });
});

后台代码（cshtml.cs） #

// 后台处理AJAX请求的方法
public async Task<IActionResult> OnPostGetEditData(int id)
{
    // 根据ID从数据库获取数据
    var targetItem = await _yourDbContext.YourTable.FindAsync(id);
    if (targetItem == null) return NotFound();

    // 返回JSON格式的编辑数据
    return new JsonResult(new {
        Id = targetItem.Id,
        Name = targetItem.Name,
        Description = targetItem.Description
    });
}

方法2：用局部视图加载模态框内容 #

如果编辑表单比较复杂，可以把模态框内容抽成局部视图，通过AJAX加载后直接插入页面。

1. 创建局部视图（_EditModal.cshtml） #

@model YourProject.Models.YourItemModel

<div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑@Model.Name</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" asp-for="Id">
                    <div class="mb-3">
                        <label asp-for="Name" class="form-label"></label>
                        <input asp-for="Name" class="form-control">
                    </div>
                    <div class="mb-3">
                        <label asp-for="Description" class="form-label"></label>
                        <textarea asp-for="Description" class="form-control"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

2. 后台添加返回局部视图的方法 #

public async Task<IActionResult> OnPostGetEditPartial(int id)
{
    var targetItem = await _yourDbContext.YourTable.FindAsync(id);
    if (targetItem == null) return NotFound();
    return PartialView("_EditModal", targetItem);
}

3. 修改JavaScript加载逻辑 #

document.querySelectorAll('.btn-edit').forEach(btn => {
    btn.addEventListener('click', async () => {
        const itemId = btn.getAttribute('data-id');
        const response = await fetch(`?handler=GetEditPartial&id=${itemId}`, {
            method: 'POST',
            headers: {
                'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
            }
        });

        if (response.ok) {
            const modalHtml = await response.text();
            // 将局部视图插入页面容器
            document.getElementById('modalContainer').innerHTML = modalHtml;
            // 显示模态框
            const modal = new bootstrap.Modal(document.getElementById('editModal'));
            modal.show();
        }
    });
});

4. 页面添加模态框容器 #

<!-- 用于插入局部视图的容器 -->
<div id="modalContainer"></div>

关键注意事项 #

1. 防伪造令牌：AJAX请求必须带上RequestVerificationToken，否则会被Razor Pages拦截（页面中默认会自动生成这个隐藏字段）。
2. Bootstrap模态框实例：每次加载新内容后，需要重新初始化模态框实例，避免旧实例冲突。
3. 保存逻辑：模态框的保存按钮同样要用AJAX提交，不要用同步表单提交，否则还是会触发页面刷新。

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