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

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" })

image

After pressing the button normally the View has to be reloaded via AJAX but there is no request send by AJAX. Why?

image

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!

image

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

image

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:

image

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]


blog comments powered by Disqus