Question

我在bootstrap模式中显示编辑表单。使用asp mvc5，我将部分视图返回到bootstrap模式窗口。表单显示，填写数据和帖子就好了。唯一的问题是页眉和页脚不显示。代码显示在＆＃34;查看页面源＆＃34;但不在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要添加＆＃34;数据 - ＆＃34;标签链接：

$(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);

Answer 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-containe r是你有页眉和页脚的外部div。来自服务器的响应将覆盖该服务器的现有内容。

Bootstrap模式页眉和页脚未呈现

1 个答案: