HowTo: AJAX Actionlink & ASP.NET MVC 3
In MVC framework there are some little helpers existing I´ve already written about in this blogpost – but in fact the functionality changed a little bit so here is an update for you.
Problem: AJAX Actionlink delivers new sides back
We have a standard MVC 3 Web Project and the following lines should create a link which is able to reload a view via AJAX and put it into the “Result”:
@Ajax.ActionLink("Foobar load", "Foobar", "Home", new AjaxOptions() { HttpMethod = "Get", UpdateTargetId = "Result" })
![]()
After pressing the button normally the View has to be reloaded via AJAX but there is no request send by AJAX. Why?
![]()
Javascript libraries are missing
In the standard – masterpage jQuery is already linked but the AJAX library is still missing. In this case MVC3 offers the MS AJAX libraries but we don´t need them anymore.
For AJAX we need the jQuery.unobtrusive-ajax.js (or the min.js) file!
![]()
<!DOCTYPE html>
<html>
<head>
...
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
</head>
...
Take a look into the HTML and you will find a little surprise!
![]()
If this looks different by everyone else: Important are also the following adjustments in the web.config (these are standard on every new project).
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
Unobtrusive Javascript? What?
What is the whole “unobtrusive Javascript” about? In fact it´s about keeping the side operable and no JS Eventhandler for example is integrated at the a-Tag. It will be integrated via the data-attribute.
Here is a Screenshot from a great presentation about the subject:
![]()
Unobtrusive JavaScript with jQuery
View more presentations from Simon Willison
Pure jQuery
Of course you don´t need to use AJAX helper it will also work with the jQuery Standard tools:
$(function() {
$('#mylink').click(function() {
$('#AjaxTestDiv').load(this.href);
return false;
});
});
Like always a great help: Stackoverflow ![]()




Shashi
July 1, 2011
Hi, im learning to put some Ajax requests, and coming under this issue when i click the link more than once, it does not make a request back to the server.
Currently my link is updating a partial view which is being returned by one of the actions (returning a randomly created class with random values). However when i click on the link again, somehow the browser remembers the resposnse and auto populates the div.
Is there some attribute required to force the browser to make a request?
Shashi
July 1, 2011
Never mind, found this link which demystifies this issue.
http://forums.asp.net/t/1681358.aspx/1?Disable+cache+in+Ajax+ActionLink+extension+method+in+asp+net+MVC
Html.ActionLink will still be cached by IE and not FF.
Jean Lopes
April 11, 2012
Hey, you download link for sample code is invalid. The files to download is not found!
Code Inside Team
April 12, 2012
Oh sorry – the link should be fixed now.
Jean Lopes
April 12, 2012
Thanks!! People as you made the world a better place