[英]ASP MVC Bootstrap Modal in Partial View
As part of my shared layout, I'd like to have a modal dialog come up on a button click. 作为共享布局的一部分,我希望在单击按钮时出现一个模式对话框。
This is the my partial view with the modal dialog: 这是我的模态对话框的局部视图:
<ul class="nav navbar-nav navbar-right">
<li>
<button type="button" class="open-dialog btn" data-toggle="modal" data-target="#SettingsModal">Settings</button>
</li>
</ul>
<!-- Modal -->
<div class="modal fade" id="SettingsModal" tabindex="-1" role="dialog" aria-labelledby="SettingsModalLabel">
<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 aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Some text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a id="settings" class="btn btn-primary btn-sm" href="#">Save changes</a>
</div>
</div>
</div>
</div>
Script 脚本
<script type="text/javascript">
$(document).on("click", ".open-dialog", function() {
$('#settings').attr('href', $(this).data('url')); // update the link's url
});
</script>
And the partial view's controller: 和局部视图的控制器:
public class SettingsController : Controller
{
public ActionResult _Settings()
{
return PartialView("_Settings");
}
}
What I'm going for, is to have a button at the top of the page as part of the shared _Layout. 我要做的是在页面顶部有一个按钮,作为共享_Layout的一部分。 Similar to this: 与此类似:
When I click the 'Settings' button, a modal dialog is supposed to come up, but when I click it now, the screen just goes dark, and I can sort of hint the modal dialog in the background. 当我单击“设置”按钮时,应该会出现一个模式对话框,但是当我现在单击它时,屏幕只是变黑了,我可以在后台提示模式对话框。 I'm not sure where in the modal I've done something wrong. 我不确定模态中我在哪里做错了什么。 Any hint is appreciated! 任何提示表示赞赏!
Try this: 尝试这个:
$('#settings').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
url = button.data('url');
$.post(url, function (data) {
$('.model-body').html(data);
});
});
Action method: 动作方式:
public PartialViewResult Settings()
{
if (Request.IsAjaxRequest())
{
// retrive your model
return PartialView("_Settings");
}
return null;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.