What are the common data-ajax-* attributes used in an AJAX-enabled form, and what do they do?

Question

ICSM Computer · Answer

Theoretical overview of the commonly used data-ajax-* attributes in an
Ajax.BeginForm -enabled form in ASP.NET MVC:
Common data-ajax-* Attributes
Attribute
Purpose
data-ajax="true"
Enables AJAX submission for the form. Required to activate the feature.
data-ajax-method
HTTP method to use (GET, POST, etc.). Default is 
GET.
data-ajax-mode
How to insert the response (replace, before, 
after).
data-ajax-update
CSS selector (e.g., #divId) to inject the response HTML into.
data-ajax-url
Optional URL to override form action for the request.
data-ajax-begin
JavaScript function called before the AJAX request is sent.
data-ajax-success
JS function called when the request succeeds.
data-ajax-failure
JS function called when the request fails.
data-ajax-complete
JS function called after request completes (success or failure).
data-ajax-loading
Selector for an element to show/hide during the AJAX request.
data-ajax-confirm
Shows a confirmation dialog before sending the request.
Example
andlt;form data-ajax="true"
      data-ajax-method="POST"
      data-ajax-update="#resultDiv"
      data-ajax-mode="replace"
      data-ajax-success="onSuccess"
      data-ajax-failure="onFailure"
      data-ajax-begin="onBegin"andgt;
    ...
andlt;/formandgt;
Behind the Scenes
These attributes are processed by jquery.unobtrusive-ajax.js, which:Hooks form submissionSends AJAX request using jQueryInjects response into specified element

Attribute	Purpose
`data-ajax="true"`	Enables AJAX submission for the form. Required to activate the feature.
`data-ajax-method`	HTTP method to use (`GET`, `POST`, etc.). Default is `GET`.
`data-ajax-mode`	How to insert the response (`replace`, `before`, `after`).
`data-ajax-update`	CSS selector (e.g., `#divId`) to inject the response HTML into.
`data-ajax-url`	Optional URL to override form action for the request.
`data-ajax-begin`	JavaScript function called before the AJAX request is sent.
`data-ajax-success`	JS function called when the request succeeds.
`data-ajax-failure`	JS function called when the request fails.
`data-ajax-complete`	JS function called after request completes (success or failure).
`data-ajax-loading`	Selector for an element to show/hide during the AJAX request.
`data-ajax-confirm`	Shows a confirmation dialog before sending the request.

forum

What are the common data-ajax-* attributes used in an AJAX-enabled form, and what do they do?

Anubhav Kumar

Can you answer this question?

1 Answers

Common `data-ajax-*` Attributes

Example

Behind the Scenes

Liked By