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

主要な機(jī)能：

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

実裝の詳細(xì)：

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

]

[

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

[] この記事は、次の記事の要約とプレビューで終了します。これは、Cordovaを使用したモバイル通知アプリの作成に焦點(diǎn)を當(dāng)てます。

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

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

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

以上がVisual Studio Community 2015：eコマース機(jī)能の追加の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。