Bootstrap 4 个模态弹出按钮功能被可点击的 <tr> 元素阻止
Bootstrap 4 modal popup button functionality prevented by clickable <tr> element
我有以下用于简单库存管理应用程序的 GUI：
我的问题是... <tr> 元素的 @Url.Action(...) 阻止删除（垃圾桶）按钮弹出 bootstrap 模式。该页面导航到行项目 "Details" 页面。但是，如果模式 没有导航离开，它似乎会 弹出。
Table 行标记：
<tr onclick="location.href = '@(Url.Action("Action", "Controller", new { id = item.ItemID }))'" class="inventory-row">
... <!-- Item Info -->
</tr>
删除按钮标记：
@Html.ActionLink("<i class='fas fa-trash-alt'></i>", "#", null, new { @class = "btn btn-danger", @data_toggle = "modal", @data_target = "#DeleteConfirmationModal" })
Tried/Alt 删除按钮标记：
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fas fa-pencil-alt"></i>
</button>
我的目标是弹出一个简单的 "Are you sure you want to delete item?" 模式。
如何让我的删除按钮弹出 bootstrap 模式，同时保持单击 table 行转到项目 "Details" 页面的功能？
我更愿意使用剃须刀语法来完成此操作，但你知道这句话......在一天结束时，我只需要一些有用的东西。
万一它有帮助...this question is how I got the edit (pencil) button to function properly and this question 是我如何在页面未离开时弹出模式。
编辑：
我认为编辑（铅笔）按钮之所以有效，是因为它在 <tr> 元素有机会导航到详细信息页面之前导航到项目编辑页面。删除（垃圾桶）按钮会弹出嵌套在同一页面上的模式，因此允许 <tr> 元素导航到详细信息页面。
我需要重新评估我的界面设计吗？或者是否可以让除最后一个 <td> 元素之外的所有元素都可点击，从而有效地消除按钮中的冲突？
编辑 2：
这是 table 标记的 link：link
编辑 3：
控制器中的删除方法：
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
try
{
Item.RemoveItem(id);
return RedirectToAction("Index");
}
catch
{
return View();
}
}
此标记可以工作，但您需要提供模态 ID：
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fas fa-pencil-alt"></i>
</button>
不知道你是不是把ID弄错了...
编辑：
我明白了，我认为这是因为你正在使用 <button> 而我遇到了同样的问题。
试试这个标记：
<a href="#" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fas fa-pencil-alt"></i>
</a>
编辑：
哦，我明白你的意思了，是的，触发的是你的 <tr> 事件。将此添加到您的按钮单击事件：
event.stopPropagation();
文档：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
所以看看你的代码，既然你有一个编辑按钮，你应该添加一个查看按钮并从 <tr> 标签中删除操作 link 并将其移动到一个按钮。这将阻止页面在整行的 onclick 事件中导航。通过右侧的 3 个按钮，用户可以知道如何单击而不是让整行都可以单击。
EDIT:
所以我设置了以下内容，就好像它是在页脚后加载 jQuery 的 MVC，在页面中加载脚本时遇到问题，因为它会在多行按钮上出错。我从来都不是 e.stopPropagation() 的粉丝，因为它总是在页面上引起其他问题，但是这个页面上的接缝没有其他 jQuery 被称为它应该工作。这是一个有效的 example.
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<table>
<tbody>
<tr onclick="location.href = 'https://www.google.com'" class="inventory-row">
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
<td>
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fa fa-trash"></i>
</button>
</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
<tr onclick="location.href = 'https://www.google.com'" class="inventory-row">
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
<td>
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fa fa-trash"></i>
</button>
</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="DeleteConfirmationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
TEST TEXT...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="/src/index.js"></script>
</body>
</html>
对于脚本：
将脚本放在它自己的文件中，这里我把它放在 index.js 中。
将其包含在 jquery 脚本加载下的布局中：
@RenderSection("Scripts",false/*required*/)
在视图中包含文件：
@section Scripts
{
<script src="@Url.Content("~/Scripts/index.js")"></script>
}
index.js:
$(".btn-warning").click(function (e) {
e.stopPropagation()
let target = $(this).data('target')
$(target).modal('show')
})
$(".btn-danger").click(function (e) {
e.stopPropagation()
let target = $(this).data('target')
$(target).modal('show')
})
由于垃圾按钮在 tr 内，您可以尝试的一件事是处理垃圾按钮本身的点击事件并阻止事件向上传播。我假设您使用的是 bootstrap，因此以下解决方案使用的是 jQuery。这应该适用于 button 或 ActionLink，但通常当您使用 <a> 时，您希望使用该锚点的 href 作为 data-target 的占位符。我决定使用 button。所以在你html
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fas fa-trash-alt"></i>
</button>
在你的 javascript:
$(document).ready(function() {
$(".btn.btn-danger").click(function(e) {
e.stopPropagation()
let target = $(this).data('target')
$(target).modal('show')
})
})
这是一个演示：
https://www.bootply.com/paKZLt8L94
如何在 MVC 中实现这个
在您的视图中添加防伪令牌（将下面的 ControllerName 替换为您的 Controller）
// The purpose of this form is to create a Anti-forgery token
// needed by the controller. Insert this anywhere in your html
@using (Html.BeginForm("DeleteConfirmed", "ControllerName", FormMethod.Post, new { id = "delete-forklift-form" }))
{
@Html.AntiForgeryToken()
<input type="hidden" id="forklift-Id" name="id" value="" />
}
在您的视图中的某处添加模态标记（最后没问题）
<!-- Modal -->
<div class="modal fade" id="DeleteConfirmationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete this item?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="delete-confirm" type="button" class="btn btn-primary">Delete</button>
</div>
</div>
</div>
</div>
将项目 ID 作为 data-attribute 添加到您的按钮：
// We need this ID to be passed to the delete action
// This is the foreach statement in you view from the pastebin link
@foreach(var item in Model.ForkliftStockInventoryList)
{
// ... rest of the stuff
<button type="button" class="btn btn-danger" data-fid="@item.ForkliftID" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fas fa-trash-alt"></i>
</button>
}
将您的 JavaScript 包裹在脚本块中
将修改后的 JavaScript 代码放在视图的末尾：
@section Scripts{
<script>
$(document).ready(function () {
// handler for the trash button
$(".btn.btn-danger").click(function (e) {
e.stopPropagation()
let target = $(this).data('target')
let forkliftId = $(this).data('fid')
// update the forklift to delete in the hidden field
$('#forklift-Id').val(forkliftId)
$(target).modal('show')
})
// handler for the delete confirmation on the modal
$('#delete-confirm').click(function () {
$('#delete-forklift-form').submit()
})
})
</script>
}
在您的 _Layout 视图中，您在使用后渲染 jQuery 这就是 none 的 jQuery 东西起作用的原因。将 @RenderSection("scripts", required: false) 推到最后，以便布局中的所有脚本在每个视图中的脚本之前呈现。将 Forklift 索引视图中的 <script>...</script> 包装在 Scripts 块中非常重要（见上文）
改变
@RenderSection("scripts", required: false)
@*<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>*@
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
至
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
@RenderSection("scripts", required: false)
// RenderSection scripts at the end
我有以下用于简单库存管理应用程序的 GUI：
我的问题是... <tr> 元素的 @Url.Action(...) 阻止删除（垃圾桶）按钮弹出 bootstrap 模式。该页面导航到行项目 "Details" 页面。但是，如果模式 没有导航离开，它似乎会 弹出。
Table 行标记：
<tr onclick="location.href = '@(Url.Action("Action", "Controller", new { id = item.ItemID }))'" class="inventory-row">
... <!-- Item Info -->
</tr>
删除按钮标记：
@Html.ActionLink("<i class='fas fa-trash-alt'></i>", "#", null, new { @class = "btn btn-danger", @data_toggle = "modal", @data_target = "#DeleteConfirmationModal" })
Tried/Alt 删除按钮标记：
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fas fa-pencil-alt"></i>
</button>
我的目标是弹出一个简单的 "Are you sure you want to delete item?" 模式。
如何让我的删除按钮弹出 bootstrap 模式，同时保持单击 table 行转到项目 "Details" 页面的功能？
我更愿意使用剃须刀语法来完成此操作，但你知道这句话......在一天结束时，我只需要一些有用的东西。
万一它有帮助...this question is how I got the edit (pencil) button to function properly and this question 是我如何在页面未离开时弹出模式。
编辑：
我认为编辑（铅笔）按钮之所以有效，是因为它在 <tr> 元素有机会导航到详细信息页面之前导航到项目编辑页面。删除（垃圾桶）按钮会弹出嵌套在同一页面上的模式，因此允许 <tr> 元素导航到详细信息页面。
我需要重新评估我的界面设计吗？或者是否可以让除最后一个 <td> 元素之外的所有元素都可点击，从而有效地消除按钮中的冲突？
编辑 2：
这是 table 标记的 link：link
编辑 3：
控制器中的删除方法：
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
try
{
Item.RemoveItem(id);
return RedirectToAction("Index");
}
catch
{
return View();
}
}
此标记可以工作，但您需要提供模态 ID：
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fas fa-pencil-alt"></i>
</button>
不知道你是不是把ID弄错了...
编辑：
我明白了，我认为这是因为你正在使用 <button> 而我遇到了同样的问题。
试试这个标记：
<a href="#" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fas fa-pencil-alt"></i>
</a>
编辑：
哦，我明白你的意思了，是的，触发的是你的 <tr> 事件。将此添加到您的按钮单击事件：
event.stopPropagation();
文档：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
所以看看你的代码，既然你有一个编辑按钮，你应该添加一个查看按钮并从 <tr> 标签中删除操作 link 并将其移动到一个按钮。这将阻止页面在整行的 onclick 事件中导航。通过右侧的 3 个按钮，用户可以知道如何单击而不是让整行都可以单击。
EDIT:
所以我设置了以下内容，就好像它是在页脚后加载 jQuery 的 MVC，在页面中加载脚本时遇到问题，因为它会在多行按钮上出错。我从来都不是 e.stopPropagation() 的粉丝，因为它总是在页面上引起其他问题，但是这个页面上的接缝没有其他 jQuery 被称为它应该工作。这是一个有效的 example.
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<table>
<tbody>
<tr onclick="location.href = 'https://www.google.com'" class="inventory-row">
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
<td>
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fa fa-trash"></i>
</button>
</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
<tr onclick="location.href = 'https://www.google.com'" class="inventory-row">
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
<td>
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fa fa-trash"></i>
</button>
</td>
<td>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="DeleteConfirmationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
TEST TEXT...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="/src/index.js"></script>
</body>
</html>
对于脚本： 将脚本放在它自己的文件中，这里我把它放在 index.js 中。 将其包含在 jquery 脚本加载下的布局中：
@RenderSection("Scripts",false/*required*/)
在视图中包含文件：
@section Scripts
{
<script src="@Url.Content("~/Scripts/index.js")"></script>
}
index.js:
$(".btn-warning").click(function (e) {
e.stopPropagation()
let target = $(this).data('target')
$(target).modal('show')
})
$(".btn-danger").click(function (e) {
e.stopPropagation()
let target = $(this).data('target')
$(target).modal('show')
})
由于垃圾按钮在 tr 内，您可以尝试的一件事是处理垃圾按钮本身的点击事件并阻止事件向上传播。我假设您使用的是 bootstrap，因此以下解决方案使用的是 jQuery。这应该适用于 button 或 ActionLink，但通常当您使用 <a> 时，您希望使用该锚点的 href 作为 data-target 的占位符。我决定使用 button。所以在你html
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fas fa-trash-alt"></i>
</button>
在你的 javascript:
$(document).ready(function() {
$(".btn.btn-danger").click(function(e) {
e.stopPropagation()
let target = $(this).data('target')
$(target).modal('show')
})
})
这是一个演示：
https://www.bootply.com/paKZLt8L94
如何在 MVC 中实现这个
在您的视图中添加防伪令牌（将下面的 ControllerName 替换为您的 Controller）
// The purpose of this form is to create a Anti-forgery token
// needed by the controller. Insert this anywhere in your html
@using (Html.BeginForm("DeleteConfirmed", "ControllerName", FormMethod.Post, new { id = "delete-forklift-form" }))
{
@Html.AntiForgeryToken()
<input type="hidden" id="forklift-Id" name="id" value="" />
}
在您的视图中的某处添加模态标记（最后没问题）
<!-- Modal -->
<div class="modal fade" id="DeleteConfirmationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete this item?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="delete-confirm" type="button" class="btn btn-primary">Delete</button>
</div>
</div>
</div>
</div>
将项目 ID 作为 data-attribute 添加到您的按钮：
// We need this ID to be passed to the delete action
// This is the foreach statement in you view from the pastebin link
@foreach(var item in Model.ForkliftStockInventoryList)
{
// ... rest of the stuff
<button type="button" class="btn btn-danger" data-fid="@item.ForkliftID" data-toggle="modal" data-target="#DeleteConfirmationModal">
<i class="fas fa-trash-alt"></i>
</button>
}
将您的 JavaScript 包裹在脚本块中
将修改后的 JavaScript 代码放在视图的末尾：
@section Scripts{
<script>
$(document).ready(function () {
// handler for the trash button
$(".btn.btn-danger").click(function (e) {
e.stopPropagation()
let target = $(this).data('target')
let forkliftId = $(this).data('fid')
// update the forklift to delete in the hidden field
$('#forklift-Id').val(forkliftId)
$(target).modal('show')
})
// handler for the delete confirmation on the modal
$('#delete-confirm').click(function () {
$('#delete-forklift-form').submit()
})
})
</script>
}
在您的 _Layout 视图中，您在使用后渲染 jQuery 这就是 none 的 jQuery 东西起作用的原因。将 @RenderSection("scripts", required: false) 推到最后，以便布局中的所有脚本在每个视图中的脚本之前呈现。将 Forklift 索引视图中的 <script>...</script> 包装在 Scripts 块中非常重要（见上文）
改变
@RenderSection("scripts", required: false)
@*<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>*@
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
至
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
@RenderSection("scripts", required: false)
// RenderSection scripts at the end