11 April 2011 AJAX, ASP.NET MVC, HowTo Robert Muehsig

image

Im MVC Framework gibt es ein paar kleine Helferlein und über die AJAX Helper hatte ich bereits vor einiger Zeit geschrieben - allerdings hat sich die Funktionalität ein klein wenig geändert, daher hier jetzt das Update.

Problemfall: AJAX Actionlink liefert neue Seite zurück

Wir haben ein Standard MVC 3 Web Projekt und folgende Zeile soll einfach nur einen Link erzeugen, welcher bei Knopfdruck ein View per AJAX nachlädt und in das "Result” Div reinsetzt:

    @Ajax.ActionLink("Foobar load", "Foobar", "Home", new AjaxOptions() { HttpMethod = "Get", UpdateTargetId = "Result" })

image

Nach dem Knopfdruck sollte eigentlich per AJAX der View geladen werden, allerdings wird kein AJAX Request ausgelöst. Warum?

image 

Javascript Bibliotheken fehlen

In der Standard-Masterpage ist bereits jQuery verlinkt, was allerdings noch fehlt ist die AJAX Bibliothek. Vor MVC3 waren dafür die MS AJAX Bibliotheken da - diese brauchen wir jetzt aber nicht mehr.

Für AJAX benötigen wir noch zusätzlich die jQuery.unobtrusive-ajax.js (bzw. die min.js) Datei!

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

Ein Blick ins HTML bringt vielleicht auch eine kleine Überraschung:

image

Falls das bei jemanden anders aussieht: Wichtig sind noch folgende Einstellungen in der Web.config (diese sind allerdings bei neuen Projekten Standard)

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

Unobtrusive Javascript? What?

Um was geht es eigentlich bei den "unobtrusive Javascript” Sachen? Ganz allgemein geht es darum, dass die Seite auch ohne Javascript trotzdem noch "bedienbar” bleibt und z.B. kein JS Eventhandler direkt im a-Tag reingehangen wird. Dies wird über die data- Attribute mit "angehangen.

Hier ein Screenshot aus einer tollen Präsentation über das Thema:

image

Pures jQuery

Natürlich braucht man die AJAX Helper nicht zu nutzen, es würde auch mit jQuery Standardmitteln gehen:

$(function() {
    $('#mylink').click(function() {
        $('#AjaxTestDiv').load(this.href);
        return false;
    });
});

Wie immer eine große Hilfe bei der Problemlösung: Stackoverflow :)

[ Download Sample Code ]


Written by Robert Muehsig

Software Developer - from Dresden, Germany, now living & working in Switzerland. Microsoft MVP & Web Geek.
Other Projects: KnowYourStack.com | ExpensiveMeeting | EinKofferVollerReisen.de

If you like the content and want to support me you could buy me a beer or a coffee via Litecoin or Bitcoin - thanks for reading!