前言
接續我們的功能「要做一個商品頁面來陳列我們的商品」，這一次的分享就會將MVC專案開啟來實作，所以請先將開發環境準備好😀。
另提醒，這篇的操作步驟略長，但多數我會提供截圖與範例程式碼，還不會有要攏長Coding的部分，所以請保持輕鬆的心情學習😁。
開啟專案
開啟Visual Studio 2022，選擇建立新的專案，這邊直接選擇「ASP.NET Core Web 應用程式(Model-View-Controller)」範本，
專案架構選擇「.NET 5.0」，另外這邊要注意下方我的專案有啟用Razor執行階段編譯，方便之後開發不用太頻繁的重新啟動應用程式。
開啟專案後，這邊可以在方案總管看到MVC專案中特色的三個資料夾，
Models、Views、Controllers，我們將會利用到這三個東西逐步完成我們的商品頁面👍。
開始實作商品頁面
Step1. Controllers資料夾底下建立新的控制器(Controller)
選擇「MVC 控制器 – 空白」，並且命名做ProductController，如下步驟，
Step2. 加入新的Action方法
先將原有的 Index 方法刪除，另外加入List、Detail方法，如下代碼，
Step3. 為Action方法建立檢視
到這邊可以先觀察一下，可以看到List方法會最後會回傳View，可以解讀成「最後回傳一個畫面」，所以問題來了，
那畫面又是什麼 ?
現在是在寫網頁，你的畫面當然是一個HTML的檔案呀!
那怎麼知道要對應的HTML網頁是哪個 ? HTML頁面又在哪 ?
可以檢查對應的檢視(View)是什麼，滑鼠右鍵點擊你的方法，選擇「移至檢視」，如下，
此時，會發現跳出提示，工具告訴你它找不到檢視，
為什麼 ? 因為目前的確還沒為List這一頁建立HTML檔案😅，
所以應該為你的Action方法建立檢視，滑鼠右鍵點擊你的方法，這次選擇「新增檢視」，如下，
選擇「Razor 檢視 – 空白」，命名為List
此時，會看到他會幫你將檢視頁面(HTML檔案)新增在Views/Product/List.cshtml，(這邊先不管什麼是cshtml，就先當作html)，
可以觀察一下專案目錄結構，會發現它跟你的Controller是有關係的，如下表示，
Views
Home ➡ 對應到HomeController
Index.cshtml ➡ 對應到Index方法
Privacy.cshtml ➡ 對應到Privacy方法
Product ➡ 對應到ProductController
List.cshtml ➡ 對應到List方法
Step4. 簡單編輯新增的檢視
建立檢視以後可先在List.cshtml檔案內新增一些簡單的HTML內容，如下，
Tips: 這時可以再去試一下，「移至檢視」的動作，會發現Visual Studio會幫你找到List.cshtml檔案。
Step5. 運行專案查看目前的成果
點擊下圖(圖1)指示按鈕開始偵錯專案(預設是IIS Express)，會開啟瀏覽器看到專案預設初始頁面(圖2，初始頁面為什麼是這個先不管)
先專注於我們剛剛做的頁面，網址列加上 /Product/List 並前往該網址，即可看到剛剛建立的檢視畫面🎉，如下圖，
另外，不知道大家有沒有發現，網址對應的就是Controller以及Action方法，這就是預設的路由對應 ( /{controller}/{action} )。
本篇先在這裡做結尾，這次內容需要多多重複練習操作，尤其是針對開發工具Visual Studio不熟悉的人更需要反覆練習且思考每個步驟在做什麼，
下一篇，會持續完善商品頁面😁。
這裡另外提供這次完成的完整專案，
https://github.com/ChouJustice/CoreMVC_Learning
結語
- 首先恭喜各位成功開啟第一個MVC專案，但這只是剛開始，如果可以請反覆練習這次的操作。
- 可能會慢慢發現內文中會開始有一些專有名詞，例如，IIS Express、路由 等，這些有的非屬於MVC技術的知識我不會特別在這邊解釋，但是建議要去查一下，至少要有基本觀念，對於後續的學習會有很大的幫助。
- 今天有少部分的HTML切版(List.cshtml，真的很少😂)，但接下來會完成商品頁面的切版，切版內容會變多，所以也建議要有HTML、CSS的相關知識對學習會比較輕鬆。
