2014年10月23日星期四

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

承接上篇進度,今天我們要將使用者購買的商品清單以及收貨人資訊真正寫到資料庫中.

今日目標:
  * 設計訂單模型,成功將使用者所填的訂單存入資料庫


1. 在Carts.edmx資料模型中,新增Order與OrderDetail實體模型


2. 按下滑鼠右鍵,選擇[加入新項目]->[關聯]

3. 關聯設定為Order對OrderDetail為一對多關係

4. 此時會出現關聯的虛線

5. 我們將其他純量模型加入
各純量模型意義如下:
[Order]
Id : Order編號
UserId 使用者編號
RecieverName : 收貨人姓名
RecieverPhone : 收貨人電話
RecieverAddress : 收貨人姓名

[OrderDetail]
Id : OrderDetail編號
OrderId : Order編號
Name : 商品名稱
Price : 商品售價
Quantity : 商品數量

6. 別忘了要在資料模型中執行[模型產生資料庫] , 並將產生的SQL語法放到SQL Server Management中執行,如果執行成功,可以順利在Carts資料庫看到新的兩張資料表「Order與OrderDetail」

7. OrderController 的Index() 定義如何將資料存入訂單資料庫(Order與OrderDetail資料表),其中順序為先寫入Order(行31~40)後,再寫入OrderDetail(行43~47)。


8. 運行專案,任意加入多筆商品至購物車後,點選[結賬去],並且輸入完畢收貨人資訊後,點選[確定購買]

9. 此時顯示訂購成功

10. 開啓SQL Server Management Tool,執行選取SQL,可以看到剛剛的訂單資訊成功進入資料庫中囉.

我們已經成功將使用者訂單寫入資料庫囉,訂單完成後接下來還有兩件事情需要完成呢:
1. 購物網站需要知道目前有哪些訂單 - 後台[訂單列表]功能
2. 使用者必須知道曾經下定了哪些訂單 - 使用者[我的訂單]功能

明天我們繼續囉


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



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. 此時頁面將會導到我們所設計的結賬頁面





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





2014年10月20日星期一

使用ASP.NET MVC 實作購物網站 (二十三) - 使用Ajax清空購物車

昨天我們已經完成使用Ajax將商品從購物車移除的功能了,今天我們要完成清空購物車內所有商品的功能。

今日目標:
  *購物車頁面中新增 清空購物車按鈕, 並完成其功能


1. Cart類別新增ClearCart()方法,此方法就是直接將購物車內的cartItems清空。

2. CartController 新增ClearCart() Action , 呼叫步驟1中Cart類別的ClearCart()方法


3. 在[ Views/Shared/_Layout]中新增JavaScript中的ClearCart()方法,呼叫步驟2中CartController 的ClearCart() Action

4. 在[Views/Shared/_CartPartial.cshtml]購物車頁面中新增刪除商品的按鈕,並且呼叫步驟3中JavaScript的ClearCart()

5. 運行專案,任意加入多筆商品,並點選[清空]按鈕

6. 此時可以發現購物車內所有商品已被清空

這樣就完成了清空購物車內所有商品的功能囉,今天的步驟也是與昨天的步驟相差無幾,只是功能上的差別而已。接下來我們要開始進行購物車流程囉,明天我們繼續。


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


使用ASP.NET MVC 實作購物網站 (二十二) - 使用Ajax刪除購物車商品

昨天我們已經完成使用Ajax將商品從商品展示頁加入購物車了,今天我們要完成刪除購物車商品的功能。

今日目標:
  *購物車頁面中新增刪除按鈕並完成其功能

1. Cart類別新增RemoveProduct()方法,如果ProductId有存在購物車則移除,若不存在則不做任何動作。

2. CartController 新增RemoveFromCart() Action , 呼叫步驟1中Cart類別的RemoveProduct()方法

3. 在[ Views/Shared/_Layout]中新增JavaScript中的RemoveFromCart()方法,呼叫步驟2中CartController 的RemoveProduct() Action

4. 在[Views/Shared/_CartPartial.cshtml]購物車頁面中新增刪除商品的按鈕,並且呼叫步驟3中JavaScript的RemoveProduct()

5. 運行專案,任意加入多筆商品,並在其中一筆商品中點選刪除圖案[X]

6. 此時可以發現購物車內商品已被刪除了


這樣就完成了刪除購物車商品的功能囉,其實今天的步驟基本上與昨天是差不多的,接下來預計介紹如何完成清空購物車的功能,明天我們繼續囉。


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


2014年10月19日星期日

使用ASP.NET MVC 實作購物網站 (二十一) - 使用Ajax將商品加入購物車

商品頁面加入購物車功能

上一篇我們實裝了購物車頁面,已經可以使用訪問Url的方式將某個編號的商品加入購物車,但是還無法在商品頁面直接點選[加入購物車]來將商品直接加入,所以我們只差最後一步驟囉。

今日目標:
    * 商品頁面加入購物車功能,使用Ajax來完成


1. 因為我們需要在商品頁面加入購物車,最重要的是加入後不能離開目前的商品瀏覽頁面,所以我們需要Ajax來幫我們完成。

