(DAY 2)C# ASP .NET MVC實作: 30天打造屬於你的網站應用程式-建立第一個網站應用程式

2022 iThome 鐵人賽

DAY 2

Software Development

C# ASP.NET MVC實作: 30天打造屬於你的網站應用程式系列第 2 篇

(DAY 2)C# ASP .NET MVC實作: 30天打造屬於你的網站應用程式-建立第一個網站應用程式

14th鐵人賽 c# asp.net mvc

Coding小僧

2022-09-16 09:04:22

16723 瀏覽

分享至

今天我們開始進入正題，話不多說開始吧～

● 開發工具(IDE)安裝

到微軟官網下載Visual Studio 2022(https://visualstudio.microsoft.com/zh-hant/vs/whatsnew/) 我這邊下載使用供個人開發用途的Community版本，點擊後即會開始下載安裝程式。如果本身已經有安裝之前版本的話(ex:2019版)也可以直接使用，只是介面可能稍微不同。
下載完成後進行安裝步驟，這裡就不詳述了，僅需要注意當跳出「Visual Studio Installer」時，務必勾選 ASP .NET與網頁程式開發選項並安裝，這樣才能建立ASP .NET相關的專案。

● 建立新專案

打開 Visual Studio ，點選「建立新的專案」
搜尋 ASP .NET Web 應用程式 (.NET Framwork) 專案，點選並按「下一步」
※注意不要點選成「ASP .NET Core Web 應用程式」或其他名稱很像的專案
設定專案名稱為「MyFirstWebApp」(或你自己喜歡的名稱)，其他選項照預設即可，按下「建立」
接著選擇「MVC」範本，其他選項不變，按下「建立」後即會生成新專案
直接點選「偵錯」鍵(畫面中「IIS EXpress」按鈕)或按鍵盤的F5鍵，進行建置與開啟網頁
網頁開啟後會發現專案已經有建立一個首頁的預設頁面，到此可以算是完成第一個網頁程式囉！
直接在瀏覽器頁面關閉網頁視窗，或是在IDE按下「停止偵錯」按鈕，就可以結束偵錯了

● 修改檢視頁面

第一個網頁建立成功後，我們來對顯示內容稍微動點手腳吧～

在「方案總管」下會看到已建立的專案資料夾，找到「Views」→「Home」資料夾，底下有個「Index.cshtml」檔案，點擊2下開啟
開啟後在程式碼任一處按下滑鼠右鍵，點選「在瀏覽器中檢視」，此時會發現一樣會顯示剛開始建立的首頁，接著我們可以來稍微對照一下畫面和程式碼內容
觀察首頁畫面大致可以分成三個部分：
- 上方- 導覽列
- 中間- 幾個整齊的版面區塊
- 下方- 一行小小的文字
  
  畫面先別關閉，切換看 Index.cshtml 的Code內容，應該不難發現對照的就是首頁畫面中間的部分 (這時就知道電腦雙螢幕的重要性了，寫Code的人怎麼不能沒有雙螢幕呢？)
所以接著我們嘗試修改看看內容：
(1) 修改第一個<div>區塊下的<h1>標題內容
(2) 修改最上面 @{ }符號包圍區塊的文字
※也可以自行嘗試修改其他段落內容、超連結網址等等，就不再多做示範了

@{
    ViewBag.Title = "Coding小僧的首頁";
}

<div class="jumbotron">
    <h1>Coding小僧的第一個ASP.NET MVC程式</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

@{ }符號和 ViewBag.Title是什麼我們暫時先不用知道，總之修改完成後記得先按下Ctrl+s進行存檔，接著直接在瀏覽器中的首頁畫面按下重新整理，這時應該就可以發現畫面內容已經更新囉～
同時我們發現 ViewBag.Title修改的內容，其實就是顯示在視窗左上方的標題。

● 預設Layout版面與 RenderBody

再來探討一下首頁畫面的其他部分，我們可以先試著點選上方導覽列的「首頁」、「關於」、「連絡人」連結，會發現除了中間的內容會變化以外，上方的導覽列與最下方一行的小文字是一直存在的。

這是因為專案已經有預設套用的版面配置頁(Layout)，我們在專案Views下可以找到一個名為「ViewStart.cshtml」，裡面會預設指定專案的檢視頁面套用"~/Views/Shared/Layout.cshtml"，於是我們再到Views → Shared底下找到Layout.cshtml檔案，便可以發現原來導覽列與最下方文字內容是寫在這裡面了。

那麼一樣的道理，在裡面動些手腳也是輕而易舉的事：

在<head>標籤下的<title>標籤裡修改文字內容，同時可以發現完整的視窗標題(含ViewBag.Title)其實是在這裡

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - 歡迎光臨^_^</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

在最下方的<div>標籤內的<footer>標籤 → <p>標籤內修改文字內容

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - Coding小僧的 ASP.NET MVC 應用程式</p>
        </footer>
    </div>

在上方這段Code可以看到有個 @RenderBody()的東西，實際上它就等於任何有套用這份Layout的View檢視頁面，也就是說View會放入此處與Layout進行合併，就成了我們看到的網頁畫面啦～