標籤

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

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

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
























沒有留言:

張貼留言