HowTo: AJAX und ASP.NET MVC

image 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

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:

image

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:

image 

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.

[ Download Demosource ]


Kick It auf dotnet-kicks.de
Wenn dir der Blogpost gefallen hat, dann hinterlasse doch einen Kommentar. Wenn du auf dem Laufenden bleiben willst, abonniere unseren RSS Feed oder folge uns auf Twitter.

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.

11 Responses

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

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

    Reply
  3. ich glaube ob jQuery oder MS Ajax, wird schon sehr bald eine Grundsatzdiskussion wie Windows oder Linux… :D

    Wobei ich die Position die Microsoft bezogen hat indem sie jQuery integriert haben sehr lobenswert finde!!

    Reply
  4. 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?

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

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

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

    Reply
  8. Hat sich erledigt. Habe einen Weg gefunden.

    Reply

Comment on this post

Letzte Posts

  • image.png
    RavenHQ–RavenDB in der Cloud

    Ayende Rahien hat es heute verkündet – RavenHQ, der RavenDB Cloud Hoster (natürlich von und mit Ayende) ist ab heute raus aus der Beta und man kann es von überall aus nutzen. In der Betaphase waren nur Nutzer von AppHarbor zugelassen. Was ist RavenHQ? RavenHQ ist im Grunde ein gehostes RavenDB in den Rechenzentren von ...

  • image.png
    GitHub for Windows–erste Eindrücke

    Git ist schon eine tolle Sachen und eröffnet viele neue Möglichkeiten – allerdings ist der Einstieg recht hart und selbst wenn man die guten Hilfsanleitungen auf GitHub befolgt, kommt man am Anfang nur langsam vorwärt. Insbesondere ist das Tooling für Windows / .NET Entwickler auch nicht gerade “bekanntes Terrain”. GitHub to the rescue! Die GitHub ...

  • image.png
    Chocolatey–apt-get für Windows

    Durch Zufall bin ich auf das Tool “Chocolatey” gestoßen. Wer die Website sich anschaut, wird evtl. eine Verwandschaft mit NuGet ausmachen. Was macht Chocolatey? Chocolatey ist ein “Maschine Package Manager”, das bedeutet, dass man für seine Maschine einfach Tools runterladen und Updaten kann – direkt über die Konsole. Was ist der Unterschied zu NuGet? NuGet ...

  • image.png
    SASS, LESS & Coffeescript in Visual Studio mit der Web Workbench

    CSS und Javascript sind die “kleinste” Schnittmenge von allen Browsern für die Erstellung von Web-Applikationen. Leider geht dabei etwas komfort verloren, daher lieben alle Webentwickler jQuery! SASS und LESS sind zwei Varianten, wie man “schöner” CSS schreiben kann und Coffeescript versucht Javascript Entwicklung zu vereinfachen. Aber immer der Reihe nach… Was ist SASS? SASS steht ...

  • image.png
    Code-Inside Sample nun auf GitHub: Google Code zu GitHub Migration

    Seit einiger Zeit habe ich Beispielcode auf Google Code bereitgestellt. Einfach nur noch weg von Google Code O-Ton damals war: Ich hatte mich für Google Code entschieden, weil ich hoffe dass früher oder später die Google Code Suche nutzbar ist und es dadurch wenigstens ein kleiner Mehrwert entsteht. Allerdings wirft es momentan noch ein Fehler. ...

Auf Amazon einkaufen & unterstützen

Facebook