Bootstrap模态框加载Partial View异常，点击提交弹出新窗口求助

看起来你的核心问题是Ajax.BeginForm没有触发AJAX异步提交，而是退化成了普通表单提交，所以浏览器会打开新窗口加载控制器返回的Partial View。下面是一步步的解决方法：

1. 确保加载必要的依赖脚本 #

Ajax.BeginForm是基于ASP.NET Unobtrusive Ajax实现的，必须在页面中加载jquery.unobtrusive-ajax.js，而且要在jQuery之后加载。检查你的页面头部或底部是否有这些引用：

<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

如果缺少jquery.unobtrusive-ajax.js，Ajax表单就会变成普通表单，触发页面跳转。

2. 完善AjaxOptions的配置 #

你的当前AjaxOptions只设置了UpdateTargetId，建议补充关键参数来确保AJAX行为符合预期：

@using (Ajax.BeginForm("SelectReservationDateTime", new AjaxOptions {
    UpdateTargetId = "divChangeRegion",
    HttpMethod = "POST", // 明确指定请求方法，和控制器的Action对应
    InsertionMode = InsertionMode.Replace, // 替换目标区域的内容（默认值，但明确写更清晰）
    OnSuccess = "maintainModalState" // 提交成功后执行JS函数，确保模态框保持打开
}))

然后在页面中添加对应的JS函数：

function maintainModalState() {
    // 强制保持模态框显示状态，避免DOM替换后模态框意外关闭
    $('#myModal').modal('show');
}

3. 确保Partial View不包含完整布局 #

如果你的Partial View不小心继承了全局布局（比如_Layout.cshtml），返回的内容会包含整个页面的结构，这可能导致异常或跳转。在Partial View的顶部添加以下代码，确保只返回局部内容：

@{
    Layout = null;
}

4. 优化模态框内容替换的目标区域 #

当前你把返回的Partial View替换到模态框的footer区域（divChangeRegion），这可能不是最佳体验。如果希望替换模态框的主体内容，可以给modal-body添加一个id，然后修改AjaxOptions的UpdateTargetId：

<div class="modal-body" id="modalContentContainer">
    <!-- 原来的表格内容 -->
</div>

然后更新AjaxOptions：

UpdateTargetId = "modalContentContainer"

这样返回的票据内容会直接替换原来的输入表单，用户体验更流畅。

最后检查 #

• 打开浏览器控制台（F12），查看是否有JS加载错误或脚本异常，这是排查AJAX失效的关键。
• 确认控制器的SelectReservationDateTime方法能正确接收模型数据，没有绑定错误导致返回错误页面。

按照这些步骤调整后，你的AJAX提交应该能在现有模态框内加载Partial View，而不会弹出新窗口了。

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