ASP.NET MVC局部视图加载Bootstrap模态框异常问题求助

我来帮你搞定这个问题！你遇到的“模态框闪一下就消失、页面重新加载”的情况，核心原因是按钮的默认提交行为没有被阻止——虽然你用了Ajax，但浏览器还是触发了按钮的默认动作（因为button标签默认的type是submit），直接导致页面刷新，打断了模态框的显示流程。

下面是具体的修复方案：

方案1：修改按钮的type属性 #

直接给按钮加上type="button"，明确告诉浏览器这是一个普通按钮，不是提交按钮：

<button class="btn btn-default" id="addDocument" type="button">Add</button>

方案2：在点击事件中阻止默认行为 #

如果不想修改按钮标签，也可以在你的jQuery点击回调里添加event.preventDefault()来阻止默认提交动作：

$(document).ready(function () {
  $('#addDocument').click(function (event) {
    event.preventDefault(); // 关键：阻止按钮的默认提交行为
    var url = $('#myModal').data('url');
    $.get(url, function (data) {
      $('#myModalContent').html(data);
      $('#myModal').modal('show');
    })
    // 可选：添加错误回调，方便排查请求问题
    .fail(function(xhr, status, error) {
      console.error('加载局部视图失败:', error);
    });
  });
});

额外的调试建议 #

• 检查URL是否正确：在浏览器控制台执行console.log($('#myModal').data('url'))，确认生成的请求地址是有效的。
• 确认JS加载顺序：确保页面先加载了jQuery，再加载Bootstrap的JS文件，最后加载你的自定义脚本（包括jquery.unobtrusive-ajax.min.js），顺序错了会导致Bootstrap模态框功能失效。
• 检查局部视图是否正常：直接在浏览器中访问@Url.Action("CreateTemplateDocument")生成的URL，确认能正确返回视图内容。

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