Dieser Artikel zeigt, dass eine einfache E-Commerce-Checkout-Seite mit Visual Studio Community 2015, Bootstrap und AngularJS erstellt wird. Der Prozess integriert eine Mock ASP.NET-Web-API für die Zahlungsverarbeitung, in der die Kern-E-Commerce-Komponenten vorgestellt werden.

Schlüsselmerkmale:

• nahtlose Integration: Visual Studio 2015 erleichtert eine einfache Integration der E-Commerce-Funktionalit?t.
• benutzerfreundliche Schnittstelle: Bootstrap und AngularJs erstellen ein reibungsloses, reaktionsschnelles Erlebnis.
• Mock -Zahlungsverarbeitung: Ein simuliertes ASP.NET -Web -API übernimmt JSON -Zahlungsdaten und liefert Feedback zu Transaktionserfolg oder Misserfolg.
• Echtzeit-Updates: AngularJS erm?glicht dynamische Preisberechnungen und zeigt Nachrichten basierend auf den Transaktionsergebnissen an.
• vereinfachtes Workflow: Der gesamte Checkout -Prozess wird in einer einzigen Form gestoppt.

Dieses Tutorial baut auf früheren Artikeln in der Serie (unten angegeben) auf und konzentriert sich auf das Hinzufügen von E-Commerce-Funktionen. Eine einseitige Checkout behandelt den Einkaufswagen, die Zahlungsinformationen und zeigt Erfolgs-/Ausfallmeldungen. Zahlungsdetails werden an eine Mock ASP.NET -Web -API, die als Kreditkartenprozessor fungiert, übermittelt, wobei JSON -Daten per Post -Anfragen und Rückgabe von HTTP -Statuscodes erhalten werden. AngularJS behandelt Echtzeit-Updates, berechnet die Gesamtzahl und Anzeigen von Nachrichten.

Das Design der Kasseseite nutzt Bootstrap zum Styling. AngularJS verwaltet die dynamische Darstellung von Produktsummen. Der vollst?ndige Prozess von der Produktauswahl bis zur Zahlung ist in einem einzigen Formular enthalten.

(Bild: Screenshot der abgeschlossenen Checkout -Seite) []

Implementierungsdetails:

Der Prozess beinhaltet das Erstellen einer neuen MVC -Ansicht (checkout.cshtml) und mehrere Modellklassen (Produkt.cs, Form.cs, Checkout.cs). Das Bootstrap -Styling wird angewendet und AngularJS wird für die dynamische Funktionalit?t verwendet. Der AngularJS Controller (Controller.JS) initialisiert Variablen für Produktmengen. Der serverseitige Code (homecontroller.cs) erledigt die Formulare, verarbeitet Daten und interagiert mit der Mock-Web-API. Die Web -API (ValuEcontroller.cs) simuliert die Zahlungsverarbeitung und gibt HTTP -Statuscodes zurück, die Erfolg oder Misserfolg anzeigen.

(Bild: Hinzufügen einer neuen MVC -Ansichtsseite) []

(Bild: Hinzufügen der Controller.js -Datei) []

Die myForm -Klasses im Homecontroller bindet an Formularfelder und vereinfacht den Datenzugriff. Die ProductManager Klasse berechnet die Gesamtpreise. Die Checkout Klasse verwaltet Erfolgs-/Fehlermeldungen und Download -Codes. Die Web -API verwendet JsonConvert (newtonsoft.json nuget Paket) für JSON -Serialisierung/Deserialisierung.

(Bild: Hinzufügen des Newtonsoft.json -Nuget -Pakets) []

Der Artikel endet mit einer Zusammenfassung und einer Vorschau des n?chsten Artikels, der sich auf das Erstellen einer mobilen Benachrichtigungs -App mit Cordova konzentriert.

(Links zu früheren Artikeln in der Serie):

• Visual Studio Community 2015: Einrichten einer Site
• Visual Studio Community 2015: Hinzufügen von E -Mail- und Kontaktseiten

(Dieser Artikel wurde von Microsoft gesponsert.)

Das obige ist der detaillierte Inhalt vonVisual Studio Community 2015: Hinzufügen von E -Commerce -Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!