Visual Studio Community 2015：eコマース機能の追加

この記事では、Visual Studio Community 2015、Bootstrap、およびAngularJSを使用して、簡単なeコマースチェックアウトページを構築することを示しています。 このプロセスでは、コアeコマースコンポーネントの紹介、

を紹介するための模擬ASP.NET Web APIを統合します。

主要な機能：

• シームレスな統合：Visual Studio 2015は、eコマース機能の簡単な統合を促進します。
• ユーザーフレンドリーインターフェイス：BootstrapとAngularjsは、スムーズで応答性の高いチェックアウトエクスペリエンスを作成します。
mock支払い処理：
• シミュレートされたASP.NET Web APIはJSON支払いデータを処理し、トランザクションの成功または失敗に関するフィードバックを提供します。 リアルタイムの更新：
Angularjsは、動的な価格計算を有効にし、トランザクションの結果に基づいてメッセージを表示します。
• 単純化されたワークフロー：チェックアウトプロセス全体が単一のフォーム内で合理化されています。
このチュートリアルは、シリーズの以前の記事（以下に記載されているリンク）に基づいており、eコマース機能の追加に焦点を当てています。 単一ページのチェックアウトは、ショッピングカート、支払い情報を処理し、成功/失敗メッセージを表示します。 支払いの詳細は、クレジットカードプロセッサとして機能する模擬ASP.NET Web APIに送信され、POSTリクエストを介してJSONデータを受信し、HTTPステータスコードを返します。 AngularJSは、リアルタイムの更新、合計の計算、メッセージの表示を処理します
• チェックアウトページのデザインは、スタイリング用のブートストラップをレバレッジします。 AngularJSは、製品の合計の動的表示を管理します。 製品の選択から支払いまでの完全なプロセスは、単一のフォーム内に含まれています。 （画像：完成したチェックアウトページのスクリーンショット）
[

]

実装の詳細：

このプロセスには、新しいMVCビュー（Checkout.cshtml）といくつかのモデルクラス（Product.cs、form.cs、checkout.cs）の作成が含まれます。 ブートストラップスタイリングが適用され、AngularJSが動的機能に使用されます。 AngularJSコントローラー（Controller.js）は、製品量の変数を初期化します。 サーバーサイドコード（homeController.cs）は、フォームの提出、データを処理し、Mock Web APIと対話します。 Web API（ValueController.cs）は、支払い処理をシミュレートし、成功または失敗を示すHTTPステータスコードを返します。 （画像：新しいMVCビューページの追加）

[

]

（画像：controller.jsファイルの追加）

[

]

HomeControllerのクラスは、フィールドを形成してデータアクセスを簡素化します。 myFormクラスは総価格を計算します。 ProductManagerクラスは、成功/失敗メッセージを管理し、コードをダウンロードします。 Web APIは、JSONのシリアル化/脱派化にCheckout（Newtonsoft.json Nugetパッケージ）を使用します。 JsonConvert

（画像：Newtonsoft.json Nugetパッケージの追加）

[] この記事は、次の記事の要約とプレビューで終了します。これは、Cordovaを使用したモバイル通知アプリの作成に焦点を当てます。

（シリーズの以前の記事へのリンク）：

Visual Studio Community 2015：サイトのセットアップ

Visual Studio Community 2015：電子メールと連絡先ページの追加
• （この記事はMicrosoftが後援しました。）

以上がVisual Studio Community 2015：eコマース機能の追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。