[英]ASP MVC Bootstrap Modal in Partial View
作為共享布局的一部分,我希望在單擊按鈕時出現一個模式對話框。
這是我的模態對話框的局部視圖:
<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 type="text/javascript">
$(document).on("click", ".open-dialog", function() {
$('#settings').attr('href', $(this).data('url')); // update the link's url
});
</script>
和局部視圖的控制器:
public class SettingsController : Controller
{
public ActionResult _Settings()
{
return PartialView("_Settings");
}
}
我要做的是在頁面頂部有一個按鈕,作為共享_Layout的一部分。 與此類似:
當我單擊“設置”按鈕時,應該會出現一個模式對話框,但是當我現在單擊它時,屏幕只是變黑了,我可以在后台提示模式對話框。 我不確定模態中我在哪里做錯了什么。 任何提示表示贊賞!
嘗試這個:
$('#settings').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
url = button.data('url');
$.post(url, function (data) {
$('.model-body').html(data);
});
});
動作方式:
public PartialViewResult Settings()
{
if (Request.IsAjaxRequest())
{
// retrive your model
return PartialView("_Settings");
}
return null;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.