Bootstrap 模态页眉和页脚未呈现答案

【问题标题】：Bootstrap modal header and footer not renderedBootstrap 模态页眉和页脚未呈现
【发布时间】：2016-09-09 17:58:08
【问题描述】：

我正在引导模式中显示编辑表单。使用 asp mvc5，我将部分视图返回到引导模式窗口。表格显示出来，充满数据和帖子就好了。唯一的问题是不显示页眉和页脚。该代码显示在“查看页面源代码”中，但未显示在 Web 开发检查器 (chrome) 的元素选项卡中。

我计划在这一页上有多个不同的模式，所以我在 _layout 页面中为模式使用了一个占位符，然后传入不同的局部视图。

布局中的占位符：

<body>

    @*Container for modal windows*@
    <div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
                    <h4 class="modal-title" id="modalLabel"></h4>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">This is the footer</div>
            </div>
        </div>
    </div>

部分视图（仅包含一个表单和模态取消按钮）：

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save" class="btn btn-default" />
                    <button class="btn btn-warning" data-dismiss="modal">Cancel</button>
                </div>
            </div>

一些js为链接添加“data-”标签：

$(function () {

  $('body').on('click', '.modal-link', function(e) {
      //e.preventDefault();
      $(this).attr('data-target', "#modal-container");
      $(this).attr('data-toggle', 'modal');
  });

//Clear modal cache
  $('#modal-container').on('hidden.bs.modal', function() {
      $(this).removeData('bs.modal');
  });

});

mvc 控制器只返回部分：

return PartialView("_EditOrchard", orchard);

【问题讨论】：

为什么不在部分响应中包含页眉和页脚。每个部分都会有不同的“保存”行为对吗？
好的，但我不明白为什么。我假设部分视图将被注入到“modal-body”div中，所以如果我将页眉和页脚放在部分视图中，它会将它们放在正文中。但事实并非如此。我猜是因为引导精灵正在构建整个模式并正确排序？
因为你的modal-container 是你有页眉和页脚的外部div。来自的响应将覆盖其现有内容。
这是有道理的。当我想象时，我一直认为它是在注入体内，但它是针对容器的。好，谢谢。输入一个答案，以便我标记它。

标签： asp.net-mvc twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

在返回部分视图内容时，您还需要包含页眉和页脚所需的相关标记。根据您提出的请求，您的局部视图可能有不同的按钮。有些可能只有“保存”按钮，有些可能只有“删除”按钮和代码当你点击那些按钮时执行的也不同。

<div class="modal-content">
    <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" id="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
       <p>Some contet for the modal </p>
    </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 changes</button>
    </div>
</div>

它没有像你想象的那样工作的原因是，modal-container 是你有页眉和页脚的外部 div。来自服务器的响应将覆盖其现有内容。

【讨论】：