開啟Layout頁面[View/Share/_Layout.cshtml],在HTML的head區段中新增一段JavaScript(行14~34),主要為AddToCart()方法,此方法將傳入的productid丟給CartControoler中的AddToCart()方法 (此方法可參考上一篇) ,並且將回傳的購物車頁面更新至id為Cart的li元素裡,此元素定義在行57至行59中。


2. 開啟商品頁面(網站首頁)[View/Home/Index],將原本的加入購物車連接改為點選時,執行JavaScript中的AddToCart()方法,並且將目前的商品編號傳入 (行31~33)。

3. 開啟購物車頁面[View/Share/_CartPartial.cshtml],我們新增一段判斷,如果目前購物車內商品數量大於零才顯示商品資訊(行10~19),否則顯示 購物車內無任何商品 的提示。

4. 運行專案,由於Session初始化,故一開始購物車內是無任何商品的,此時確認步驟3的修改提示有正常運行。

5. 將範例中第一件商品點選[加入購物車]按鈕,則購物車頁面會刷新並顯示此筆商品。

6. 此時在第二種商品點選[加入購物車]按鈕後,購物車內會顯示兩種商品。

7. 繼續在第二種商品點選[加入購物車]按鈕,可以看到購物車內同樣商品的數量會累加,但是商品種數一樣為兩種商品 ( 顯示為(2) )

8. 各位讀者可以繼續測試加入購物車的功能

今天我們已經將購物車的主要功能與商品頁面的加入購物車功能串接起來運行無誤了,正常的購物車應該還需要兩個功能,分別為【刪除某筆商品】與【清空購物車】。明天我們繼續。


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




2014年10月18日星期六

使用ASP.NET MVC 實作購物網站 (二十) - 實裝購物車頁面

昨日我們雖然只是靜態頁面,但已經將購物車的完成了,今天我們準備實裝購物車的頁面,也就是說頁面所顯示的資料是真正儲存在購物車Session中的產品內容囉。

今日目標 :
  *實裝購物車


1. 首先我們到購物車類別 Models/Cart.cs加工一下,第一個是類別實作IEnumerable介面(行9),然後我們將原本的cartItems從public改為private(行18),這樣做的原因是我們應該要遵循物件導向的精神把購物車封裝起來,不讓外部的類別可以輕易地直接存取購物車中真正的商品列表。 然後再新增一個屬性Count可以計算目前商品總數。

2. 然後將原本的AddCartItem()方法改為AddProduct(),直接使用商品編號的方式將商品加入購物車中

3. 這是給剛剛步驟2用的一個方法。

4. 到昨天完成的_CartPartial.cshtml頁面,主要修改內容為取得目前購物車(行3),將總金額改為由購物車取得(行6),以及將購物車中每筆商品都顯示出來(行10~14)

5. 新增一個CartControoler,這是為了讓前台頁面可以輕鬆透過HttpGet取得目前購物車的頁面,我們新增取得當前購物車內容的GetCart()方法 與 新增一筆商品進購物車的AddToCart()方法,內部都是呼叫Cart的操作來完成。

6. 以上的修改會使原本的TestControoler有錯誤:

我們將其修正為:

7. 運行專案,在網址列中輸入【http://localhost:51352/Cart/AddToCart/商品編號】,注意各位讀者的商品編號可能會不盡相同。我們隨意加入三筆商品

8. 此時可以回到首頁觀看購物車內容,是不是就是我們剛剛在步驟7所加入的商品呢?

今天我們完成了實裝購物車的頁面,接下來我們要真正讓使用者在商品頁直接點選加入購物車的功能囉,明天我們繼續。


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








使用ASP.NET MVC 實作購物網站 (十九) - 購物車頁面設計

昨日我們已經將購物網站很重要的完成了,今天我們繼續設計購物車的頁面。購物車的頁面就像大部分的購物網站一樣,雖然在Session中已經儲存目前購物車的所有商品資訊,但是也要有個地方可以讓使用者清楚知道當前已經將哪幾個商品加入購物車中了。

今日目標 :
*完成設計購物車的展示部分頁面

1. 在Views/Shared/中加入檢視

2. 檢視名稱輸入CartPartial.cshtml,注意這次我們加入的是部分檢視

3. 輸入以下程式碼,這邊我們使用BootStrap的DropDown(下拉選單)來完成,語法其實很簡單,只要讓點選元素(行4~7)的id 與 下拉區塊(行8~14)的id 相符合就可以了,範例中的id我們命名為CartDropDown


4. 開啟Share中的_Layout.cshtml,我們在首頁上方的菜單加入一組li,其中使用Html.Partial將剛剛完成的CartPartial  (行32~34)引入,這邊也可以注意到其實登入(Login)的設計也是部分檢視喔(行36)

5. 運行專案,我們可以看到首頁最上方已經出現購物車了,移動到畫面上點選滑鼠右鍵

 6. 此時會以下拉選單的方式將購物車的內容顯示出來

雖然今天完成的是靜態頁面,但只要經過一點加工就可以真正運作囉,明天我們繼續。


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