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

密鑰功能：

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

[

] >

實現(xiàn)詳細信息：

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

]

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

[

]

HOMECONTOLLER中的

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

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

>本文以摘要和下一篇文章的預覽結(jié)束，該文章將重點介紹使用Cordova創(chuàng)建移動通知應用程序。

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

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

（本文是由Microsoft贊助的。）

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