Modale Dialoge in ASP.NET MVC Anwendungen mit Ajax

Modale Dialoge in ASP.NET MVC Anwendungen mit Ajax

Modale Dialoge in ASP.NET MVC Anwendungen mit Ajax

In manchen MVC Applikationen ist es eventuell nötig, dass man gewisse Inhalte nach Bedarf nachladen möchte oder muss (je nach Kundenanforderung).Klar sollte sein, dass man dafür in nahezu allen Fällen dementsprechend auf Ajax-Calls zurückgreift. Das MVC Framewrok von ASP.NET lässt einem auch sehr viel Freiraum zur Implementierung solch einer Anforderung.

Dies hat allerdings auch den Nachteil, dass man eben dadurch vor der großen Wahl steht, wie man dies nun wirklich realisieren soll und somit auch übersieht, dass man auch mit den Bordmitteln von ASP.NET MVC dies erreichen kann und ohne viel JavaScript schreiben zu müssen.

Ich werde also hier nun schrittweise eine Beispielimplementierung zeigen, wie man Ajax-Calls mit den Bordmitteln des MVC 4 Frameworks (sprich: kein WebAPI) realisieren und wie man modale Dialoge mit Hilfe von PartialViews und jQueryUI erzeugen kann.

1. Schritt – Setup

Als erstes erstellen wir eine neue Solution vom Typ „ASP.NET MVC 4 Web Application“ und wählen das Project Template „Basic“ aus. Damit haben wir eine Standard Einrichtung unseres MVC Projekts mit den bereits notwendigen Skripten.

Als nächstes sollten wir die „Web.config“ auf der Projekt-Ebene (nicht in dem „View“ Verzeichnis) überprüfen.

In der Sektion „appSettings“ sollte ein Kind-Element sein welches als Key „UnotrusiveJavaScriptEnabled“ und Value „true“ hat. – Sollte dies nicht der Fall sein, müssen wir diesen hinzufügen.

<appSettings>
...
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

Nun sollten wir einen Controller erstellen, der auch eine ActionMethode beinhaltet (in diesem Beispiel: „HomeController“ und „Index“), sowie eine View zu der Index (hier: ~/Views/Home/Index.cshtml).

In dem Controller müssen wir nun ein Repository erstellen, der unsere Werte hält. Einfachheitshalber habe ich mich für ein IEnumerable<string> entschieden.

Weiterhin muss noch eine weitere View erstellt werden, die als PartialView fungiert und somit die Daten später in dem Dialog darstellen wird.

2. Schritt – Anpassungen

Nun müssen wir noch einige Anpassungen an unserem Layout vornehmen, damit jQuery UI und die dazu passenden CSS-Themes geladen werden. Dazu fügen wir dem Code in der View „_Layout.cshtml“ (im Verzeichnis „~/Views/Shared“) folgendes hinzu:

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")

Die Script-Bundles jqueryui und jqueryval liefern uns die Möglichkeit die modalen Dialoge anzuzeigen und sogar eine client-seitige Validierung zu ermöglichen.
Das Styles-Bundle dient hier der grafischen Darstellung der jQuery UI Widgets.

Damit wäre nun die Basis für die Funktionalität geschafft.

3. Schritt – Modalen Dialog hinzufügen und anzeigen

Zunächst erstellen wir in unserem Controller eine neue Action, die als ReturnType PartialViewResult (oder dessen Basistyp ActionResult) hat.

public PartialViewResult GetValues()
{
     return PartialView("_MyStringValues", _valuesRepository.ToList());
}

Diese Action liefert uns statt einer üblichen View eine PartialView und liefern ihr als zweiten Parameter unser Repository als Liste.
In der Index View erzeugen wir nun ein div und vergeben ihm als id-Attribut einen Wert (hier: „modalDialog“). Danach müssen wir eine C# Variable vom Typ AjaxOptions definieren, die zumindest in dem Property „UpdateTargetId“ mit dem Wert unserer div-id hält. Diese wird später von MVC benötigt um zu erfahren, wo der Content des Ajax-Calls später nachgeladen werden soll.

@{
     ViewBag.Title = "Index";
     var ajaxOpts = new AjaxOptions
     {
          UpdateTargetId = "modalDialog"
     };
}

Nun müssen wir einen ActionLink in der View erzeugen, der unseren Ajax-Call auch durchführt. Statt eines Html.ActionLink nutzen wir nun Ajax.ActionLink und übergeben ihm folgende Parameter:

@Ajax.ActionLink("Show Values", "GetValues", new { controller = "Home" }, ajaxOpts, new { @class = "modal-link" })

Als Letztes müssen wir der View noch eine Script section hinzufügen, in dem per JavaScript definiert wird, welches div unser modaler Dialog ist und wie sich diesr Dialog verhält. Zusätzlich müssen wir hier auch noch an dem Click-Event des Ajax.ActionLinks eine Funktion anbinden, damit der modale Dialog geöffnet wird.

@section scripts{
<script type="text/javascript">
$(document).ready(function() {
     var $dialog = $('#modalDialog');
     $dialog.dialog({
          modal: true,
          autoOpen: false,
          height: 500,
          width: 900,
          open: function() {
               $('.ui-widget-overlay').on('click', function() {
                    $('#modalDialog').dialog('close');
               });
         }
     });
     $('.modal-link').on('click', function(event) {
          $dialog.dialog('open');
     });
});
</script>
}

Nun können wir die Applikation starten und das Ergebnis betrachten.

Abschließend hier noch die fertige Solution.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Time limit is exhausted. Please reload the CAPTCHA.