How to update a div with Ajax.BeginForm AND execute a javascript function?

Question

I am updating a div with a partial view by using something like this:

<% using (Ajax.BeginForm("Action", "Controller",
               new { id=Model.id },
               new AjaxOptions
               {
                   UpdateTargetId = "divId",
                   InsertionMode = InsertionMode.InsertAfter,
               }))
   {  %>

and its working fine, the returned view gets appened to the div, however I now need to execute a javascript when the post is successful, so I thought: "easy, just add OnSuccess = "MyJsFunc()" " to the AjaxOptions, but after doing this, it stopped working! now the page is refreshed and only the returned partial view is rendered :(, I even tried with a simple Alert("Hi") and its nor working.. how can I get this to work?

(by the way I think this can be a dup of https://stackoverflow.com/questions/1994754/execute-javascript-after-loading-a-mvc-page-using-ajax-beginrouteform but that question got abandoned with no answer)

Answer 1

Any reason for not doing it the right way (after all we are in 2010)? Dump MS AJAX where it belongs along with all the Ajax.* helpers which depend on it and write proper code. While using MS AJAX in classic webforms could have been justified because of the UpdatePanels, etc... doing it in a new ASP.NET MVC application today, especially after Microsoft have fully embraced jQuery, seems like a bad idea.

So after the rant here's my recommendation:

<% using (Html.BeginForm("Action", "Controller", new { id = Model.id }) { %>

and then attach the submit handler unobtrusively using jquery in a separate file:

$(function() {
    $('form').submit(function() {
        $.ajax({
            url: this.action,
            type: this.method,
            success: function(result) {
                // feel free to execute any code 
                // in the success callback
                $('#result').html(result);
            }
        });
        return false;
    });
});

or using the excellent jquery form plugin:

$(function() {
    $('form').ajaxForm(function(result) {
        // feel free to execute any code 
        // in the success callback
        $('#result').html(result);
    });
});

Benefits of this approach:

• Unobtrusive
• Clear separation between markup and javascript
• Caching javascript files and decreasing bandwidth usage

Bonus benefit: no headaches.