ASP.NET MVC Bootstrap modal not working properly

Question

I'm working on an ASP.NET MVC project. I need to add a bootstrap modal to a button. I tried to do this, but the modal won't appear when the button is clicked. I checked the id names and the script for any errors, but they seem to be fine. What could be the problem?

Here are the bootstrap links I added on the _Layout page.

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

This is the Index page code.

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

Kind of funny, but I figured out the answer myself.

Step 1: Add the following links in the head section of the _Layout page

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

Step 2: Get the script in the _Action page out of the @if function

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

Step 3: In the Index page, write the code to invoke and render the Action method

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