ASP.NET MVC Bootstrap 模式无法正常工作

Question

我正在处理 ASP.NET MVC 项目。我需要向按钮添加 bootstrap 模式。我尝试这样做，但是单击按钮时不会出现模态。我检查了 id 名称和脚本是否有任何错误，但它们似乎没问题。可能是什么问题？

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

<!--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 局部视图

@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>

ASP.NET MVC Bootstrap 模式无法正常工作

ASP.NET MVC Bootstrap modal not working properly

c#

asp.net-mvc

bootstrap-modal