ASP.NET Core MVC 控制器可以使用視圖返回格式化的結果。
1.什么是視圖
在 MVC 中,視圖封裝了用戶與應用交互呈現細節。視圖是具有生成要發送到客戶端內容的,包含嵌入代碼的HTML模板。視圖使用使用 Razor 語法,該語法允許以最少的代碼或復雜度與 HTML 進行交互。
ASP.NET Core MVC 視圖默認以 .cshtml 文件保存在應用程序的 Views 文件夾里面。通常,每個控制器都有自己的文件夾,其中包含對應控制器操作方法的視圖。
除了對應操作的視圖,局部視圖,布局以及其他特定視圖文件可以用來減少重復,並允許在視圖中重復使用。
視圖在 MVC 應用程序中提供了關注的分離,將用戶界面級標記與業務邏輯分開封裝。通常,可以通過 布局與共享指令<layout>或布局視圖<partial>對應的用戶界面中重復使用。
2.創建視圖
屬於某個控制器的視圖創建在 Views/[ControllerName] 文件夾下。在控制器之間公用的視圖則放在 /Views/Shared 文件夾下。將視圖命名為與其關聯的控制器操作一樣的名字,並添加 .cshtml 擴展名。例如,為Home 控制器的 About 操作創建一個視圖,則應在 /Views/Home 文件夾下創建一個 About.cshtml 文件,或者在操作方法上右鍵點擊添加視圖:
@{ ViewData["Title"] = "About"; } <h2>@ViewData["Title"]</h2> <h3>@ViewData["Message"]</h3> <p>Use this area to provide additional information.</p>
@ 符號代表 Razor 代碼。C# 語法在 { } 包裹的 Razor 代碼塊中運行,Razor 可以通過運用 @ 符號對值進行操作,從而在HTML中顯示,就像上面 <h2> 和 <h3> 元素里面展示的那樣。
這個視圖只關心由它負責的這部分輸出。而頁面布局的部分,以及視圖中的通用外觀,在別的地方指定。
3.控制器指定視圖
視圖通常作為 ViewResult 從操作返回。操作方法可以直接創建和返回一個 ViewResult ,但一般,如果控制器繼承自 Controller ,則只需使用 View 輔助方法即可:
public IActionResult About() { ViewData["Message"] = "Your application description page."; return View(); }
View 的輔助方法有多個重載,以便於返回視圖。可以有選擇性地指定一個返回的視圖,還可以給視圖返回一個模型對象。
當操作返回視圖時,將發生稱為視圖發現的過程。此過程將確定使用哪個視圖文件。除非指定了特定的視圖文件,否則運行時首先查找控制器對應的視圖,然后在 Share 文件夾中查找匹配的視圖名稱。
當操作返回 View 方法時,比如 return View(); 這個操作的名字則被用作視圖名稱。也可以給這個方法床底一個明確的視圖名稱 return View("SomeView"); 。這兩種情況視圖都會在對應控制器的視圖文件夾和Share文件夾搜索匹配的文件。
可以提供視圖文件的路徑,在這種情況下, .cshtml 擴展名必須指定為文件路徑的一部分,return View(“Views/Home/About.cshtml ”);
4.給視圖傳遞數據
ASP.NET Core MVC 可以使用多種機制給視圖傳遞數據。最健壯的方式是在視圖中指定一個模型類型(通常稱為視圖模型,以區別於業務領域的模型類型),然后將此類型的實例從操作傳遞到視圖。建議使用模型或視圖模型將數據傳遞到視圖。這允許視圖利用強類型檢查,可以使用 @model 指令為視圖指定模型:
@model MVCTest.Models.Operation @{ ViewData["Title"] = "Create"; } <h2>Create</h2> <h4>Operation</h4> <hr /> <div class="row"> <div class="col-md-4"> <form asp-action="Create"> <div asp-validation-summary="ModelOnly" class="text-danger"></div> <div class="form-group"> <label asp-for="Id" class="control-label"></label> <input asp-for="Id" class="form-control" /> <span asp-validation-for="Id" class="text-danger"></span> </div> <div class="form-group"> <label asp-for="Name" class="control-label"></label> <input asp-for="Name" class="form-control" /> <span asp-validation-for="Name" class="text-danger"></span> </div> <div class="form-group"> <input type="submit" value="Create" class="btn btn-default" /> </div> </form> </div> </div> <div> <a asp-action="Index">Back to List</a> </div>
一旦為視圖指定了模型,就可以使用 @Model 以強類型方式訪問發送到視圖的實例。(@Model.Name)上面使用的標簽助手。控制器向視圖提供實例:
public ActionResult Create() { var model = new Operation() { Id=1, Name="test" }; return View(model); }
對於可以作為模型提供給視圖的類型沒有限制,建議傳遞具有很少或沒有行為的視圖模型,以便將業務邏輯封裝在應用程序的其他位置。
1.弱類型數據
除了強類型視圖之外,所有視圖都可以訪問弱類型的數據集合。此集合可以通過控制器和視圖上的 ViewData 或 ViewBag 屬性進行引用。ViewBag 屬於 ViewData 的一個包裝器,它提供了該集合的動態視圖,它不是一個單獨的集合。
ViewData 是通過字符串鍵訪問的字典對象,可以在其中存儲和檢索對象。當提取對象時,需要將它們轉化為特定類型。可以使用 ViewData 將數據從控制器傳遞到視圖,以及在視圖(局部視圖和布局)中傳遞。字符串可以直接存儲和使用,不需要轉化:
public IActionResult About() { var model = new Operation() { Id=1, Name="test" }; ViewData["Operation"] = model ; ViewData["Message"] = "Your application description page."; return View(); }
視圖:
@{ ViewData["Title"] = "About"; //需要轉化 var operation = ViewData["Operation"] as Operation ; } <h2>@ViewData["Title"]</h2> <h3>@ViewData["Message"]</h3> <h3>@operation.Id</h3> <h3>@operation.Name</h3> <p>Use this area to provide additional information.</p>
ViewBag 對象提供對存儲在 ViewData 中的對象的動態訪問,這樣可以更方便的使用,因為不需要轉換:
@{ ViewData["Title"] = "About"; } <h2>@ViewData["Title"]</h2> <h3>@ViewData["Message"]</h3> <h3>@ViewBag.Operation.Id</h3> <h3>@ViewBag.Operation.Name</h3> <p>Use this area to provide additional information.</p>
由於兩者都指向相同的底層 ViewData 集合,因此如果方便,可以在讀取和寫入值時,在 ViewBag 和 ViewData 之間可以混合使用。
2.動態視圖
不聲明類型,但具有傳遞給它們的模型實例的視圖可以動態引用此實例。但不提供任何編譯保護或 IntelliSense 。如果屬性不存在,則頁面將在運行時出錯。
5.更多視圖特性
標簽助手可以輕松地將服務器端行為添加到現有地 HTML 標簽中,從而避免在視圖中使用自定義代碼或助手代碼。
生成自定義 HTML 標記可以使用許多內置地 HTML 助手來實現,更復雜地 UI 邏輯(可能具有自己地數據需求)可以封裝在視圖組件(View Components)中。視圖組件提供了與控制器和視圖提供的相同的關注點,並且可以消除對於處理由常見UI 元素使用數據的動作和視圖的需要。
視圖頁支持依賴注入,允許服務注入到視圖。(會在后面提到)