Cet article démontre la construction d'une page de paiement du commerce électronique simple à l'aide de Visual Studio Community 2015, Bootstrap et AngularJS. Le processus intègre une API Web Mock ASP.NET pour le traitement des paiements, présentant des composants de commerce électronique de base.

Caractéristiques de clé:

• Intégration transparente: Visual Studio 2015 facilite l'intégration facile de la fonctionnalité du commerce électronique.
• Interface conviviale: Bootstrap et AngularJS créent une expérience de paiement fluide et réactive.
• Traitement de paiement simulé: Une API Web ASP.NET simulée gère les données de paiement JSON, fournissant des commentaires sur la réussite des transactions ou l'échec.
• Mises à jour en temps réel: AngularJS permet des calculs de prix dynamiques et affiche des messages en fonction des résultats de la transaction.
• flux de travail simplifié: L'ensemble du processus de paiement est rationalisé sous un seul formulaire.

Ce tutoriel s'appuie sur les articles précédents de la série (liens fournis ci-dessous) et se concentre sur l'ajout de capacités de commerce électronique. Un paiement d'une seule page gère le panier d'achat, les informations de paiement et affiche des messages de réussite / échec. Les détails du paiement sont soumis à une API Web Mock ASP.NET agissant comme processeur de carte de crédit, recevant des données JSON via les demandes de poste et renvoyant les codes d'état HTTP. AngularJS gère les mises à jour en temps réel, le calcul des totaux et l'affichage des messages.

La conception de la page de paiement exploite Bootstrap pour le style. AngularJS gère l'affichage dynamique des totaux de produits. Le processus complet, de la sélection des produits au paiement, est contenu dans un seul formulaire.

(image: capture d'écran de la page de paiement terminée) []

Détails de l'implémentation:

Le processus implique la création d'une nouvelle vue MVC (Checkout.CSHTML) et plusieurs classes de modèles (Product.cs, Form.cs, Checkout.CS). Le style bootstrap est appliqué et AngularJS est utilisé pour les fonctionnalités dynamiques. Le contr?leur AngularJS (contr?leur.js) initialise les variables pour les quantités de produit. Le code c?té serveur (HomeController.cs) gère la soumission de formulaire, traite les données et interagit avec la simulation de l'API Web. L'API Web (ValueController.CS) simule le traitement des paiements et renvoie les codes d'état HTTP indiquant le succès ou l'échec.

(image: ajout d'une nouvelle page de vue MVC) []

(image: ajout du fichier contr?leur.js) []

La classe myForm dans le HomeController se lie à la forme des champs, simplifiant l'accès aux données. La classe ProductManager calcule les prix totaux. La classe Checkout gère les messages de succès / défaillance et les codes de téléchargement. L'API Web utilise JsonConvert (Newtonsoft.json Nuget Package) pour la sérialisation / désérialisation JSON.

(Image: Ajout du package NewTonsoft.json Nuget) []

L'article se termine par un résumé et un aper?u du prochain article, qui se concentrera sur la création d'une application de notification mobile à l'aide de Cordova.

(Liens vers les articles précédents de la série):

• Visual Studio Community 2015: Configuration d'un site
• Visual Studio Community 2015: Ajouter des e-mails et des pages de contact

(Cet article a été parrainé par Microsoft.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!