AjaxExtensions.BeginForm doesn't work. Really?

Home

Source: own resources, Authors: Agnieszka and Michał Komorowscy

The goal of using Ajax is to communicate with the server asynchronously without reloading the entire page. Specifically AjaxExtensions.BeginForm can be used to updated a selected part of a web page. It is relatively easy in use but can be also troublesome. Especially, when we try to apply it in an application which wasn't using Ajax earlier. I decided to wrote this short technical post because recently I came across the following issue the few times:

AjaxExtensions.BeginForm redirects a user to a new page instead of refreshing a fragment of a current one.

This problem has an easy explanation. Under the hood AjaxExtensions.BeginForm uses Java Script library called Microsoft jQuery Unobtrusive Ajax. The issue is that this library is not installed by default if we create a new project. It's easy to forget about it.

If you have the described problem:

• Check in packages.config file contains Microsoft.jQuery.Unobtrusive.Ajax package.
• Check if jquery.unobtrusive-ajax.js file is referenced in html e.g.: <script src="/scripts/jquery.unobtrusive-ajax.js"></script>
• If you use bundles checik if jquery.unobtrusive-ajax.js was included in a bundle e.g.:

  public static void RegisterBundles(BundleCollection bundles)
  {
     ...
     var js = new ScriptBundle("~/bundles/MyBundle").Include("~/Scripts/jquery.unobtrusive-ajax.js");
     ...
  }

• Besides, check if a bundle with jquery.unobtrusive-ajax.js is rendered properly e.g.:

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