標籤

ASP.NET MVC (29) Visual C# (15) JQuery (10) Plugins (8) JQuery Plugins (6) JavaScript (6) MySQL (5) CSS (4) LinQ (4) Mac OS (4) CentOS (3) Design Pattern (3) Entity Framework (3) IIS (3) Python (3) Windows (3) php (3) Docker (2) LAMP (2) SQL Server (2) WCF (2) .NET (1) .NET Core (1) AWS (1) Browser (1) GIS (1) IE (1) Internet Security (1) Linux (1) Platform (1) React (1) SEO (1) Testing (1) VMware (1) Windows 7 (1) cookie (1) curl (1) laravel (1) phpBB (1) session (1) 中古屋 (1) 透天 (1) 閒言閒語 (1) 面試 (1) 鳥松 (1)

2014年10月22日 星期三

使用ASP.NET MVC 實作購物網站 (二十四) - 購物流程(1)

一般的購物流程分為以下步驟

1. 瀏覽商品,並將喜愛的商品加入購物車
2. 確定購物車完成,進入結帳
3. 填好送貨資訊,例如收貨人地址、電話、住址等
4. 線上付款,例如線上刷卡
5. 完成訂單

今日目標 :
   * 完成上述第 2. 跟 3. 的流程,也就是結賬頁面


1. 新增[Models/OrderModel/Ship.cs]的模型類別,此類別主要為定義商品的寄送資訊.其中包含三個欄位,RecieverName, RecieverPhone, RecieverAdress ,詳細定義請參考下圖:

2. 新增OrderController,包含Index()方法,此方法主要是顯示目前使用者的購物車內容,等待輸入好運送資訊後,即可以進入訂單資料庫.

3. 加入檢視Index.cshtml,資料模型使用我們步驟1的Ship模型,此頁面主要為顯示購物車內所有商品讓使用者確認用

這邊是顯示Ship模型,讓使用者可以填入 寄送資訊


4. 開啓_CartPartial.cshtml,我們將[結賬去]的連結,改為我們剛剛新增的OrderController中的Index()方法 (行 25~27)


5. 運行專案,隨意加入幾筆商品後,點選[結賬去]

6. 此時頁面將會導到我們所設計的結賬頁面





*今天的原始碼請參考這裡





沒有留言:

張貼留言