Использование модального окна Bootstrap в качестве PartialView не будет отображаться на экране, но отображается в инструментах разработчика Chrome - PullRequest
Новая
       13

Использование модального окна Bootstrap в качестве PartialView не будет отображаться на экране, но отображается в инструментах разработчика Chrome

0 голосов
/ 07 июня 2019

Самое странное происходит со мной. Так что у меня есть родительская страница, которая в основном представляет собой список. На каждом элементе у меня есть кнопка удаления, которая вызвала бы модальное отображение в частичном представлении, чтобы подтвердить, хочет ли пользователь удалить его. Как видно из заголовка, он не появляется, но когда я использую инструменты Google Chrome Dev, я вижу, что модал действительно всплыл, но не отображается на экране.

Это мой модал с моей родительской страницы : 

<div class="modal fade" id="delete-modal">
    <div class="modal-dialog">
        <div class="modal-content" id="delete-association">
            @Html.Partial("_DeleteAssociationModal")
        </div>
    </div>
</div>

У меня есть этот маленький метод javascript, который запускается при нажатии кнопки удаления, чтобы вызвать мой контроллер и вернуть мне частичный модальный : 

function OpenModal(associationId) {
    $.ajax({
        type: "GET",
        data: { id: associationId },
        url: '@Url.Action("GetDeleteModal", "Associations")',
        success: function(data) {
            $('#delete-association').html(data);
            $('#delete-modal').modal('show');
        },
    })
};

Это метод, вызываемый в моем контроллере, который возвращает частичное: 

public ActionResult GetDeleteModal(int id)
    {
        var association = // getting the info for the object to be deleted

        return PartialView("_DeleteAssociationModal", association);
    }

Это так странно ... Как я уже сказал, я вижу модал в инструментах Chrome, но он не появляется ...

Помощь будет высоко ценится!

Спасибо

1 Ответ

0 голосов
/ 10 июня 2019

Кнопка, которая вызывала мой метод, на самом деле была тегом привязки.Я изменил это на кнопку и добавил: 

data-toggle="modal" data-target="#delete-modal"

к его свойствам, и это работало просто отлично!

Кредит переходит к @ Bosco

...