Ajax script not working on Form Submit?

Question

I have an issue, I am loading a partial page however I dont want the form on this page to redirect when I click the save button.

Not sure if I am using the script the correct way, I want to Post to the controller when I click submit but I want to be redirected back to the same page I was on ( AdminPanel/AdminProfile ) and not redirected to a different controller/view ( Account/Manage ).

AdminProfile View:

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

Not sure if my script should go in this view or stay in the partial view?

Controller:

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

Partialview with script:

@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>

Script in the view above:

@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")
}

Nothing seems to happen all I get is an empty page with {"redirectTo":"/AdminPanel/AdminProfile"} in it. Which is the url: http://localhost:57239/Account/Manage

Answer 1

you should change your code like these:

<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

You have already attached the AJAX call, but forgot to prevent the default submission event. So, use event.preventDefault() :

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