Модал mvc теряет свой стиль при сбое отправки - PullRequest
0 голосов
/ 08 октября 2019

У меня есть раздел в родительской форме, который объявлен как модальный. Первоначально, модальный режим отображается, как и ожидалось, однако, после того, как я нажимаю кнопку «Отправить» в форме, он попадает в сообщение о моем методе контроллера mvc, как и ожидалось. Внутри контроллера может возникнуть ошибка, и в этот момент я добавляю ошибку в свойство оповещения моих моделей и возвращаю представление. Форма и ошибка отображаются, но, кажется, потерял все стили. Изначально модал показывался как частичное отображение, но в контроллере я возвращал его как представление вместо частичного представления, так что думал, что это может быть проблемой, но это не имело никакого значения. Итак, я подумал, что это потому, что основная таблица стилей, в которой нуждается модал, объявлена ​​в родительском элементе, и поскольку я использую модал, возможно, при возвращении назад на таблицу стилей больше не ссылаются, поэтому я явно сослался на таблицу стилейв модальном, но это тоже не имеет никакого значения. Сейчас я немного растерялся относительно того, что это может быть.

1 Ответ

0 голосов
/ 08 октября 2019

Представление отображается после вызова действия GET. Bootstrap модал используется. В модальном режиме есть кнопка отправки, которая вызывает POST, и вызывается действие контроллера, помеченное как HTTPPost. После публикации стиль применяется повторно.

Вид

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index12</title>
    <style type="text/css">
        .keepStyle {
            background-color: antiquewhite;
            font: italic small-caps bold 44px Georgia, sans-serif;
        }
    </style>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

</head>
<body>
    @*https://getbootstrap.com/docs/4.3/components/modal/*@
    <div class="keepStyle">This div style remains after postback</div>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
    </button>
    @using (Html.BeginForm())
    {
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">(Post)Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    }
</body>
</html>

Контроллер

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Index12()
    {
        return View();
    }

    public ActionResult Index12(int? id)
    {
        return View();
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...