HowTo: AJAX und ASP.NET MVC
Das gute AJAX gehört ja heutzutage schon zum gutem Ton in der Webentwicklung. Auch im ASP.NET MVC Framework gibt es ein paar kleine Helferlein. In dem Post will ich ein paar Varianten zeigen – von jQuery über Ajax.ActionLinks und Ajax Forms. Update für ASP.NET MVC 3: hier
Update: Für ASP.NET MVC 3 gibts hier ein Update!
Grundlagen über ASP.NET MVC
- HowTo: ASP.NET MVC Projekt erstellen (erster Einstieg)
- HowTo: Daten vom View zum Controller übermitteln / Modelbinders in ASP.NET MVC
Was braucht man dafür?
Damit die AJAX Sachen klappen, müssen unbedingt die Javascript Datein (z.B. in der Masterpage eingebunden werden). Im Normalfall sind diese Scripts nicht eingebunden:
In dem Ordner gibt es jeweils einmal immer eine Debug und eine "Produktivvariante". In meinem Beispiel nehme ich diese 3 Scripts:
<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
Helper
Wer ein wenig mit ASP.NET MVC rumspielt wird bereits die Helper in den Views entdeckt haben – wer mal =Ajax. eingibt wird sowas in der Art sehen:
Ajax.ActionLink
Ein sehr einfacher, aber nette Sache ist der ActionLink. Er dient dazu, dass man über einen Link über AJAX einen Controller aufruft. Besonders nützlich dabei sind die AjaxOptions die man als Parameter mit angeben kann:
<%=Ajax.ActionLink("Ajax.ActionLink + Replace",
"ItemData",
"Ajax",
new AjaxOptions() { HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "AjaxResult" })%> <br />
<%=Ajax.ActionLink("Ajax.ActionLink + InsertAfter",
"ItemData",
"Ajax",
new AjaxOptions() { HttpMethod = "GET",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "AjaxResult"}) %> <br />
<%=Ajax.ActionLink("Ajax.ActionLink + InsertAfter + Loading",
"ItemData",
"Ajax",
new AjaxOptions() { HttpMethod = "GET",
InsertionMode = InsertionMode.InsertAfter,
UpdateTargetId = "AjaxResult",
LoadingElementId = "Loading" })%> <br />
Kurze Erklärung: Der erste Parameter ist nur der Text des Links, danach folgt ActionMethod & Controllername. Die Unterscheidung liegt in den AjaxOptions
Variante 1: Hier ruf ich einfach "ItemData" vom "Ajax" Controller über einen GET Aufruf auf und packe das Ergebnis in ein HTML Element Namens "AjaxResult".
Ein kurzer Blick auf die Action Method:
public ActionResult ItemData()
{
return View();
}
… und der ItemData View (den ich hier zurückgebe) :
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %> - Item
Bei jedem Aufruf (über AJAX) kommt vom Controller "- Item" zurück und wird in das DIV "AjaxResult" eingefügt.
Variante 2: Hier wird das Ergebnis ("- Item") an den Content von "AjaxResult" angehangen.
Variante 3: Hier wird während des AJAX Calls sogar ein Ladeicon angezeigt bzw. wird ein Element angezeigt.
Diese Variante ist sehr nett, wenn man auf Knopfdruck z.B. weitere Informationen nachladen möchte. Wenn man viele Daten übertragen möchte, würde ich lieber zur nächsten Variante tendieren:
Ajax.BeginForm
Wenn man ein ganzes Formular mit Daten per AJAX schicken möchte, gibt es auch den "Ajax.BeginForm" Helper:
<%using (Ajax.BeginForm("ItemEdit",
"Ajax",
new AjaxOptions() { HttpMethod = "POSt",
InsertionMode = InsertionMode.InsertBefore,
UpdateTargetId = "AjaxResult" }))
{%> <br />
<%=Html.TextBox("Input") %>
<button type="submit">Ok</button>
<%} %>
Dieser ist wieder ähnlich gestrickt wie der Ajax.ActionLink. Natürlich kann man dann beim Controller auch Modelbinder etc. nutzen.
jQuery
Als letzte Variante möchte ich hier noch die pure jQuery AJAX Alternative zeigen:
function ajaxCall() {
$.ajax(
{
type: "POST",
url: "<%=Url.Action("ItemData","Ajax") %>",
success: function(result) {
$("#AjaxResult").html(result);
}
});
}
Wie man sieht ist auch das recht unkritisch und ist einfach gemacht. Man sollte aber aufpassen, wenn man diese Javascript-Geschichten in ein extra .js File auslagert. Ich lass mir die URL vom Server über den Url Helper erzeugen, wenn man dies nun auslagert, muss man sich Gedanken machen, woher man die URL bezieht bzw. darf nix am Routing rumschrauben.
Fazit
Kleine AJAX Spielerein sind mit ganz traditionellen Mitteln (ohne böse ASP.NET AJAX UpdatePanels etc.) in ASP.NET MVC ganz einfach. Es gibt bestimmt noch mehr Varianten und hinter den AjaxOptions verstecken sich noch viele coole Sachen.
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.
Thorsten Hans
26. August 2009
Hallo Robert,
netter Post. Ich persönlich bevorzuge jQuery, weil ich gerade mit dem MS Ajax UpdatePanel schon so manches mal auf die Nase gefallen bin.
Ein weiterer Vorteil von jQuery ist meiner Meinung nach, dass man genauer kontrollieren kann wie das eigentlich gerenderte Markup aussieht.
Gruß Thorsten
Robert Mühsig
26. August 2009
Hallo Torsten,
bei den beiden anderen Varianten hast du ebenfalls (jedenfalls soweit ich weiß) volle Kontrolle. Diese Sachen haben nichts mit den bösen Updatepanels gemein.
Viele Grüße,
Robert
Thorsten Hans
26. August 2009
ich glaube ob jQuery oder MS Ajax, wird schon sehr bald eine Grundsatzdiskussion wie Windows oder Linux…
Wobei ich die Position die Microsoft bezogen hat indem sie jQuery integriert haben sehr lobenswert finde!!
Christian Puckrandt
1. December 2010
Das funzt recht gut so. Allerdings schaffe ich das nur (IIS 7), wenn der Code innerhalb der “Default Web Site” ausgeführt wird. Sobald ich innerhalb der o.g. Seite eine Anwendung einfüge und den Code dort ausführe bzw eine neue Seite (mit z.B. Port 81) erstelle klappt das nicht mehr. Dann steht das Ergebnis des ActionResults nicht in der DIV sondern es wird einfach die View geöffnet (nicht mal die vordefinierten Elemente der Masterpage sind zu sehen). Also der gleiche Effekt wie wenn man die notwendigen Scripts nicht eingebunden hätte. Bei virtuellen Verzeichnissen bzw Subdomains befürchte ich das gleiche. Allerdings habe ich das noch nicht geprüft, da IIS 7 diese mir partout nicht öffnen will (irgendwas mache ich offensichtlich beim Routing falsch). Muß bei Ajax innerhalb von nachgeordneten Anwendungen noch sonst was beachtet werden?
Robert Mühsig
1. December 2010
Hallo Christian,
das liegt darin, dass die Javascript Dateien nicht gefunden werden. Anstatt
script src=”../../Scripts/jquery-1.3.2.js” type=”text/javascript”…
sollten der Pfad zu den Script über den UrlHelper zusammengebaut werden.
anstatt “../../Scripts/jquery…” lieber < %=Url.Content("~/Scripts/jquery...")%>
Dann geht es egal wo die Website läuft.
Christian Puckrandt
1. December 2010
Danke für die schnelle Antwort. Ich hatte bereits vorab den benötigten Pfad eingegeben und habe gesehen, daß es dann klappt. Als ich dann o.g. Lösung ausprobierte bekamm ich (wie bereits in ähnlichen Fällen mit css-Dateien) eine Fehlermeldung. Die Masterseite könne nicht gerendert werden, da der header code-Blöcke () enthalte. So bin ich dann beim absoluten Pfad geblieben.
mfg
Christian Puckrandt
3. December 2010
Eine Frage habe ich doch noch. Wenn ich dem Text ( – Item) einen Stil verpasse(z. B. andere Textfarbe,Schriftart etc. ) bekomme ich trotzdem die normale schwarze Schrift in Standardgröße. Woran liegt das? Werden Stilanweisungen bei Ajax ignoriert?
Christian Puckrandt
3. December 2010
Hat sich erledigt. Habe einen Weg gefunden.