MVC學習之路 Part.4 – 商品頁面(一)

前言

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

談談上次的畫面

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

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

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

瀏覽該檔案就可以看到紅框部分的HTML原始碼,另外留意Layout的2個地方,如下標記,

講解上方標記2點之前,先來了解cshtml檔案,
cs副檔名為C# Source Code File,代表該檔案可被C#編譯器編譯,
html副檔名則為建立網頁時標記語言檔案(就是寫網頁的檔案),
cshtml則為2者的集合,簡單來說就是html裡面可以再寫C#語言去控制畫面渲染。

我們稱這種頁面為 Razor Page,而該頁若要寫到C#語言時則會先在開頭加上”@”符號(稱為 Razor Syntax)。

再來看一下上圖標記,

1. RenderBody :

套用該Layout的頁面內容將會填充到這個Layout的這個區域。
以上次的範例來說,Product/List.cshtml內容,

<h1>這是商品量表頁</h1>
<p>...以下陳列所有商品...</p>

即被填充於Layout RenderBody區域,如下圖(瀏覽器網頁原始碼檢視),

2. RenderSection :

自定義可被渲染的區塊,通常用於將Js、CSS檔案渲染在正確的位置。
(稍後商品頁面將會示範RenderSection的用法)

商品頁面完善

Step1. 修改Layout

修改_Layout.cshtml,除了切版樣式改成我要的之外,主要還做了幾件事,
1. Bootstrap更換成5.1.3版本(原本是4.x)
2. 增加3個RenderSection區塊(topCSS、topJS、endJS)

前往 GitHub 檢視此 Gist

Step2. 修改Product/List.cshtml頁面(商品列表)

修改商品列表頁切版

前往 GitHub 檢視此 Gist

Step3. 靜態圖片放至wwwroot目錄

做好Step1、Step2之後可以先執行看看,基本上會發現圖片跑不出來,原因就是圖片的檔案不在專案中,另外說明,.Net Core專案靜態的檔案都會放在wwwroot目錄下,如css、js、圖片(jpg.png…)、影片媒體等等,所以我們將圖片放置該目錄,

1. 先再wwwroot目錄下建立image資料夾,並命名為image

2. 將圖片檔案放至image資料夾
圖片放在GitHub上可以直接下載,以下連結,

https://github.com/ChouJustice/CoreMVC_Learning/tree/main/MVCProject/Part4/WebCoreLab/WebCoreLab/wwwroot/image

完成後會是以下截圖,

完成後即可將專案啟動起來並切換到商品列表頁,如果你看到的畫面跟我以下截圖一樣,代表你做對了👍👍👍

剛剛提到的RenderSection

在Layout中方才定義了3個RenderSection區塊,下面來示範如何使用,
假設List頁面,最上方的「商品區」3個字我想要變成紅色的字,那我不是可以寫CSS樣式更改它,如下,

可以達到我的目的,它的確變成紅色的,但是有什麼問題呢?
檢視一下原始碼,如下,

發現style區塊渲染在body內,正常來說style不是應該在head內嗎?
如果想要正確的渲染style標籤,那就要用到方才定義好的RenderSection,
這邊用到topCSS區塊所以我們將程式碼改成以下,

執行專案後,再看一次原始碼會發現style標籤渲染在Layout檔案定義好的topCSS RenderSection區域中,這樣才符合正常的網頁標籤分布👌。

以網站來說,比較常用的topCSS、topJS、endJS我都已經定義出來了,有需要時可以都可以使用😀。

目前「商品列表頁」切版完成了,但是目前畫面看到的資料都是假的,下一篇示範從後端把那些商品資料傳到前端頁面,敬請期待喔😁。

這裡另外提供這次完成的完整專案(這次是Part4),
https://github.com/ChouJustice/CoreMVC_Learning

結語

  1. 這次商品列表頁切版是用Bootstrap的框架完成,建議還不懂的新手可以先去了解一下。
    https://getbootstrap.com/
邱秉澄(Jimmy)
邱秉澄(Jimmy)

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