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, Feb 16 '14 at 09:54

score 2 · Answer 1 · answered May 13 '20 at 20:45

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".

score 1 · Answer 2 · answered Feb 23 '17 at 18:14

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

score 0 · Answer 3 · answered Feb 15 '14 at 20:18

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 '14 at 20:18

melvas

2,346
25
29

but ajax suppose to stay on the same page, why it renders me another page it is strange :( – Alnedru Feb 15 '14 at 20:26
For exampe i have a div expanded but after submit it is closed :/ is this a correct behaviour? – Alnedru Feb 15 '14 at 20:28
Yes, because your ajax replacing form: pdateTargetId = "result" – melvas Feb 15 '14 at 20:32
but this div is inside form – Alnedru Feb 15 '14 at 20:33
and when you returning Content("") you'll get a new page with this content, named by ActionResult – melvas Feb 15 '14 at 20:33
but i did as you said now i'm still redirected: /Index?ChangePasswordModel=value, and i notice that the reload is happening :/ – Alnedru Feb 15 '14 at 20:35
for ajax shouldn't i stay on the exact same page? – Alnedru Feb 15 '14 at 20:36
yes, RedirectToAction always redirecting, but if you whant to stay at the same page, you should to return current action view or partial view and then ajax replaced view block which you set up below with returned html – melvas Feb 15 '14 at 20:39
yes, i've tried to do that too, i tried to return a view or partial, if i return partial then i get again blank page :/ i'll show my view in a sec – Alnedru Feb 15 '14 at 20:41
You can see the full view – Alnedru Feb 15 '14 at 20:42
See this link please: http://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor – melvas Feb 15 '14 at 20:44
It seems like a quite short and simple tutorial for your issue – melvas Feb 15 '14 at 20:44
These might be a work around, but still not a solution, because i think this should also work ... i'm just curious what i'm doing wrong or is this the correct behaviour :( – Alnedru Feb 15 '14 at 20:49

Ajax form changes url

3 Answers3