Ajax form changes url

Question

I have an ajax form:

@model Site.Models.ChangeModel
@using (Ajax.BeginForm("ChangePassword", "Account", new AjaxOptions { HttpMethod = "POST", UpdateTargetId="result" }, new { @class = "form-horizontal", role = "form", id = "changePasswordForm" }))
{
    <div id="result"></div>
    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true, Base.ChangesNotSubmitted, new { @class = "alert alert-danger" })

    @Html.EditorFor(m => m.ChangePasswordModel.OldPassword)

    @Html.EditorFor(m => m.ChangePasswordModel.Password)

    @Html.EditorFor(m => m.ChangePasswordModel.ConfirmPassword)

    <div class="form-group">
        <div class="col-sm-offset-6 col-sm-2">
            <button type="submit" class="btn btn-primary">@Base.ChangePassword</button>
        </div>
    </div>
}

With this action

   [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult ChangePassword(ChangePasswordModel model)
    {
        bool changed=false;
        if (ModelState.IsValid)
        {
            var result = UserManager.ChangePassword(User.Identity.GetUserId(), model.OldPassword, model.Password);
            if (result.Succeeded)
            {
                changed = true;
            }
        }

        return Content("changed");

    }

The form is located in the action Index, and i don't have view for ChangePassword!

After submitting the sform I get:

A blank page with content i've sent
Url is changed to .../ChangePassword?length=7 (before it was /index)

I have no idea where this length parameter comes from.

So my question is how to stay on the same view and to get the result in the correct div?

And anyone any idea where the parameter length comes from, i already has this issue few times with it.

Are you referencing all the necessary scripts? The most common problems I've seen with Ajax.BeginForm() is not referencing all scripts or referencing them in the wrong order. — HTX9
– HTX9, Commented Feb 16, 2014 at 9:54

secretwep · Accepted Answer · 2020-05-13 20:45:14Z

2

In case someone comes across this regarding the length parameter (your second question above), you can change the method call as follows:

@using (Ajax.BeginForm("ChangePassword", "Account", new AjaxOptions { HttpMethod = "POST", UpdateTargetId="result" }, new { @class = "form-horizontal", role = "form", id = "changePasswordForm" }))

//to:

@using (Ajax.BeginForm("ChangePassword", "Account", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId="result" }, new { @class = "form-horizontal", role = "form", id = "changePasswordForm" }))

The length parameter of /ChangePassword?length=7 will go away. The length comes from the number of characters in your controller name "Account".

answered May 13, 2020 at 20:45

secretwep

7061 gold badge13 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jitheesh S Khan · Accepted Answer · 2017-02-23 18:14:27Z

1

Please be sure that you have included the ajax javascript files, in the header.

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>>

answered Feb 23, 2017 at 18:14

Jitheesh S Khan

312 bronze badges

Comments

melvas · Accepted Answer · 2014-02-15 20:18:33Z

0

You have to use some like this:

return RedirectToAction("ViewName", [new { args } OR model]);

The ContentResult may be used to return to an action as plain text. This class is inherited from the "ActionResult" abstract class.

answered Feb 15, 2014 at 20:18

melvas

2,36626 silver badges29 bronze badges

13 Comments

Alnedru Over a year ago

but ajax suppose to stay on the same page, why it renders me another page it is strange :(

Alnedru Over a year ago

For exampe i have a div expanded but after submit it is closed :/ is this a correct behaviour?

melvas Over a year ago

Yes, because your ajax replacing form: pdateTargetId = "result"

Alnedru Over a year ago

but this div is inside form

melvas Over a year ago

and when you returning Content("") you'll get a new page with this content, named by ActionResult

|

Collectives™ on Stack Overflow

Ajax form changes url

3 Answers 3

Comments

Comments

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related