带Partial View的Modal对话框仅可打开一次，关闭后无法重启的问题求助

我之前也碰到过一模一样的问题！这种情况大多和Bootstrap Modal的DOM处理逻辑、动态内容的事件绑定有关，给你几个针对性的解决方案：

常见原因与修复方法 #

1. 别让Partial View包含完整Modal结构 #

很多人会把整个Modal的外层容器（比如你的#createAssetModal）写到Partial View里，这样第一次加载关闭后，Modal容器可能会被Bootstrap从DOM中移除，下次点击按钮时根本找不到这个元素。

修复步骤：

• 主页面保留固定的Modal外层容器：

  <div class="glyphicon-modal-window" id="createAssetModal" tabindex="-1" role="dialog" aria-labelledby="createAssetLabel">
    <div class="modal-dialog" role="document">
      <!-- 这里留空，用来加载Partial View的内容 -->
      <div class="modal-content" id="modalContentContainer"></div>
    </div>
  </div>
  

• Partial View只返回Modal内部的内容（比如头部、主体、底部）：

  <!-- Create.cshtml 仅返回Modal内部内容 -->
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title">Add Asset</h4>
  </div>
  <div class="modal-body">
    <!-- 你的表单或业务内容 -->
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save</button>
  </div>
  

2. 改用手动JS触发Modal，避免事件绑定丢失 #

原生的data-toggle="modal"在动态加载内容后，很容易因为DOM变化丢失事件绑定，不如用JS手动控制加载和显示逻辑。

修改按钮+添加JS：

• 先去掉按钮上的data-toggle和data-url，换成点击事件：

  <button type="button" class="btn btn-default btn-md" id="btnCreateAsset">
    <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> Add Asset
  </button>
  

• 写JS逻辑加载Partial View并显示Modal：

  $('#btnCreateAsset').click(function() {
      // 先清空容器，避免残留旧内容
      $('#modalContentContainer').empty();
      // 异步加载Partial View
      $.get('@Url.Action("Create","POPM_Trn_IOU")', function(htmlContent) {
          $('#modalContentContainer').html(htmlContent);
          // 手动唤起Modal
          $('#createAssetModal').modal('show');
      });
  });
  
  // Modal关闭时清空内容，避免下次打开显示旧数据
  $('#createAssetModal').on('hidden.bs.modal', function() {
      $('#modalContentContainer').empty();
  });
  

3. 检查是否存在重复ID #

如果你的Partial View里也有id="createAssetModal"，第一次加载后DOM里会有两个相同ID的元素，后续触发时就会出问题。一定要保证整个页面里只有一个createAssetModal。

4. 避免关闭时移除DOM元素 #

有些场景下，data-dismiss="modal"会直接把Modal元素从DOM中删掉，而不是隐藏。可以手动写关闭逻辑：

<button type="button" class="btn btn-default" id="btnCloseModal">Close</button>

$('#btnCloseModal').click(function() {
    $('#createAssetModal').modal('hide');
});

按上面的方法调整后，Modal应该就能正常重复打开了～

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