0

我在 MVC3 应用程序上使用 JQuery UI Dialog 弹出登录框。目前我已经让用户登录并刷新父页面上的“登录状态”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 回答