@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

"jquery-1.5.1.min.js"
"jquery.unobtrusive-ajax.min.js"

kick it on DotNetKicks.com

About these ads

, ,

  1. #1 by Usman Masood on June 29, 2011 - 1:46 am

    you are welcome Parag.

  2. #2 by Parag Nair on June 22, 2011 - 1:37 am

    Thank You so very much. I was going crazy with this and I virtually tried every other option, read forums (no right answer) event went to a point where i decided forget Microsoft’s Ajax.Actionlink and use JQuery instead and I came across your article. I am really grateful some one finally has the right answer.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: