Bootstrap模态页眉和页脚未呈现 [英] Bootstrap modal header and footer not rendered
问题描述
我正在以引导程序模式显示编辑表单.使用asp mvc5，我将部分视图返回到引导模式窗口.表格显示出来，填满数据并发布.唯一的问题是页眉和页脚不显示.该代码显示在查看页面源代码"中，而不显示在Web开发人员检查器(Chrome浏览器)的元素"标签中.
I am displaying an edit form in a bootstrap modal. Using asp mvc5, I am returning a partial view into a bootstrap modal window. The form shows up, fills with data and posts just fine. Only issue is the header and footer do not display. The code shows up in "view page source" but not in the elements tab of the web dev inspector (chrome).
我打算在这一页上有多个不同的模态，所以我在_layout页面中使用占位符作为模态，然后传入不同的局部视图.
I plan to have multiple different modals on this one page, so I am using a placeholder in the _layout page for the modal, then passing in different partial views.
布局中的占位符:
<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>×</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>
部分视图(仅包含一个表单和模式取消按钮):
partial view (only contains a form and the modal cancel button):
<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-"标签:
Some js to add "data-" tags to the links:
$(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控制器仅返回部分:
mvc controller just returns the partial:
return PartialView("_EditOrchard", orchard);
推荐答案
返回部分视图内容时，还需要包括页眉和页脚所需的相关标记.根据您提出的要求，您的局部视图可能具有不同的按钮.有些可能只有一个" 保存 "按钮，有些可能只有一个" 删除 "按钮和代码单击这些按钮时执行的操作也不同.
You need to include the relevant markup needed for header and footer as well when returning the partial view content. Your partial view's might have different buttons based on the request you are making. Some may have only a "Save" button, some may have only a "Delete" button and the code to execute when you click on those buttons are also different.
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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.来自服务器的响应将覆盖该响应的现有内容.
The reason why it is not working as you thought is, modal-container is the outer div inside which you have header and footer. The response coming from server will overwrite the existing content of that.
这篇关于Bootstrap模态页眉和页脚未呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
