【发布时间】：2018-07-05 22:40:36
【问题描述】：
我正在尝试从 bootstrap 3.3.7 更新到 4.0.0，但是带有部分视图的模态不想工作，我不断得到一个空的模态内容而不是部分视图，这里有我的代码使用引导程序 3.3.7
bootstratp 3.3.7 代码https://github.com/emiliano84/testModal/tree/master/WebApplication1 引导 4.0.0 代码 https://github.com/emiliano84/testModal/tree/bootsrap4/WebApplication1
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebApplication1</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="container body-content">
@RenderBody()
</div>
@Html.Partial("_Modal")
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
__Modal.cshtml
<div aria-hidden="true" aria-labelledby="modal-action-label" role="dialog" tabindex="-1" id="modal-action-id" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
首页/Index.cshtml
<a id="deleteModal" data-toggle="modal" data-target="#modal-action-id" class="btn btn-danger" asp-action="Modal">
<i class="glyphicon glyphicon-trash"></i> Delete
</a>
HomeController.cs
public IActionResult Modal()
{
return PartialView("_DeleteCategory");
}
首页/_DeleteCategory.cshtml
<form asp-action="" role="form">
<div class="modal-body form-horizontal">
Do you want to delete?
</div>
</form>
点击按钮后的bootsrap 3.7 html输出
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - WebApplication1</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/css/site.css">
</head>
<body class="modal-open">
<div class="container body-content">
<a id="deleteModal" data-toggle="modal" data-target="#modal-action-id" class="btn btn-danger" href="/Home/Modal">
<i class="glyphicon glyphicon-trash"></i> Delete
</a>
</div>
<div aria-hidden="true" aria-labelledby="modal-action-label" role="dialog" tabindex="-1" id="modal-action-id" class="modal fade in" style="display: block;">
<div class="modal-dialog">
<div class="modal-content"><form role="form" action="/" method="post">
<div class="modal-body form-horizontal">
Do you want to delete?
</div>
<input name="__RequestVerificationToken" value="CfDJ8KH27-v3I3xDokVa0ArDzjvcs251yDWEn8uK5vM6nFLVSh-l1byQUcPqFqYlR-naInUYVtOGq28Ib186Up7s2ftB5t7krZ1Ix43Agaohw3H0Fq9SbU2wdkdNS93kS-EUTnlmy6Rs3Pu1N4-efa1KO4g" type="hidden"></form>
</div>
</div>
</div>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js?v=ji3-IxbEzYWjzzLCGkF1KDjrT2jLbbrSYXw-AhMPNIA"></script>
<div class="modal-backdrop fade in"></div></body></html>
点击按钮后的Bootstrap 4 html
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - WebApplication1</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/css/site.css">
</head>
<body class="modal-open">
<div class="container body-content">
<a id="deleteModal" data-toggle="modal" data-target="#modal-action-id" class="btn btn-danger" href="/Home/Modal">
<i class="glyphicon glyphicon-trash"></i> Delete
</a>
</div>
<div aria-labelledby="modal-action-label" role="dialog" tabindex="-1" id="modal-action-id" class="modal fade show" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/popper.js/dist/popper.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js?v=ji3-IxbEzYWjzzLCGkF1KDjrT2jLbbrSYXw-AhMPNIA"></script>
<div class="modal-backdrop fade show"></div></body></html>
答案和问题
按照用户 mvermef 的建议添加此 js 脚本后，它可以工作...问题是？为什么使用 bs 3.3.7 也可以不使用？？？
$(function () {
// boostrap 4 load modal example from docs
$('#modal-container').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var url = button.attr("href");
var modal = $(this);
// note that this will replace the content of modal-content everytime the modal is opened
modal.find('.modal-content').load(url);
});
$('#modal-container').on('hidden.bs.modal', function () {
// remove the bs.modal data attribute from it
$(this).removeData('bs.modal');
// and empty the modal-content element
$('#modal-container .modal-content').empty();
});
});
【问题讨论】：
-
您分享的代码没有任何内容可以加载到模态对话框！
-
@Shyju 自己试试吧 :) github.com/emiliano84/testModal/tree/master/WebApplication1
标签： asp.net-mvc asp.net-core-mvc bootstrap-modal bootstrap-4