ASP.. NET MVC引导模式不能正常工作

Question

我正在做一个ASP。. NET MVC项目。我需要添加一个引导模态按钮。我试着这样做，但当按钮被点击时，模式不会出现。我检查了id名称和脚本的任何错误，但他们似乎是好的。有什么问题吗?

这是我在_Layout页面上添加的引导链接。

<!--Head section-->
<link href="~/Areas/Dashboard/Content/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />    
<link href="~/Areas/Dashboard/Content/css/simple-sidebar.css" rel="stylesheet" />
<link href="~/Areas/Dashboard/Content/vendor/fontawesome/css/all.css" rel="stylesheet" />
<script src="~/Areas/Dashboard/Content/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!--Body section--> 
<!-- /#wrapper -->
<script src="~/Areas/Dashboard/Content/vendor/jquery/jquery.min.js"></script>

这是索引页代码。

<!--Create button-->

<button id="createButton" class="btn btn-outline-success" type="button" data-toggle="modal" data-target="#actionModal">
Create
</button>
<div class="modal fade" id="actionModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
</div>
</div>
<!--Create button script-->
<script>
$("#createButton").click(function () {
$.ajax({
url: '@Url.Action("Action", "AccomodationTypes")'
})
.done(function (response) {
$("#actionModal .modal-dialog").html(response);
});
});
</script>

_Action PartialView

@if (Model != null)
{
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Create Accomodation Type
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form id="actionForm">
<div class="form-group">
<label>Name</label>
<input type="text" name="Name" class="form-control" placeholder="Enter Accomodation Type Name...">
</div>
<div class="form-group">
<label>Description</label>
<textarea name="Description" class="form-control" placeholder="Enter Accomodation Type Description...">

</textarea>
</div>
</form>
<div id="errorDiv">
</div>
</div>
<div class="modal-footer">
<button type="button" id="actionButton" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
<script>
$("#actionButton").click(function () {
$.ajax({
debugger;
url: '@Url.Action("Action", "AccomodationTypes")',
type: "post",
data: $("actionForm").serialize()
})
.done(function (response) {
if (response.Success)
{
location.reload();
}
else
{
$(".errorDiv").html(response.Message)
}
});
});
</script>
}

Answer 1

有点好笑，但我自己想出了答案。

步骤1:在_Layout页面的标题部分添加以下链接

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

步骤2:从@if函数中获取_Action页面中的脚本

@if (Model != null)
{
<!-- content -->
}
<script>
$("#actionButton").click(function () {
$.ajax({
url: '@Url.Action("Action", "AccomodationTypes")',
type: "post",
data: $("actionForm").serialize()
})
.done(function (response) {
if (response.Success)
{
location.reload();
}
else
{
$(".errorDiv").html(response.Message)
}
});
});
</script>

步骤3:在Index页面中，编写调用和呈现Action方法的代码

<div class="modal fade" id="actionModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
@{ Html.RenderAction("Action"); }
</div>
</div>