iT邦幫忙

2021 iThome 鐵人賽

DAY 8
3
自我挑戰組

【Side Project】 系列 第 8

【Side Project】 專案初始設定

在開始畫面設計之前,我們先把專案做一點更動。
因為這個專案一開始就給我們一個還不錯的樣板了,
所以我們直接複製一份他給的Layout。

  1. 複製Layout
    https://ithelp.ithome.com.tw/upload/images/20210921/20115941MAoxRxvEDx.jpg
    https://ithelp.ithome.com.tw/upload/images/20210921/20115941Fn471Zy3tc.jpg
  2. 把複製好的Layout修改名稱為**_MainLayout.cshtml**
    https://ithelp.ithome.com.tw/upload/images/20210921/20115941VzkIjE7SOp.jpg
  3. 接下來到 _ViewStart.cshtml
    修改進入點 _Layout.cshtml -> _MainLayout.cshtml
    https://ithelp.ithome.com.tw/upload/images/20210921/20115941WEAvs4AVpd.jpg
  4. 新增2個畫面,一個用來設計顧客的點菜單(Customer.cshtml),
    一個用來設計老闆看到的清單(Proprietor.cshtml)
    以顧客點菜單為例:
    https://ithelp.ithome.com.tw/upload/images/20210921/20115941d9qiWzDwhd.jpg
    https://ithelp.ithome.com.tw/upload/images/20210921/201159414JglaSUXbz.jpg
  5. _MainLayout.cshtml 把原本的頁籤替換掉
    Home -> Customer(顧客-點菜單)
    Privacy -> Proprietor(老闆-餐點清單)
    https://ithelp.ithome.com.tw/upload/images/20210921/20115941j91Yw4khtf.jpghttps://ithelp.ithome.com.tw/upload/images/20210921/20115941MQWnVkxKZQ.jpg
    (修改到這一步,直接執行的話會找不到網頁)
  6. HomeController.cs 新增程式碼
public IActionResult Privacy()
        {
            return View();
        }
public IActionResult Customer()
        {
            return View();
        }

https://ithelp.ithome.com.tw/upload/images/20210921/20115941Im02w3agLg.jpg
(到這步,就已經完成了)
7. 我們分別到 Proprietor.cshtmlCustomer.cshtml 來加入一小段文字。
Proprietor:
https://ithelp.ithome.com.tw/upload/images/20210921/20115941faBTP7Z1E9.jpg
Customer:
https://ithelp.ithome.com.tw/upload/images/20210921/20115941IumxoxHld8.jpg

  1. 執行
    https://i.imgur.com/8hsXAeK.gif

結語

為了方便之後檢視兩個畫面的成果,
所以利用了原本專案提供的樣板進行修改。

有一些剛接觸Razor寫法的小夥伴可能會覺得步驟5、步驟6比較無法理解。
簡單來說步驟5是指定後台哪一隻程式的哪個Method()去執行,
步驟六建立的那兩個Method()會對應到,我們前面所新增的 .cshmtl
最後透過 return View()來回傳畫面。


上一篇
【Side Project】 一切就緒,準備開工
下一篇
【Side Project】 顧客點菜單畫面設計
系列文
【Side Project】 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言