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

t

私は自分の問題を自分で解決しました。これがコードです。ダイアログ ボックスを作成する同じスクリプトに .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 に答える