使用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. 運行網站，我們可以得到下列樣式的首頁

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

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