建立 ASP.NET MVC 專案

| ASP.NET MVC 實務入門 - 2020 精簡文字版

開啟「建立新專案」功能畫面,選擇「ASP.NET Web 應用程式(.NET Framework)」,按「下一步」按鈕,開始 MVC 專案的建立。



在接下來的畫面中指定各項資訊,包含「專案」、「位置」與「解決方案名稱」,Visual Studio 以方案組織專案,當MVC專案的規模擴張,有經驗的開發人員會建立不同的專案分割系統功能,再透過方案進行組織,相關議題歡迎參考《商業級 ASP.NET MVC樣式與架構實務》。按一下「建立」按鈕,建立新的專案。



在接下來出現的「建立新的 ASP.NET Web 應用程式」畫面中,選擇「空白」:



在右邊的「新增資料夾和核心參考」選項中,勾選「MVC」以提供最基本的 MVC 設定,按一下「建立」按鈕,完成專案的建立作業,並開啟專案介面。



MVC以控制器為中心,因此首先建立一個控制器,移至畫面右邊的方案總管視窗,在Controllers資料夾點右鍵擊展開功能表,到「加入」點擊展開子功能表,點擊「控制器」,如下圖:



在出現的「新增 Scaffold」畫面,列舉數種支援的控制器,選擇第一個「MVC 5 控制器 – 空白」簡化示範說明。



按一下「加入」按鈕,以下出現「加入控制器」對話方塊,其中輸入要新增的控制器名稱,一般而言,控制器以 Controller 為字尾,修改字首的部份:





以 HomeController 為新加入的控制器檔案名稱,按一下「加入」按鈕,在 Controllers 資料夾中,產生一個新的控制器檔案 HomeController.cs,這是個標準的 C# 類別檔案。



另外在Views 資料夾底下,同時產生一個對應此控制器、以其字首 Home 命名的資料夾,後續在這個資料夾中,建立檢視檔案。

現在我們有了第一個控制器檔案,開始實作之前,嘗試點擊「偵錯 > 開始偵錯」:



此時啟動 IIS Express,接下來出現的結果畫面:



網址列除了此範例專案的專屬通訊埠編號,由於沒有其它資訊,因此會根據預設組態取出指定的檔案,顯示在瀏覽器,由於未進一步完成指定的檔案設定,所以出現目前的錯誤結果。

畫面列舉可能的檔案路徑字串,只要符合其對應路徑的檔案就會正常顯示在瀏覽器。

以其中 MVC 標準路徑「~/Views/Home/Index.cshtml」為例,表示我們必須在根目錄下,Views資料夾中的Home子資料夾裏面,配置 Indesx. Cshtml 檔案,當專案執行時, MVC 會找到這個檔案並執行其中的內容,轉換成為對應的HTML網頁內容,傳送至瀏覽器顯示出來。

前述曾經提及,建立 HomeController 控制器的過程中,自動在 Views 資料夾底下,產生了 Home 資料夾,現在於其中建立需要的 Index. Cshtml 檔案,以支援 「~/Views/Home/Index.cshtml」瀏覽作業。

副檔名 cshtml 的檔案稱為「檢視」,開啟Controllers資料夾中的控制器檔案 HomeController.cs ,於 Index 方法大括弧的範圍區域中按下滑鼠右鍵展開功能選單:



點擊「新增檢視」選項,出現以下的畫面:



注意下半部「選項」的部份,都不要勾選,按一下「加入按鈕」,將檢視加入,完成之後,在資料夾Views/Home當中,出現了一個名稱 index.aspx的檔案。



畫面的編輯區域顯示檢視 Index.cshtml 的內容,這些內容以HTML網頁為架構,並支援以 @ 符號標示的 Razor 語法,可以插入 C# 程式碼進行伺服端的編輯,最後整合其中的HTML成為合法的網頁內容,傳送至瀏覽器解譯呈現。

Razor 的部份後續討論,編輯 HTML 如下:

<body>
    <div style="color: royalblue; font-size: 36px;">
                Hello, MVC!
    </div>
</body>

執行專案,出現以下的結果:



下一篇解釋專案中的各項技術細節。

沒有留言: