1

我需要一些关于使用 ajax 进行验证的帮助。我的登录对话框有效，但它不处理成功或存在验证错误时发生的情况。我不确定我如何或在哪里实际创建 ajax 帖子（我对 jquery/Ajax 没有经验）

这是我的观点@model Models.LoginModel

    @{
        ViewBag.Title = "Log in";
    }

    <hgroup class="title">
    @*    <h1>@ViewBag.Title.</h1>*@
    </hgroup>

    <section id="loginForm" style="margin-left: 20px; border-width: 0px;">

    @using (Ajax.BeginForm("Login", new { ReturnUrl = ViewBag.ReturnUrl }, new AjaxOptions { HttpMethod = "Post" }, new { Id = "login_form" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)

        <fieldset>
            <legend>Log in Form</legend>
            <ol>
                <li>
                    @Html.LabelFor(m => m.UserName)
                    @Html.TextBoxFor(m => m.UserName)
                    @Html.ValidationMessageFor(m => m.UserName)
                </li>
                <li>
                    @Html.LabelFor(m => m.Password)
                    @Html.PasswordFor(m => m.Password)
                    @Html.ValidationMessageFor(m => m.Password)
                </li>
                <li>
                    @Html.CheckBoxFor(m => m.RememberMe)
                    @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
                </li>
            </ol>


        </fieldset>
        @*<p>
            @Html.ActionLink("Register", "Register") if you don't have an account.
        </p>*@
    }
    </section>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#dlgLogin").dialog({
            modal: true,
            autoOpen: true,
            draggable: true,
            resizable: true,
            title: "Login",

            buttons: {
                Login: function () {
                    $("#login_form").submit();

                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });


    });
</script>

这是我的控制器中的 loginpost 方法。

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Login(LoginModel model, string returnUrl)
        {
            if (ModelState.IsValid && WebSecurity.Login(model.UserName, model.Password, persistCookie: model.RememberMe))
            {
                //return RedirectToLocal(returnUrl);
                return Json(new { success = true });   
            }

            // If we got this far, something failed, redisplay form
            ModelState.AddModelError("", "The user name or password provided is incorrect.");
            return PartialView("LoginDialog",model);
        }
4

2 回答 2

0

首先，在您的表单声明中，这需要是：

new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "loginForm" }

因为它不知道提交时要替换什么。

顺便说一句：恕我直言，我认为你的结果应该是一样的，即如果你要返回视图，返回视图，如果你在处理 JSON，只处理 JSON。如果您只是想在成功时关闭对话框，请创建一个名为 Success 的视图，在成功时返回它并在该视图中植入必要的 JavaScript 来执行此操作。

返回不同类型的视图只意味着客户端需要一大堆额外的流程语句。那有意义吗？

希望这可以帮助。

于 2013-04-08T16:30:55.297 回答
0

吨

我自己解决了我的问题。这是代码。是否可以将 .ajax 函数放在创建对话框的同一脚本中？

<div id="dlgLogin">
        @model Models.LoginModel

        @{
            ViewBag.Title = "Log in";
        }

        <hgroup class="title">
        @*    <h1>@ViewBag.Title.</h1>*@
        </hgroup>

        <section id="loginForm" style="margin-left: 20px; border-width: 0px;">

        @using (Ajax.BeginForm("Login", new { ReturnUrl = ViewBag.ReturnUrl }, new AjaxOptions { HttpMethod = "Post" }, new { Id = "login_form" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)

            <fieldset>
                <legend>Log in Form</legend>
                <ol>
                    <li>
                        @Html.LabelFor(m => m.UserName)
                        @Html.TextBoxFor(m => m.UserName)
                        @Html.ValidationMessageFor(m => m.UserName)
                    </li>
                    <li>
                        @Html.LabelFor(m => m.Password)
                        @Html.PasswordFor(m => m.Password)
                        @Html.ValidationMessageFor(m => m.Password)
                    </li>
                    <li>
                        @Html.CheckBoxFor(m => m.RememberMe)
                        @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
                    </li>
                </ol>
                <input id="submit" type="submit" value="Log in" style="display:none"/>

            </fieldset>
            @*<p>
                @Html.ActionLink("Register", "Register") if you don't have an account.
            </p>*@
        }
        </section>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#dlgLogin").dialog({
                modal: true,
                autoOpen: true,
                draggable: true,
                resizable: true,
                title: "Login",

                buttons: {
                    Login: function () {
                        $("#login_form").submit();

                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });


        });
    </script>
    <script>
        $(function () {    
            $('#login_form').on('submit', function () {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        if (result.success) {
                            // We have a JSON object in case of success              
                            $('#dlgLogin').dialog("close");

                        } else {
                            // We have the partial with errors in case of failure
                            // so all we have to do is update the DOM

                            $('#dlgLogin').html(result);
                        }
                    }
                });
                return false;
            });
        });
    </script>
于 2013-04-08T16:34:48.763 回答