>本文展示了使用Visual Studio Community 2015，Bootstrap和Angularjs構建簡單的電子商務結帳頁面。 該過程集成了一個模擬ASP.NET Web API進行付款處理，展示核心電子商務組件。

密鑰功能：

• >無縫集成： Visual Studio 2015促進了電子商務功能的簡單集成。
• >用戶友好的接口： bootstrap和angularjs創(chuàng)建了平穩(wěn)，響應迅速的結帳體驗。
• >模擬付款處理：模擬的ASP.NET Web API處理JSON付款數據，提供了有關交易成功或失敗的反饋。
實時更新： 簡化的工作流程：整個結帳過程都在單個形式中簡化了。
• >本教程基於該系列的先前文章（下面提供的鏈接），並著重於添加電子商務功能。 單頁結帳處理購物車，付款信息並顯示成功/失敗消息。 付款詳細信息將提交給模擬ASP.NET Web API充當信用卡處理器，通過POST請求接收JSON數據並返回HTTP狀態(tài)代碼。 Angularjs處理實時更新，計算總計和顯示消息。 >結帳頁面的設計利用引導程序進行樣式。 AngularJS管理產品總計的動態(tài)顯示。 從產品選擇到付款的完整過程都包含在單一形式中。
（圖片：完整結帳頁面的屏幕截圖）

] >

實現詳細信息：

>該過程涉及創(chuàng)建新的MVC視圖（Checkout.cshtml）和幾個模型類（product.cs，form.cs，checkout.cs）。 應用引導樣式，並將AngularJS用於動態(tài)功能。 AngularJS控制器（Controller.js）初始化了產品數量的變量。 服務器端代碼（HOMECONTROLLER.CS）處理提交，處理數據並與模擬Web API進行交互。 Web API（ValueController.cs）模擬付款處理並返回http狀態(tài)代碼，表示成功或失敗。 > （圖片：添加新的MVC查看頁面） [

> （圖像：添加controller.js file）

]

myForm類綁定到形式字段，簡化了數據訪問。 ProductManager班級計算總價格。 Checkout課程管理成功/失敗消息和下載代碼。 Web API使用JsonConvert（newtonsoft.json nuget軟件包）進行JSON Serialization/Deserialization。

（圖像：添加newtonsoft.json nuget package） []

（鏈接到該系列中的先前文章）：>

Visual Studio社區(qū)2015：建立網站
> Visual Studio社區(qū)2015：添加電子郵件和聯繫頁面

（本文是由Microsoft贊助的。）

以上是Visual Studio社區(qū)2015：添加電子商務功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！