Part 95 - OnBegin, OnComplete, OnSuccess and OnFailure properties of AjaxOptions class

Suggested Videos 
Part 92 - Ajax with asp.net mvc
Part 93 - What is Ajax and why should we use it
Part 94 - Providing visual feedback using LoadingElementId AjaxOption



This is continuation to Part 94, Please watch Part 94 from the ASP.NET MVC tutorial before proceeding with this video.

Using the following 4 properties of the AjaxOptions class, we can associate JavaScript functions that get called on the client at different stages of an AJAX request/response cycle.
1. OnBegin - The associated JavaScript function is called before the action method is invoked
2. OnComplete - The associated JavaScript function is invoked after the response data has been instantiated but before the page is updated.
3. OnSuccess - The associated JavaScript function is invoked after the page is updated.
4. OnFailure - The associated JavaScript function is invoked if the page update fails.



We will continue with the example that we discussed in Part 94. 
1. When you click on "All" link, all the students will be loaded into the <div> element that has got id=divStudents.
2. At the moment, when you click on "Top 3" link, the data from the previous request is still present in "divStudents". Only when "Top 3" students become available, "divStudents" is updated with new data.
3. Our application requirement is to clear, "divStudents" element content, as soon as we click on any AJAX link and before the associated action method is invoked.

To achieve this, let's use "OnBegin" property of AjaxOptions class.
Step 1: The following JavaScript function, finds the "divStudents" and clear it's contents
function ClearResults() 
{
    $("#divStudents").empty();
}

Step 2: Associate ClearResults() function with "OnBegin" property of AjaxOptions class.
@Ajax.ActionLink("All", "All", 
    new AjaxOptions 
    {
      HttpMethod = "GET", 
      UpdateTargetId = "divStudents", 
      InsertionMode = InsertionMode.Replace, 
      LoadingElementId = "divloading",
      OnBegin = "ClearResults"
    })

Please Note:
OnBegin property can also be used to cancel the invocation of the action method. The JavaScript function that is associated with "OnBegin" property is invoked before the action method is invoked. So if that associated JavasSript function returns false, then the action method will not be invoked. Your JavaScript function may look something like this.
function Validate() 
{
    if (condition) 
    {
        return true;
    }
    else 
    {
        return false;
    }
} 

Let's now discuss an example of using "OnSuccess" property. Immediately after the page is updated with students data, we want to dispay the total number of rows retrieved using JavaScript alert.


To achieve this, let's use "OnSuccess" property of AjaxOptions class.
Step 1: Set id attribute for the table element in "_Student.cshtml" partial view
<table id="tableStudents" style="border:1px solid black; background-color:Silver">

Step 2: The following JavaScript function counts the total number of rows. 
function CountRows() 
{
    alert(($("#tableStudents tr").length - 1) + 'rows retrieved');
}

Step 3: Associate CountRows() function with "OnSuccess" property of AjaxOptions class.
@Ajax.ActionLink("All", "All", 
    new AjaxOptions 
    {
      HttpMethod = "GET", 
      UpdateTargetId = "divStudents", 
      InsertionMode = InsertionMode.Replace, 
      LoadingElementId = "divloading",
      OnSuccess = "CountRows"
    })