Модальное всплывающее окно не работает

Question

Я унаследовал ASP.Net WebPages с проектом Razor, который мне нужно улучшить. На посту мне нужно проверить, заполнил ли пользователь анкету, и если нет, всплывающее диалоговое окно, предлагающее заполнить анкету, прежде чем перенаправлять его на страницу анкеты. Проверка условий работает так же, как и Reponse.Redirect. Всплывающего кода, который я получил отсюда, нет. Есть идеи. Вот код:

В главе документа у меня есть это:

<link href="~/Content/jquery-ui-1.12.1.css"  rel="stylesheet" type="text/css" >
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>

и в теле:

if (IsPost && !questionnaireCompleted)  // this works
{
<div id="dialog" title="Incomplete Questionnaire">
    <p>You must complete the questionnaire before you can save!</p>
</div>

<script type="text/javascript">
    $(function () {
        $("#dialog").dialog();
    });
</script>

    Response.Redirect("~/Sections/Questionnaire?id=" + id); // this works
}

Answer 1

Вы включаете эти сценарии и CSS:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Answer 2

Вам может потребоваться переключить тег div и тег script, так как скрипт / функция загружается до фактического модального режима.

Answer 3

Получил с помощью вспомогательной функции:

@helper SectionCheck( string id )
{
<div>
    <div id="dialog" title="Incomplete MRB Form" data-param="@id">
        <p>You must complete the questionnaire before you can save!</p>
    </div>

    <script type="text/javascript">
        $(function () {
            var ID = document.getElementById('dialog').getAttribute(['data-param']);
            $("#dialog").dialog({
                modal: true,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                        window.location = "MRB?id=" + ID;
                    }
                }
            });
        });
    </script>
</div>
}