Модал получает правильный путь в контроллере, но не отображается

Question

У меня есть выпадающее меню с 2 вариантами, при выборе любого из них должен появиться модальный с содержимым файла, чтобы пользователь мог редактировать и сохранять изменения.

Я использовал точки останова, и я знаю, что процесс проходит через мой контроллер правильно, но модал не отображается.

Ниже приведено раскрывающееся меню в cshtml "Home"

<div class="dropdown" style="margin-left: 7px;">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Configuration
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item load-config" href="#" id="btn-config" data-id="config">Codecept</a>
                <a class="dropdown-item load-config" href="#" id="btn-json-config" data-id="steps-file">Step File</a>
            </div>
        </div>

Когда выбран вариант, я вызываю следующее jquery

$(".load-config").click(function () {
        var repository = $("#repositories").val();
        var connectionId = sessionStorage.getItem("connectionId");
        var branch = $("#branches").val();
        var file = $(this).data("id");
        $.ajax({ 
            type: "GET",
            data: { connectionId: connectionId, repositoryName: repository, branch: branch, file: file},
            url: '@Url.Action("GetCurrentConfiguration", "Home")',
            success: function (data) {
                codeMirrorEditor.setValue(data.content);
                $("#modal-code-editor").modal('show');
                $("#modal-title").html(data.title);
                setTimeout(function () {
                    codeMirrorEditor.refresh();
                }, 200);
            },
            error: function () {
                console.log("Error: could not cancel running test...")
            }
        });
    });

И ниже вы найдете cshtml для модального

<div id="modal-code-editor" class="modal fade" role="dialog" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="height: 768px;">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

<script>
    var t;
    $('#btn-config,#btn-json-config').click(function () {
        button = $(this).attr('id');
    });
    $("#btn-save-code").click(function (e) {
        var connectionId =  sessionStorage.getItem("connectionId");
        var filename = $("#modal-title").html();
        var contents = codeMirrorEditor.getValue();
        var repository = $("#repositories").val();
        var branch = $("#branches").val();
        var file = button;

        var token = $("#__AjaxAntiForgeryForm input").val();
        var dataWithToken = {
            __RequestVerificationToken: token,
            filename: filename,
            connectionId: connectionId,
            fileContents: contents,
            repositoryName: repository,
            branch: branch,
            file: file
        };

        $.ajax({
            type: "POST",
            data: dataWithToken,
            url: '@Url.Action("SaveFileContents", "Home")',
            success: function (data) {
                $("#modal-code-editor").modal('hide');
                $.growl.notice({ message: "File saved successfully" });
            },
            error: function () {
                $.growl.error({ message: "Saving file failed" });
            }
        });
    });
</script>