MVC3 - Ajax actionlink - OnBegin, onComplete

Question

Using MVC3, C # and Razor View Engine: I have a form that has an Ajax Action link. In the parameters, I'm trying to specify the OnBegin and OnComplete javascript function calls. In this question, I took out the meat of the functions and simply added warnings so that I could check that the functions that get caught. What I really want to do with these functions is to use $ .blockUI for the duration of the ajax call.

The corresponding code is as follows:

@Ajax.ActionLink("my test link", "myAction", new { Controller = "myController" }, new AjaxOptions { OnBegin = "ajaxStart", OnComplete = "ajaxStop" }) <script type="text/javascript"> function ajaxStart() { alert("start"); } function ajaxStop() { alert("stop"); } </script> 

For some reason, two functions are never called as indicated. I tried it with and without parentheses, for example:

 @Ajax.ActionLink("my test link", "myAction", new { Controller = "myController" }, new AjaxOptions { OnBegin = "ajaxStart()", OnComplete = "ajaxStop()" }) 

None of them work.

Any ideas?

Thank you, Tony

Answer 1

Make sure you include the following script page in the page:

 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 

and that you included unobtrusive ajax in your web.config:

 <appSettings> ... <add key="UnobtrusiveJavaScriptEnabled" value="true" /> </appSettings> 

In ASP.NET MVC 3, unobtrusive javascript is used with jQuery, so if you do not include the correct scripts, the HTML5 data attributes that are emitted by the html helpers are not interpreted and the AJAX request is not sent.

Answer 2

You can try to place the <script> block before calling the Ajax.ActionLink method. Use this syntax for ajax link:

 @Ajax.ActionLink("my test link", "myAction", "myController", new AjaxOptions { OnBegin = "ajaxStart", OnComplete = "ajaxStop" }) 

and don't forget to put jquery.unobtrusive-ajax.min.js in your view or in _Layout.cshtml

 <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>