25 August 2009 AJAX, ASP.NET MVC, MVC Robert Muehsig

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 ]


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!