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

密鑰功能：

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

] >

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

>該過(guò)程涉及創(chuàng)建新的MVC視圖（Checkout.cshtml）和幾個(gè)模型類（product.cs，form.cs，checkout.cs）。 應(yīng)用引導(dǎo)樣式，并將AngularJS用于動(dòng)態(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查看頁(yè)面） [

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

]

myForm類綁定到形式字段，簡(jiǎn)化了數(shù)據(jù)訪問(wèn)。 ProductManager班級(jí)計(jì)算總價(jià)格。 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)系頁(yè)面

（本文是由Microsoft贊助的。）

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