Why is Ajax.BeginForm replacing my entire page?

Question

Context: Asp.Net MVC3 w / Razor

I am trying to put the login form in the Razor layout (previously the master page) so that when the user logs out, he / she may be asked to log in without redirecting (as in RallyDev). So, I created a partial _LogOn.cshtml with all the necessary materials (username, etc.) Inside Ajax.BeginForm with UpdateTargetId, which points to a div that contains input controls in the form of ajax. The form returns to the AccountsController.RefreshLogOn action, but obviously the containing page can be displayed from another controller. The RefreshLogOn action returns a PartialView ("_ LogOn"). In any case, my expectation / desire is that only the controls inside this div are replaced. Instead, it happens that my page location changes to / Accounts / RefreshLogon, and the entire page is replaced with a partial one. Is there any other approach I should take?

Here is the relevant code:

_LogOn.cshtml

@{ using (Ajax.BeginForm("RefreshLogOn", "Accounts", new AjaxOptions { OnSuccess = "logonSucceeded", OnFailure = "logonFailed", HttpMethod = "Post", UpdateTargetId = "user-info" }, new { @id = "refresh"})) { @Html.AntiForgeryToken() <div id="user-info"> <p>Your session has expired.</p> <div class="error">@Html.ValidationSummary()</div> <table> <tr> <td>Username:</td> <td>@Html.TextBoxFor(model => model.UserName)</td> </tr> <tr> <td>Password:</td> <td>@Html.PasswordFor(model => model.Password)</td> </tr> <tr> <td>Remember Me:</td> <td>@Html.CheckBoxFor(model => model.RememberMe)</td> </tr> </table> </div> } } 

AccountsController

 public ActionResult RefreshLogOn (LogOnModel model) { if (ModelState.IsValid) { if (MembershipService.ValidateUser(model.UserName, model.Password)) { ...content elided... return PartialView("_LogOn"); } ModelState.AddModelError("", ErrorMessages.IncorrectUsernameOrPassword); } return PartialView("_LogOn", model); } 

Ajax.BeginForm -> formed form tag:

 <form action="/Accounts/RefreshLogOn" id="refresh" method="post" onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: &#39;Post&#39;, updateTargetId: &#39;user-info&#39;, onFailure: Function.createDelegate(this, logonFailed), onSuccess: Function.createDelegate(this, logonSucceeded) });"> 

Answer 1

Ajax.* Helpers in ASP.NET MVC 3 use unobtrusive jquery, so be sure to include the jquery.unobtrusive-ajax.js script in your view. You can also use FireBug to find out what is happening under the scene and why the form does not send an AJAX request.

Also UpdateTargetId = "form" seems suspicious, especially if your form has the identifier refresh : @id = "refresh" . Is there any other element inside your DOM with id="form" ? Maybe you mean UpdateTargetId = "refresh" ?

Answer 2

Note : my problem was the first, I referenced the ajax script file jquery.validate.unobtrusive.min.js instead of jquery.unobtrusive-ajax.js and the latest version of jquery did not work, only jquery-1.7.1.min.js worked for me.

i was trying to return the contents after a successful write

so here is the order:

 <script src="~/js/jquery-1.7.1.min.js"></script> <script src="~/js/jquery.validate.min.js"></script> <script src="~/js/jquery.unobtrusive-ajax.min.js"></script> 

A post by Darin and Richard Everett helped. hope helps.

Answer 3

I had the same problem and the solution was:

• Make sure UnobtrusiveJavaScriptEnabled is true.
• Add a link to jquery.unobtrusive-ajax.js as Darin advised.

Unfortunately, this does not help you, because you set UnobtrusiveJavaScriptEnabled to false, but you can help someone.

Answer 4

Late, but right. Be sure to specify the unobtrusive-ajax.js file, as well as the MicrosoftAjax.js and MicrosoftMvcAjax.js files in this order. Work

Answer 5

Note that if you use the Asp.Net template like me, it associates the file with the / jqueryval packages. Therefore you need to add

 @Scripts.Render("~/bundles/jqueryval") 

to the page.

Answer 6

In addition to checking for links to .js, also check if other form tags are displayed. In my case, I had another form tag on the main page with a default action that caused the whole page to reload.