我正在尝试从 bootstrap 3.3.7 更新到 4.0.0，但是带有局部 View 的模态不工作，我一直得到一个空的模态内容而不是局部 View ，这是我的代码使用 bootstrap 3.3.7
bootstratp 3.3.7 代码 https://github.com/emiliano84/testModal/tree/master/WebApplication1 Bootstrap 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>
Home/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");
}
Home/_DeleteCategory.cshtml
<form asp-action="" role="form">
<div class="modal-body form-horizontal">
Do you want to delete?
</div>
</form>
bootsrap 3.7 html output after click on the button
<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 after click the button
<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>
bootstrap 3.3.7 visual result
bootstrap 4.0.0 visual result
Answer and Question
按照用户 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();
});
});
最佳答案
$(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();
});
});
<div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
<a class="btn btn-primary" asp-action="Create" data-target="#modal-container" data-toggle="modal">New Flight</a>
这几乎是您在 asp.net(标准或核心)中的模态所需的一切。适用于 BS 3.3.7 和 4.0
JavaScript 是重要的部分，它可以调用您的 Action Method 来告诉模态将您的 Partial 的内容推送到其中。
关于asp.net-mvc - asp.net mvc bootstrap 4 模态局部 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48463927/