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. 此時會以下拉選單的方式將購物車的內容顯示出來

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


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



























2014年10月17日星期五

使用ASP.NET MVC 實作購物網站 (十八) - 購物網站首頁設計

昨天我們已經完成設計購物車的類別,並且測試了其可用性。接下來在使用這個購物車之前,我們需要完成網站的"",也就是一般購物網站可提供展示商品與購買商品的首頁。

今日目標:
1. 修改Product模型使其可以儲存圖片網址
2. 修改首頁為正常的購物網站首頁


修改Product模型使其可以儲存圖片網址

1. 將Product實體模型新增一個純量屬性叫做DefaultImageURL,型態為String且允許為NULL,記得要使用模型產生資料庫來更新SQL Server的Table Schema(不熟悉操作的讀者可回到Day7~Day8觀看喔)

2. 在ProductController中的Edit() Action 內新增儲存DefaultImageURL的程式碼

3. 接下來需要修改Edit.cshtml,增加一段可以編輯DefaultImageURL欄位的程式碼 ( Create.cshtml操作雷同,這裡我們不再贅述 )

4. 在Product/Index.cshtml的顯示表格中新增一個商品圖的欄位,可供顯示商品圖片

5. 運行專案觀看商品管理頁,我們就可以看到已經有顯示商品圖了 (每個商品的圖片Url請需自行至商品編輯頁面設定,筆者是使用免費圖片資源網站 http://all-free-download.com/ )


修改首頁為正常的購物網站首頁

1. 將HemeController的Index()改為抓取Product表所有資料

2. 將Index.cshtml修改為可以顯示商品資訊

3. 運行網站,我們可以得到下列樣式的首頁

我們完成一個購物網站的首頁囉,目前加入購物車按鈕雖然不能用,但是我們已經準備好購物車類別囉,離可以做動之日也不遠矣。
明天我們繼續。

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
























使用ASP.NET MVC 實作購物網站 (十七) - 購物車類別設計與測試

昨天介紹了ASP.NET MVC中Session的優缺點與使用方式,今天我們開始設計購物車類別.

今日目標:
* 完成購物車類別並且進行測試


1. 在Models新增CartItem.cs,此類別我們準備拿來儲存單一商品,類別中包含商品編號,商品名稱, 價格, 數量 與 小計

2. 在Models中新增Cart類別,因為購物車有可能同時購買多比商品,所以此類別的主要功能是拿來放一群CartItem,Cart類別就是我們購物車的主要類別了,類別內容如下所述

3. 在Models新增Operation.cs,這個類別是提供購物車操作,目前我們僅新增一個方法GetCurrentCart(),功能是取得當前的購物車

4. 新增一個TestController準備測試用,在此Controller新增一個Action名稱為GetCart(),主要的功能為如果目前購物車沒有任何商品,則新增一筆假的商品.如果購物車內已經有商品,則將商品的數量加一.最後輸出目前購物車所有商品的總價.


5. 開始測試,瀏覽網址『http://localhost:51352/Test/GetCart』,第一次可以看到購物車總價為100元.

6. 重新瀏覽網址,則可以看到購物車內總價變為200元

如果繼續刷新頁面,購物車總金額會一直累加,直到將專案停止偵錯,網站重新啟動為止才會清空Session喔.今天我們完成購物車類別的設計以及測試,雖然商品資料是假的,但是至少確定是可以運作無誤的,明日我們繼續.


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