Asp.NET MVC AjaxOptions OnSuccess fires.. too early?

Question

I'd like to use the OnSuccess option of AjaxOptions passed as Ajax.BeginForm argument to "do something" once the response is completely received and DOM updated. As far as I can undestand from MSDN, this is what this option do.

In my application, OnSuccess script fires too early, immediately after the request is sent. I put to sleep the thread for a while, to better see the result. I supposed to see the OnSuccess script (an alert) fired after that sleep time, say, 2 seconds. I use Firebug to see what's happening under the hood, and all I see is: I click the button (submit inside the ajax form), alert is shown (2 seconds before expected), after 2 seconds firebug shows the request-response and nothing more happens.

Where I'm wrong?

Thanks in advance, mt

Some sample code, as correctly asked (I started a blank new solution using Asp.NET MVC template in VS):

Home/Index view:

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<div id="divPlaceholder">
<% 
    using (Ajax.BeginForm("DoLongTask", "Home", 
    new AjaxOptions() {
        UpdateTargetId = "divPlaceholder", 
        InsertionMode = InsertionMode.Replace,
        OnSuccess = "alert('onsuccess fired')"
    })) 
{
%>
<input type="submit" value="button" />
<% } %>
</div>
</asp:Content>

HomeController

public ActionResult DoLongTask()
{
    if (Request.IsAjaxRequest())
    {
        System.Threading.Thread.Sleep(2000);
        return View();
    }
    else
    {
        throw new NotSupportedException();
    }
}

I think this is enough to reproduce the behavior. An empty partial view can be used as DoLongTask view.

Answer 1

I have been looking in to this problem and it seems that the "On" events are not quite what they seem.

If you read this post http://stackoverflow.com/questions/1183973/how-is-onsuccess-measured-for-a-asp-net-mvc-actionlink you will see womp saying that the events may fire no matter what happens in the controller. I have also found this in the tests i did by adding all the "On" events to the AjaxOptions Object like this:

new AjaxOptions()
 {
     UpdateTargetId = "divPlaceholder",
     InsertionMode = InsertionMode.Replace,
     OnSuccess = "alert('OnSuccess')",
     OnBegin = "alert('OnBegin')",
     OnComplete = "alert('OnComplete')",
     OnFailure = "alert('OnFailure')"

 }

I have not used the AjaxOptions in any production code I've written but I have had great success with jQuery Ajax calls and the events firing at the correct times.

A tutorial on ASP.net MVC and jQuery Ajax can be found here and some examples of how to use events can be found in code on this question

Sorry I've not been able to fix your problem but I hope this alternative will help.

Answer 2

Not sure how helpful this will be but I am looking at doing something like this at the moment and have found if you call out to a function within the OnSucess then it will happen after the action method, for example:

using (Ajax.BeginForm("DoLongTask", "Home", 
    new AjaxOptions() {
        UpdateTargetId = "divPlaceholder", 
        InsertionMode = InsertionMode.Replace,
        OnSuccess = "function() { alert('onsuccess fired'); }"
    }))

Answer 3

OnSuccess is a property which takes the name of the function or the function as in the above case (not any statment). And AjaxOptions callsback the method for which name is provided, after success, failure, ... Hope this helps