HowTo: AJAX Actionlink & ASP.NET MVC 3
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" })
Nach dem Knopfdruck sollte eigentlich per AJAX der View geladen werden, allerdings wird kein AJAX Request ausgelöst. Warum?
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!
<!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:
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:
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 
About the author
Written by Robert Mühsig
Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.
Thomas
12. April 2011
Imho ein Wrapper zu viel. Zum Einen, weil man sich wieder Abhängigkeiten zwischen Client (jQuery) und Server (MVC) schafft, die nicht nötig sind und ggf. später mal auf die Füße fallen. Zum Anderen weil man notgedrungen mixen muss, wenn man etwas mehr machen will, als den einen View zu laden.
Dann lieber gleich konsequent trennen und den Client-Kram direkt via jQuery machen.
Robert Mühsig
12. April 2011
Für mal “schnell” was zusammenbauen sind die Helper ganz nett. Die Erkenntnis von diesem Blogpost waren auch nur Nebenprodukt eines Prototypen
Thomas
12. April 2011
Ich wollt’s ja nur gesagt haben
(Bin mit jQuery direkt aber wahrscheinlich sogar schneller beim Zusammenbauen
)
Arlie Hignight
18. November 2011
I found your blog when I was looking for a different sort of information but I was very happy and glad to read through your blog. The information available here is great.Thanks for sharing….