Ajax腳本無法在Form Submit上運行？

Question

我有一個問題，我正在加載部分頁面，但是當我單擊“保存”按鈕時，我不希望該頁面上的表單重定向。

不確定我是否以正確的方式使用腳本，單擊提交時我想發布到控制器，但我想重定向回到我所在的同一頁面（ AdminPanel/AdminProfile ），而不是重定向到其他控制器/查看（ Account/Manage ）。

AdminProfile視圖：

                    <div id="tab-2" class="tab-pane">
                           @{Html.RenderPartial("~/Views/Account/Manage.cshtml");
                           }
                    </div>

不確定我的腳本是應該進入此視圖還是停留在局部視圖中？

控制器：

public ActionResult Manage(LocalPasswordModel model)
{
    //....
    return Json(new { redirectTo = Url.Action("AdminProfile", "AdminPanel") });
}

帶有腳本的Partialview：

@model LocalPasswordModel
@{
    ViewBag.Title = "Change Password";
}
<section class="hgroup">
    <div class="panel-body">       
        <ul class="breadcrumb pull-right top-right">
            <li>You're logged in as <strong>@User.Identity.Name</strong></li>
        </ul>
        <ul class="message-success">@ViewBag.StatusMessage</ul>
    @using (Html.BeginForm("Manage", "Account", FormMethod.Post, new { id = "SavePassword", @class = "form-horizontal" }))
    {
        <div class="social_sign">
            <h3>Change your password.</h3>
        </div>
                                        @Html.AntiForgeryToken()
                                        @Html.ValidationSummary()
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">Old Password</label>
                                            <div class="col-sm-10">
                                            @Html.PasswordFor(m => m.OldPassword, new { @class = "form-control" })
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">New Password</label>
                                            <div class="col-sm-10">
                                        @Html.PasswordFor(m => m.NewPassword, new { @class = "form-control"})
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">Confirm Password</label>
                                            <div class="col-sm-10">
                                                @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-12 col">
                                                <input type="submit" class="btn btn-primary pull-right" value="Change password" />
                                            </div>
                                        </div>

    }
    </div>
</section>

上方視圖中的腳本：

@section Scripts {
    <script>
        $('#SavePassword').submit(function () 
        {
            if ($(this).valid()) 
            {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) 
                    {
                        if (result.redirectTo) 
                        {
                            window.location.href = result.redirectTo;
                        } 
                        else 
                        {
                            $(".tab-2").html(result);
                        }
                    },
                    error: function () 
                    {

                    }
                });
          }
    })
    </script>
    @Scripts.Render("~/bundles/jqueryval")
}

似乎什么都沒發生，我得到的是一個空白頁面，里面有{"redirectTo":"/AdminPanel/AdminProfile"} 。 哪個網址： http://localhost:57239/Account/Manage

Answer 1

您應該像這樣更改代碼：

<script>
    $('#SavePassword').submit(function () 
    {
        if ($(this).valid()) 
        {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) 
                {
                    if (result.redirectTo) 
                    {
                        window.location.href = result.redirectTo;
                    } 
                    else 
                    {
                        $(".tab-2").html(result);
                    }
                },
                error: function () 
                {

                }
            });
      }

     return false;
    })
</script>

Answer 2

您已經附加了AJAX調用，但是忘記了阻止默認的提交事件。 因此，請使用event.preventDefault() ：

$('#SavePassword').submit(function (e) {
  e.preventDefault();
  // Rest of your code.
  if ($(this).valid())