ASP.NET MVC - 檢視



在 ASP.NET MVC 應用程式中,沒有像頁面這樣的東西,並且當您在 URL 中指定路徑時,它也不包含任何直接對應於頁面的內容。在 ASP.NET MVC 應用程式中最接近頁面的是被稱為檢視的東西。

在 ASP.NET MVC 應用程式中,所有傳入的瀏覽器請求都由控制器處理,並且這些請求對映到控制器操作。控制器操作可能會返回一個檢視,或者它也可能執行其他型別的操作,例如重定向到另一個控制器操作。

讓我們透過建立一個新的 ASP.NET MVC 專案來檢視檢視的一個簡單示例。

步驟 1 - 開啟 Visual Studio 並單擊“檔案”→“新建”→“專案”選單選項。

將開啟一個新的專案對話方塊。

Visual Studio

步驟 2 - 從左側窗格中選擇“模板”→“Visual C#”→“Web”。

步驟 3 - 在中間窗格中,選擇“ASP.NET Web 應用程式”。

步驟 4 - 在“名稱”欄位中輸入專案名稱“MVCViewDemo”,然後單擊“確定”繼續。您將看到以下對話方塊,提示您設定 ASP.NET 專案的初始內容。

MVCViewDemo

步驟 5 - 為簡單起見,選擇“空”選項,並在“新增用於”部分中選中“MVC”複選框,然後單擊“確定”。

它將建立一個具有最少預定義內容的基本 MVC 專案。現在我們需要新增控制器。

步驟 6 - 右鍵單擊解決方案資源管理器中的控制器資料夾,然後選擇“新增”→“控制器”。

它將顯示“新增腳手架”對話方塊。

Controller Folder

步驟 7 - 選擇“MVC 5 Controller - 空”選項,然後單擊“新增”按鈕。

將出現“新增控制器”對話方塊。

Add Controller Dialog

步驟 8 - 將名稱設定為 HomeController 並單擊“新增”按鈕。

您將在“Controllers”資料夾中看到一個新的 C# 檔案“HomeController.cs”,該檔案也將在 Visual Studio 中開啟以進行編輯。

讓我們更新 HomeController.cs 檔案,其中包含兩個操作方法,如下面的程式碼所示。

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCViewDemo.Controllers {
   public class HomeController : Controller{
      // GET: Home
      public ActionResult Index(){
         return View();
      }
		
      public string Mycontroller(){
         return "Hi, I am a controller";
      }
   }
}

步驟 9 - 執行此應用程式,並在瀏覽器中的 URL 後附加 /Home/MyController,然後按 Enter 鍵。您將收到以下輸出。

MyController

由於 MyController 操作只是返回字串,因此要從操作返回檢視,我們需要先新增一個檢視。

步驟 10 - 在新增檢視之前,讓我們再新增一個操作,該操作將返回預設檢視。

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCViewDemo.Controllers {
   public class HomeController : Controller{
      // GET: Home
      public ActionResult Index(){
         return View();
      }
		
      public string Mycontroller(){
         return "Hi, I am a controller";
      }
		
      public ActionResult MyView(){
         return View();
      }
   }
}

步驟 11 - 執行此應用程式,並在瀏覽器中的 URL 後附加 /Home/MyView,然後按 Enter 鍵。您將收到以下輸出。

MyView View

您可以在此處看到我們有一個錯誤,並且此錯誤實際上非常具有描述性,它告訴我們找不到 MyView 檢視。

步驟 12 - 要新增檢視,請右鍵單擊 MyView 操作內部,然後選擇“新增檢視”。

MyView Action

它將顯示“新增檢視”對話方塊,它將新增預設名稱。

Add View Dialog

步驟 13 - 取消選中“使用佈局頁”複選框,然後單擊“新增”按鈕。

現在我們在檢視中有了預設程式碼。

Use Layout Page

步驟 14 - 使用以下程式碼在此檢視中新增一些文字。

@{
   Layout = null;
}

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>MyView</title>
   </head>
	
   <body>
      <div>
         Hi, I am a view
      </div>
   </body>
	
</html>

步驟 15 - 執行此應用程式,並在瀏覽器中的 URL 後附加 /Home/MyView。按 Enter 鍵,您將收到以下輸出。

I am View

您現在可以看到來自檢視的文字。

廣告