Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

Home Interviews Explain how client-side events like OnSuccess, OnFailure, and OnBegin work in an AJAX form. – MindStick
Ask Question

1 Answers

ICSM Computer
ICSM Computer 28 Jul 2025
Report Abuse

In ASP.NET MVC, when using Ajax.BeginForm, client-side events like OnBegin, OnSuccess, and OnFailure let you hook into the AJAX request lifecycle so you can run JavaScript at specific moments during the request.

These events are part of the AjaxOptions object and are triggered automatically by the jQuery Unobtrusive Ajax library.

AJAX Lifecycle Overview

  • OnBegin → before the request is sent
  • OnSuccess → when a successful response is received (HTTP 200 OK)
  • OnFailure → when the server returns an error (like 400/500), or AJAX fails
  • OnComplete → after the AJAX call is finished (success or failure)

1. OnBegin

OnBegin = "onFormBegin" // function name

Triggered before the form is submitted.
You can use this to:

  • Show a loading spinner
  • Validate fields manually
  • Cancel submission by returning false

Example:

function onFormBegin() {
    console.log("Form is about to be submitted...");
    return true; // proceed
    // return false; // cancel AJAX request
}

2. OnSuccess

OnSuccess = "onFormSuccess" // function name

Triggered when the server returns a successful response (200 OK).
You can use this to:

  • Show a success message
  • Update the UI
  • Reset the form

Example:

function onFormSuccess(response) {
    console.log("Form submitted successfully.");
    $("#messageBox").text("Saved successfully!");
}

If the action returns HTML, it will also be inserted into the UpdateTargetId DOM element.

3. OnFailure

OnFailure = "onFormFailure" // function name

Triggered when:

  • The AJAX request fails (network/server issue)
  • The action returns a non-success status (like 500 Internal Server Error)

Example:

function onFormFailure(xhr, status, error) {
    console.log("Failed:", error);
    $("#errorBox").text("An error occurred. Please try again.");
}

How to Wire These Up

@using (Ajax.BeginForm("SaveData", "Home", new AjaxOptions
{
    OnBegin = "onFormBegin",
    OnSuccess = "onFormSuccess",
    OnFailure = "onFormFailure",
    UpdateTargetId = "resultDiv"
}, new { @id = "myForm" }))
{
    @Html.TextBox("Name")
    <input type="submit" value="Submit" />
}

Bonus: OnComplete

Not directly in AjaxOptions, but you can hook into global AJAX events:

$(document).ajaxComplete(function () {
    console.log("AJAX complete");
});

Notes

  • The handler names ("onFormSuccess") are just string names. Make sure those functions exist in JavaScript scope.
  • Always check the rendered HTML to ensure data-ajax-* attributes are correctly output.
MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md