MVC 框架 - 第一個應用程式

讓我們開始使用檢視和控制器建立我們的第一個 MVC 應用程式。一旦我們對基本的 MVC 應用程式如何工作有了初步的實踐經驗，我們將在接下來的章節中學習所有單獨的元件和概念。

建立第一個 MVC 應用程式

步驟 1 - 啟動 Visual Studio 並選擇檔案 → 新建 → 專案。選擇 Web → ASP.NET MVC Web 應用程式，並將此專案命名為 FirstMVCApplicatio。選擇位置為 C:\MVC。單擊確定。

步驟 2 - 這將開啟專案模板選項。選擇空模板，並將檢視引擎設定為 Razor。單擊確定。

現在，Visual Studio 將建立我們的第一個 MVC 專案，如下面的螢幕截圖所示。

步驟 3 - 現在，我們將建立應用程式中的第一個控制器。控制器只是簡單的 C# 類，其中包含多個公共方法，稱為操作方法。要新增新的控制器，請右鍵單擊專案中的 Controllers 資料夾，然後選擇新增 → 控制器。將控制器命名為 HomeController 並單擊新增。

這將在 Controllers 資料夾下建立一個類檔案 HomeController.cs，其中包含以下預設程式碼。

using System; 
using System.Web.Mvc;  

namespace FirstMVCApplication.Controllers { 
   
   public class HomeController : Controller { 
      
      public ViewResult Index() { 
         return View(); 
      }  
   } 
}

上面的程式碼基本上定義了我們 HomeController 中的公共方法 Index，並返回一個 ViewResult 物件。在接下來的步驟中，我們將學習如何使用 ViewResult 物件返回檢視。

步驟 4 - 現在，我們將向我們的 Home 控制器新增一個新的檢視。要新增新的檢視，請右鍵單擊檢視資料夾，然後單擊新增 → 檢視。

步驟 5 - 將新檢視命名為 Index，並將檢視引擎設定為 Razor (SCHTML)。單擊新增。

這將在 Views/Home 資料夾中新增一個新的 cshtml 檔案，其中包含以下程式碼：

@{ 
   Layout = null; 
}  

<html> 
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>Index</title> 
   </head> 

   <body> 
      <div> 
      
      </div> 
   </body> 
</html>

步驟 6 - 使用以下程式碼修改上述檢視的主體內容：

<body> 
   <div> 
      Welcome to My First MVC Application (<b>From Index View</b>) 
   </div> 
</body>

步驟 7 - 現在執行應用程式。這將在瀏覽器中為您提供以下輸出。此輸出是根據我們檢視檔案中的內容呈現的。應用程式首先呼叫控制器，然後控制器呼叫此檢視併產生輸出。

在步驟 7 中，我們收到的輸出基於我們檢視檔案的內容，並且沒有與控制器互動。接下來，我們將建立一個小的示例，使用檢視和控制器的互動來顯示帶有當前時間的歡迎訊息。

步驟 8 - MVC 使用 ViewBag 物件在控制器和檢視之間傳遞資料。開啟 HomeController.cs 並將 Index 函式編輯為以下程式碼。

public ViewResult Index() { 
   int hour = DateTime.Now.Hour; 
             
   ViewBag.Greeting =
   hour < 12  
   ? "Good Morning. Time is" +  DateTime.Now.ToShortTimeString() 
   : "Good Afternoon. Time is " + DateTime.Now.ToShortTimeString(); 
             
   return View(); 
}

在上面的程式碼中，我們設定了 ViewBag 物件的 Greeting 屬性的值。程式碼檢查當前小時，並使用 return View() 語句相應地返回“早上好/下午好”訊息。請注意，這裡的 Greeting 是我們與 ViewBag 物件一起使用的示例屬性。您可以使用任何其他屬性名稱來代替 Greeting。

步驟 9 - 開啟 Index.cshtml，並將以下程式碼複製到主體部分。

<body> 
   <div> 
      @ViewBag.Greeting (<b>From Index View</b>) 
   </div> 
</body>

在上面的程式碼中，我們使用 @ 訪問 ViewBag 物件的 Greeting 屬性的值（該值將從控制器設定）。

步驟 10 - 現在再次執行應用程式。這次我們的程式碼將首先執行控制器，設定 ViewBag，然後使用檢視程式碼呈現它。輸出如下所示。

列印頁面