MVC學習之路 Part.5 – 商品頁面(二)

前言

接下來要完成的部分是,
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. 並且創造出一些資料

Step3. 將資料傳遞到html

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

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

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

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如下,

完成商品明細頁

可使用Part3、Part4的內容完成商品明細頁,Code我放在以下,

商品明細頁切版 + Razor資料渲染(Detail.cshtml)

執行並查看Detail頁面,可得以下畫面,代表到目前為止都做對囉👍。

繼續,目前的商品明細頁呈現的都是”熊熊0號”這個商品,應該要怎麼做才能呈現不同商品呢?

這邊就要修改後端的程式碼了,看一下ProductController下Detail的Action方法,

剛剛寫的是從productList拿第一個商品傳給View,所以現在將它改成由外部傳入的id參數來搜尋productList的商品,如下,

改完之後,再執行專案並瀏覽Detail頁面,會發現程式碼跳出錯誤,如下圖,

Why? 為什麼?

因為剛剛改的Action我把id作為參數傳入,說過網址對應的就是Controller以及Action方法,現在Action方法改成有帶參數了,那網址就也要跟著修改,網址後面加上Id參數,如,?id=1,下面舉幾個例子給大家看(記得對照商品集合看資料對不對),

例1,我要看Id是3的商品,/Product/Detail?id=3

例2,我要看Id是8的商品,/Product/Detail?id=8

例3,也可以這樣寫,這跟路由的設定有關,剛好參數的命名是Id,
/Product/Detail/8

串聯商品列表頁與商品明細頁

商品列表與商品明細都已經完成了,那這2個頁面該怎麼串起來呢?
其實簡單來說就是列表頁的每個商品設定超連結連過去就好了,只要網址是對的,應該都沒問題,所以改一下List.cshtml裡面每個商品的超連結,網址就根據設計Detail頁面的路由去寫,修改的地方為如下第20、33行,

完成後即可自由的切換商品列表頁以及商品明細頁✌✌✌。

下一次我會把整個後端重構,會講到分層的架構,讓每個地方分工更明確,所以請務必看懂這次展示的所有內容,加油💪。

最後完成的完整專案(這次是Part5),
https://github.com/ChouJustice/CoreMVC_Learning

結語

  1. 這是的內容圍繞在整個MVC專案內後端與前端的資料交換,請務必熟悉這些操作,未來還有更複雜的資料傳遞行為。
  2. 除了這次的內容之外這次的操作也有一些是之前的內容,所以也務必頻繁的練習之前的操作與觀念。
邱秉澄(Jimmy)
邱秉澄(Jimmy)

於 Build School 擔任 Software Engineer & Student Coach
聯絡方式: jimmychiu@build-school.com