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 Smiley

[Download Sample Code]

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

About the author

Written by Code Inside Team

Learn more about our team.

7 Responses

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?
Reply
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.
Reply
Jean Lopes
April 11, 2012

Hey, you download link for sample code is invalid. The files to download is not found!
Reply
- Code Inside Team
  April 12, 2012
  
  Oh sorry – the link should be fixed now.
  Reply
Jean Lopes
April 12, 2012

Thanks!! People as you made the world a better place
Reply