阿登

前言

由於上次的內容已經完成取出商品列表頁與商品明細頁,我們已經知道MVC中資料如何由後端傳遞到前端的技巧,以及一種從前端帶資料至後端的技巧(網址帶入商品id的商品明細頁),所以本次就針對原本寫好的Code進行改動,實作分層的架構。

分層架構

這是我們這次的目標,我們要將之前的內容分解成以上,並且實作1~6的步驟。

Step1. 開始之前先搬移商品資料的位置

於專案中Models資料夾新增DBEntity資料夾,並新增DBEntity.cs檔案以及Product.cs檔案,

--

--

前言

接下來要完成的部分是,
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頁面,可得以下畫面,代表到目前為止都做對囉👍。

--

--

前言

接續上一篇的內容,接下來要完成HTML的切版,其中HTML、CSS的內容我會直接給出來,另外這次的原始碼也會放在GitHub上供大家參考😀。

談談上次的畫面

觀察上次最後完成的畫面,🔵藍框處是上次List.cshtml檔案中我編輯的HTML原始碼,那問題來了,那些🔴紅框處又是怎麼來的?

其實在專案中紅色框這部分叫做Layout,這個Layout就是頁面的「布局板塊」,簡單來說就是這個專案的每一頁都會套用的板塊,也可以依照需求的不同頁面套用不同的Layout,或是不套用Layout。

Layout預設會放在 /Views/Shared/_Layout.cshtml,如下圖,

--

--

前言

接續我們的功能「要做一個商品頁面來陳列我們的商品」,這一次的分享就會將MVC專案開啟來實作,所以請先將開發環境準備好😀。

另提醒,這篇的操作步驟略長,但多數我會提供截圖與範例程式碼,還不會有要攏長Coding的部分,所以請保持輕鬆的心情學習😁。

開啟專案

開啟Visual Studio 2022,選擇建立新的專案,這邊直接選擇「ASP.NET Core Web 應用程式(Model-View-Controller)」範本,

專案架構選擇「.NET 5.0」,另外這邊要注意下方我的專案有啟用Razor執行階段編譯,方便之後開發不用太頻繁的重新啟動應用程式。

--

--

前言

本篇延續上篇,電商專案商品資料設計,如果無法銜接可先往Part.1快速閱覽後再接續本篇閱讀。

資料設計

這邊可以先用Excel來表示一個商品資料會有什麼東西,並寫下範例資料,建議大家也可以這樣練習,會比較清楚自己想要呈現的目標,如以下。

接下來再根據上表來設計資料庫的資料表,過程中也要去思考欄位的資料類型是什麼,或是允不空值等等細節,例如,建立一筆新的商品資料時,
"商品名稱"在新增時一定要有名字,並且它是個"文字",
"商品價格"在新增時一定要給價格,並且它是個"數值",
"商品描述"在新增時不一定要有描述,並且它是一個"文字"
以此類推,你會得到以下結構,

--

--

前言

近期在整理學習過的開發技巧,打算做一系列的整合應用文章,以MVC框架的電子商務網站作為範例,一步一步完善整個內容,過程中包含前端、後端、資料庫都會使用到。

內容會盡量用簡單易懂的方式去解釋,或是用生活化的例子做舉例,適合初學者閱讀,但還是建議先打好基本知識的基礎才會學得比較輕鬆👍。

準備工具

  1. Visual Studio 2022
  2. Visual Studio Code
  3. Microsoft SQL Server Management Studio(SSMS)
  4. 預計使用框架 Core MVC 5.0 (未來升.Net 6方便)

發想階段

(以下不會出現過於複雜的商務邏輯)

假設我今天想做一個賣東西的網站,然後就會開始思考,

  1. 需要那些頁面 ?
  2. 每個頁面的目的是什麼 ?
  3. 購物流程應該怎麼規劃 ?

blablabla🤮,就一步步來吧,
首先第一個需求,因為我要賣東西,所以我需要一個網頁來陳列我的商品,可能如下圖,

商品頁面

所以就開始思考一個商品的資料該怎麼表示(這邊設計可以先用手畫,或是Excel做,範例我用SSMS資料庫圖表直接呈現✍),

--

--