How does the Ajax.BeginForm helper work in ASP.NET MVC?

Question

ICSM Computer · Answer

Instead of causing a full-page reload, a form that submits data to the server asynchronously (through AJAX) is created using the Ajax.BeginForm helper in ASP.NET MVC. It is a component of the jQuery Unobtrusive Ajax library from Microsoft.

Fundamental Syntax

@using (Ajax.BeginForm("ActionName", "ControllerName", new AjaxOptions
{
    HttpMethod = "POST",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "targetElementId",
    OnSuccess = "onSuccessCallback",
    OnFailure = "onFailureCallback"
}, new { @class = "form-class" }))
{
    @Html.TextBox("Name")
    <input type="submit" value="Submit" />
}

The Way It Operates

Create a <form> tag with:

data-ajax="true": instructs the jQuery Unobtrusive Ajax library to use the form submission and send it using AJAX.
Other configuration-related data-ajax-* attributes for configuration.
Instead of sending it via a conventional post, jQuery intercepts the form submission and sends it via XMLHttpRequest.

Handling of responses::

The DOM element indicated in UpdateTargetId is updated if the request is successful.
Callback functions like OnSuccess and OnFailure handle custom client-side logic.

AjaxOptions Properties

Property	Description
`HttpMethod`	GET or POST
`UpdateTargetId`	The ID of the HTML element to update with the response
`InsertionMode`	Specifies how the response is inserted (`Replace`, `InsertBefore`, `InsertAfter`)
`OnSuccess`	JavaScript function to call on success
`OnFailure`	JavaScript function to call on failure
`LoadingElementId`	Shows a loading indicator during the request

Requirements

To use Ajax.BeginForm, ensure you have the following scripts:

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

Also make sure bundling or layout files include jQuery.

Example HTML Output

From the helper:

<form data-ajax="true"
      data-ajax-method="POST"
      data-ajax-mode="replace"
      data-ajax-update="#targetElementId"
      action="/ControllerName/ActionName"
      method="post">
    ...
</form>

Common Pitfalls

Forgetting to include jquery.unobtrusive-ajax.js
Not enabling unobtrusive JavaScript (BundleConfig.EnableOptimizations)
AJAX form not working if data-ajax=true is missing (check rendered HTML)

interview

How does the Ajax.BeginForm helper work in ASP.NET MVC?

Can you answer this question?

1 Answers

Fundamental Syntax

The Way It Operates

AjaxOptions Properties

Requirements

Example HTML Output

Common Pitfalls