ASP.NET Core MVC中Bootstrap模态框无法显示问题求助

1. 重复ID引发选择器冲突 #

你的模态框外层容器和内部modal-header都使用了id="formModal"，DOM中ID必须唯一，这会导致jQuery无法正确定位模态框元素。

修复：移除modal-header上的重复ID：

<div class="modal" tabindex="-1" role="dialog" id="formModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header"> <!-- 删除此处的id="formModal" -->
        <h5 class="modal-title"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
    </div>
  </div>
</div>

2. 模态标题赋值逻辑错误 #

你在success回调里把Controller返回的完整视图内容（res）同时赋值给了modal-body和modal-title，这会覆盖标题区域并破坏模态框结构，应该使用传入的title参数设置标题。

修复：调整success回调代码：

success: function(res) {
  $("#formModal").find(".modal-body").html(res);
  $("#formModal").find(".modal-title").html(title); // 使用传入的title参数
  $("#formModal").modal('show');
}

3. 缺失Bootstrap JavaScript依赖 #

Bootstrap模态框需要自身JS文件支持弹出功能，你只引入了jQuery，未引入Bootstrap JS，导致.modal('show')方法未定义。

修复：在jQuery之后引入匹配版本的Bootstrap JS（示例为Bootstrap 4版本）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

4. jQuery版本过低 #

你使用的jQuery 1.8.3版本过旧，与现代Bootstrap版本不兼容（Bootstrap 3需jQuery 1.9.1+，Bootstrap 4需jQuery 1.12.4+），会导致模态框方法无法正常执行。

修复：将jQuery升级到兼容版本，比如上述示例中的3.6.0。

5. 确保Controller返回局部视图 #

如果AddOrEdit.cshtml是完整视图（包含<html>、<body>等标签），插入模态框会破坏DOM结构。需改为局部视图，或在Controller中返回PartialView：

修改Controller代码：

public async Task<IActionResult> AddOrEdit(int id = 0)
{
    if (id == 0)
        return PartialView(new Organization());
    else
    {
        var org = await _context.Organizations.FindAsync(id);
        if (org == null)
        {
            return NotFound();
        }
        return PartialView(org);
    }
}

按以上步骤修复后，模态框即可正常显示。

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