Verwendete Technologien

Am Ende muß natürlich beim Browser des Benutzers ein valides Konstrukt aus HTML5 und CSS ankommen. Während die .css Dateien aber in finaler Version im /css Verzeichnis des Shops liegen, werden die HTML Dateien dynamisch aufgebaut.

Die Template Engine Razor

Da der Centauri Shop auf der http://ASP.NET MVC Technik aufbaut, wird für das generieren der HTML Seiten die Razor Template-Engine verwendet.

Im Shop Verzeichnis sind im Unterverzeichnis /views und in dessen Unterverzeichnissen eine Reihe von .cshtml Dateien gespeichert, die in ihrer Benennung mit den Urls für ihren Aufruf übereinstimmen. D.h. für die Url /Registrierung/Auswahl gibt es im Shop eine Datei /views/Registrierung/Auswahl.cshtml

Jede .cshtml - wird im Weiteren als View bezeichnet - wird vor der Weitergabe an den Browser des Besuchers durch die Razor Template-Engine verarbeitet.

Enthaltener HTML Code wird dabei unverändert zurückgegeben. Zusätzlich können aber mit @... entweder einzelne Befehle oder mit @{ } ein Bereich als ausführbarer Code gekennzeichnet werden. Darin können mit C# Bedingungen oder Schleifen konstruiert bzw. auf das Objektmodell des Shops zugegriffen werden, um Produkte, Warenkörbe, etc. darzustellen. Beispielsweise soll der folgende Bereich nur angezeigt werden, wenn der Kunde am Shop angemeldet ist:

CODE

<button id="navBack" type="button">Weiter einkaufen</button>
@if( Centauri.Shop.State.Current().IsLoggedIn())
{
  <button type="submit">Kostenpflichtig bestellen</button>
}
<button id="funcClearCart" type="button">Warenkorb löschen</button>

Für den Browser des Besuchers sind die mit C# erstellten HTML Teile nicht von statischen HTML Teilen in der .cshtml Datei zu unterscheiden. Diese Teile sind also unmittelbar im ersten Response beim Abrufen einer Url vorhanden und werden nicht dynamisch nachgeladen.

Für einen angemeldeten Benutzer würde aus dem obigen Beispiel folgender HTML Code an den Browser geschickt:

CODE

<button id="navBack" type="button">Weiter einkaufen</button>
  <button type="submit">Kostenpflichtig bestellen</button>
<button id="funcClearCart" type="button">Warenkorb löschen</button>

Grundlegende Syntax und Verwendung von Razor findet sich z.B. https://www.w3schools.com/asp/razor_intro.asp

Dynamischer Aufbau von Seiten per Javascript (JQuery, etc.)

Zusätzlich bietet der Centauri Shop auch ein REST API an, das Daten entweder als fertiges HTML oder in Form von JSON Objekten liefert und das von Javascript dynamisch in die Seiten eingesetzt werden kann.

Beispielsweise verwenden Kategorieseiten und Suchergebnisse in der Referenzimplementierung des BaseShops diesen Ansatz und liefern im ursprünglich zurückgegebenen HTML nur die ersten 40 Produkte. Erst wenn der Besucher im Browser die Seite nach unten scrollt, werden weitere Produkte nachgeladen. Die Backend Funktion für dieses Nachladen liefert in diesen Fällen den vollständigen HTML Code für die nachgeladenen Produkte.

Ein weiteres Beispiel für die Nutzung des APIs sind Navigations-Menüs, die nicht statisch in den HTML Code jeder Seite eingebaut werden sollen - vor allem nicht bei mobilen Geräten. Hier wird nur die beim Aufruf sichtbare Menüzeile statisch in den HTML Code geschrieben und erst beim Klick oder beim Hovern über einem Menüpunkt das restliche Menü als JSON abgerufen und daraus im Frontend per Javascript aus der JSON Antwort des APIs das Menü im DOM der Seite aufgebaut.

Im BaseShop wird für die Manipulation des DOM JQuery verwendet. Theoretisch kann aber natürlich auch jedes andere Frontend Framework verwendet werden, um das REST API abzurufen und daraus ein UI für den Besucher aufzubauen. In diesem Fall müssen die notwendigen Javascript/CSS-Bibliotheken allerdings erst in der _layout.cshtml eingebunden werden.