26 April 2011 AJAX, ASP.NET, MVC3 CI Team

imageIn 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>
    <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>

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).

    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>

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() {
        return false;

Like always a great help: Stackoverflow Smiley

[Download Sample Code]