前言

接下來要完成的部分是，
1. 商品列表頁上的商品資料不是單純的HTML靜態切版，而是要改成來自後端的資料並渲染在HTML中
2. 點擊某個商品後要跳至商品明細頁

後端建立商品資料

可先回顧一下Part2我們在設計商品資料，但這邊我將商品資料暫時先簡化一下(此非最終版本，只是先用於示範資料如何從後端定義，最終會使用Part2設計的資料結構)，

Step1. 將簡化的商品資料定義於ProductController

/// <summary>
/// 商品資料
/// </summary>
public class Product
{
   /// <summary>
   /// 商品Id
   /// </summary>
   public int Id { get; set; }
   /// <summary>
   /// 商品名稱
   /// </summary>
   public string Name { get; set; }
   /// <summary>
   /// 商品單價
   /// </summary>
   public decimal Price { get; set; }
   /// <summary>
   /// 商品描述
   /// </summary>
   public string Description { get; set; }
   /// <summary>
   /// 商品圖片
   /// </summary>
   public string Image { get; set; }
}

Step2. 並且創造出一些資料

前往 GitHub 檢視此 Gist

Step3. 將資料傳遞到html

通常我在開發MVC時會遵循一個原則「一個畫面只對應到一種資料」，當然可以對應到多個，但我通常不會這樣去開發，依照這個原則我每次從後端傳給html的資料都只有一種而已，例如，
商品列表頁，我會傳”商品集合”給html
商品明細頁，我會傳”一個商品”給html

所以，實作上我只要把要傳到html的資料放在，return View()的括弧裡面，如下，

前往 GitHub 檢視此 Gist

到這邊，ProductController.cs就完成了，完整Code如下，

前往 GitHub 檢視此 Gist

html使用剛剛傳來的資料

先來完成商品列表頁面(List.cshtml)，

Step1. 定義傳來的資料型別

方才透過return View()傳來的資料，我們可以查看方法定義可以看到傳過來的資料型別為”object”，如下

所以到了List.cshtml想要使用剛剛傳來的資料時就必須重新定義資料型別，做法很簡單，只要在最上方定義model型別即可，如下，

@model List<WebCoreLab.Controllers.ProductController.Product>

而後，就可以在這個cshtml檔案裡面去使用這個資料，閱讀/撰寫Code時請注意以下幾點，
1. 使用資料時一樣要先加上”@”
2. 使用到資料就是使用Model(注意是大寫的M)
3. 渲染一樣的html可以使用foreach語法
4. 另外，我有針對資料另外再做處理(3~6行)
完整Code如下，

前往 GitHub 檢視此 Gist