Archive for May, 2011

@Ajax.ActionLink doing a postback (MVC)

lately I was doing some MVC3 hands on, I have seen that Microsoft has introduced an Ajax helper “@Ajax” which allows you to utilitze Ajax based calls without writing extra JavaScript (great isn’t it?)

so place following code in our View (be aware that I am using Razor as my view engine)

@Ajax.ActionLink("Click here to make javascript call", "Home/Read", new AjaxOptions { HttpMethod="Get
   , InsertionMode=InsertionMode.Replace, UpdateTargetId=”div5”})

Nice and clean… upon click the above link will do a call back to Read method of our Home controller and will replace the result from that method in Div5.

Hit F5 and this will be rendered into your browser let’s inspect the resulting HTML

<a data-ajax=”true” data-ajax-method=”Get” data-ajax-mode=”replace” data-ajax-update=”#div34″ href=”/Home/Home/Read”>
Click here to make javascript call</a>

notice that behind the scene it’s using HTML5 style annotations… now click on the link and you will find that instead of doing Callback the link is simply doing a post back…. wow… what has gone wrong…. doing a little google on this suggest that we should include MicrosoftAjax.js and MicrosoftMvcAjax.js in our view but this doesn’t solves the problem… after some research I had figured that out you need to include mainly “jquery.unobtrusive-ajax.js” and it will work like a charm


kick it on

, ,