0

MVC3 アプリケーションのポップアップ ログイン ボックスに JQuery UI ダイアログを使用しています。現在、ユーザーをログインさせ、親ページの「ログインステータス」divを更新し、失敗した場合はポップアップに検証エラーを表示するようにしています。ただし、ログインフォームでキャンセルボタンを押すと、ポップアップが閉じず、ログインに成功しても閉じません。誰かが私のコードに明らかに問題があるのを見ることができますか? どうもありがとう。

ログインボタンのクリックイベント:

$('a#login').click(function (e) {                    
var url = '@Url.Action("LogOnPartial", "Account")';
var dialog = $('<div id="ModalDialog" style="display:none"></div>').appendTo('body');
$.get('@Url.Action("LogOnPartial", "Account", null)', function (response) {
    dialog.html(response)
    dialog.dialog({
        bgiframe: true,
        modal: true,           
        width: 500,                       
        closeOnEscape: false,
        buttons: {
            "Submit": function () {
                $("#refresh").submit();
            },
            "Cancel": function () {
                $("#ModalDialog").dialog("close");
                // EDIT - This part now working - solution below:
                //dialog.dialog("close");
            }
        }
    });
});
});

ログインフォーム部分図

    @using (Ajax.BeginForm("LogOn", "Account", new AjaxOptions { OnSuccess = "success",  UpdateTargetId = "loginDialog" }, new { @id = "refresh"}))
    {

            <div class="editor-label">
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.UserName)
                @Html.ValidationMessageFor(m => m.UserName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.Password)
                @Html.ValidationMessageFor(m => m.Password)
            </div>
            <a href="@Url.Content("~/Account/ForgotPassword")">Forgot Password?</a>
            <div class="editor-label">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>
            <input type="submit" value="Log On" style="display:none" />
    }

</div>

<script type="text/javascript">
    function success(result) {
        if (result.success) {
            $('#loginStatus').load("@Url.Content("~/Account/LogOnStatus")");
            $(this).dialog('destroy').remove();
        } 
    }
</script>

必要に応じて、コントローラーのコードも投稿できます。基本的に、成功したjson success = true場合は を返し、そうでない場合は検証エラーのある部分ビューを返します。

4

3 に答える 3

2

ajax関数を実行した後thisはもはやダイアログではありません
IDで具体的なdivを指定するthisか、ダイアログを別の場所に変数に保存する必要があります

于 2012-10-05T10:51:50.277 に答える
1

これを試して：

    dialog.dialog({
        bgiframe: true,
        modal: true,           
        width: 500,                       
        closeOnEscape: false,
        buttons: {
            "Submit": function () {
                $("#refresh").submit();
                dialog.dialog("close");
            },
            "Cancel": function () {
                dialog.dialog("close");
            }
        }
    });
于 2012-10-05T10:46:22.927 に答える
0

回避策を見つけましたが、エラー コンソールに一時的にエラーが表示されるので、少しハッキリしています。この行の代わりに:

var dialog = $('<div id="ModalDialog" style="display:none"></div>').appendTo('body');

に変更しました

dialog = $('<div id="ModalDialog" style="display:none"></div>').appendTo('body');

これにより、変数がグローバルになり、部分ビューに引き継がれました。その後、使用できました

dialog.dialog('destroy');

腹立たしい問題 - とにかくすべての提案に感謝します。

于 2012-10-05T12:21:31.527 に答える