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.
