Understanding AJAX Helpers in ASP.NET MVC

Understanding AJAX Helpers in ASP.NET MVC

01 Apr 2024
5 min read

AJAX Helpers: An Overview

AJAX Helpers are used to create AJAX-enabled elements like Ajax-enabled forms and links which perform requests asynchronously. AJAX Helpers are extension methods of the AJAXHelper class which exist in System.Web.Mvcthe namespace. In this MVC Tutorial, we will explore more about AJAX Helpers which will include unobtrusive AJAX HTML in Asp.net mvc, AjaxOptions in mvc, and various configuration options for AJAX Helpers. Consider our ASP.NET MVC Course for a better understanding of all MVC core concepts.

What is AJAX Helpers?

Element Example
AJAX-enabled link based on action/controller
@Ajax.ActionLink("Load Products", "GetProducts", new AjaxOptions {UpdateTargetId = "Products-container", HttpMethod = "GET" }) Output: <a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#Products-container" href="/Home/GetProducts">Load Products</a>

Unobtrusive AJAX

ASP.NET MVC supports unobtrusive Ajax which is based on jQuery. The unobtrusive Ajax means that you use helper methods to define your Ajax features, rather than adding blocks of code throughout your views.

Various configuration options for AJAX Helpers

The AjaxOptions class defines properties that allow you to specify callbacks for different stages in the AJAX request life cycle. There are following properties provided by the AjaxOptions class for AJAX helpers:

Specify the URL that will be requested from the server.
Specify a message that will be displayed in a confirm dialog to the end user. When a user clicks on the OK button in the confirmation dialog, the Ajax call performs.
Specify a JavaScript function name which is called at the beginning of the Ajax request.
Specify a JavaScript function name which is called at the end of the Ajax request.
Specify a JavaScript function name that is called when the Ajax request is successful.
Specify a JavaScript function name that is called if the Ajax request fails.
Specify the progress message container’s ID to display a progress message or animation to the end user while an Ajax request is being made.
Specify a time duration in milliseconds that controls the duration of the progress message or animation.
Specify the target container’s ID that will be populated with the HTML returned by the action method.
Specify the way of populating the target container. The possible values are InsertAfter, InsertBefore, and Replace (which is the default).

What is Cross Domain AJAX?

By default, web browsers allow AJAX calls only to your web application’s site of origin i.e. site hosted server. This restriction helps us to prevent various security issues like cross-site scripting (XSS) attacks. But, sometimes you need to interact with externally hosted API(s) like Twitter or Google. Hence to interact with these external API(s) or services your web application must support JSONP requests or Cross-Origin Resource Sharing (CORS). By default, ASP.NET MVC does not support JSONP or Cross-Origin Resource Sharing. For this, you need to do a little bit of coding and configuration.

What is AjaxOptions in MVC?

AjaxOptions Class

  • AjaxOptions has a Namespace called System.Web.Mvc.Ajax
  • It also has an Assembly called System.Web.Mvc.dll
  • It Represents option settings for running Ajax scripts in an ASP.NET MVC application.
  • It has its own constructor AjaxOptions() which initializes anew instance of the AjaxOptions class.

AjaxOptions Class Syntax:

public class AjaxOptions

AjaxOptions Method:

AjaxOptions Methods applies to MVC 5.0. AjaxOptions Class has a method named AjaxOptions.ToUnobtrusiveHtmlAttributes( ) Method which Returns the Ajax options as a collection of HTML attributes to support unobtrusive JavaScript.


public System.Collections.Generic.IDictionary ToUnobtrusiveHtmlAttributes ();

It returns the value as IDictionary<String,Object>


So in this article, we have learned Understanding AJAX Helpers in ASP.NET MVC. I hope you enjoyed learning these concepts while programming with Asp.Net. Feel free to ask any questions from your side. Your valuable feedback or comments about this article are always welcome. Level up your career in MVC with our ASP.Net Core Certification.


Q1. What is AJAX used for in MVC?

Ajax is the method of exchanging data with a server and updating parts of a web page, without reloading the entire page.

Q2. What is the difference between HTML helper and AJAX helper?

The HTML helper calls the controller action method synchronously (i.e entire page refresh) while the AJAX helper calls asynchronously

Q3. Why do we use AJAX instead of HTML?

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. 
Share Article
Batches Schedule
About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Self-paced Membership
  • 22+ Courses
  • 750+ Hands-On Labs
  • 300+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A
  • 10+ Real-world Projects
  • Career Coaching
  • Email Support
Upto 66% OFF

To get full access to all courses

Accept cookies & close this