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

密鑰功能：

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

] >

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

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

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

]

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

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

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

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

（本文是由Microsoft贊助的。）

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