ASP.NET Core Razor 布局视图 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Razor 布局視圖 - ASP.NET Core 基礎教程 - 簡單教程，簡單編程
ASP.NET Core Razor 布局視圖
上一章節(jié)中我們學習了如何使用 EF 框架從數(shù)據(jù)庫中讀取并顯示數(shù)據(jù)，我們使用了兩個模板文件 Index.cshtml 和 Detail.cshtml 。相信大家在創(chuàng)建填充 Detail.cshtml 內(nèi)容的時候會想，為什么 <!DOCTYPE html> 這樣重復的內(nèi)容我們要輸入一次又一次，有沒有辦法只輸入一次呢？
答案是肯定的，有的。
Razor 視圖引擎提供了 Layout 布局的功能，可以把視圖中公共的部分抽出來單獨為一個文件，這樣就省去了不少的麻煩
本章節(jié)，我們就來學習下 Razor 布局視圖。大多數(shù)網(wǎng)站和 Web 應用程序都會創(chuàng)建具有一些通用元素的頁面
幾乎應用程序的每個頁面都可能包含這些公共元素。在 ASP.NET Core 中，我們可以使用布局視圖來避免一次又一次的重復編寫它們
布局視圖 ( Layout View )
首先，我們來了解下 ASP.NET Core 中的布局視圖到底是什么：
布局視圖是帶有 .cshtml 擴展名的 Razor 視圖
可以隨意給布局視圖命名，一般情況下，默認的約定的布局視圖名字是 _Layout.cshtml
這是布局視圖的通用名稱，可以不需要前導下劃線。因為這只是許多開發(fā)者遵循的一個約定
用來區(qū)分布局視圖與普通視圖
布局視圖是一種特殊的視圖，一旦我們有了布局視圖，我們就可以設置我們的控制器視圖，如 Home 的 Index 視圖
我們可以將控制器視圖設置為在布局視圖內(nèi)的特定位置顯示
這種視圖布局方法意味著 Index.cshtml 不需要知道有關 logo 或頂級導航的任何信息
Index.cshtml 視圖只需要顯示控制器操提供模型的特定內(nèi)容，其它內(nèi)容則由 布局視圖來負責處理
范例
我們舉一個簡單的例子，給我們的 HelloWorld 項目添加一個布局視圖
如果我們有多個視圖，那么會看到所有的視圖都會包含一些重復的標記。比如都有一個 <html> 標簽，<head> 標簽和 <body> 標簽
雖然我們的 HelloWorld 項目中沒有導航菜單，但其它應用程序則可能存在，我們并不希望在每個視圖中都復制這些相同的標簽
現(xiàn)在，我們來創(chuàng)建 Layout 視圖
我們會在 Views 目錄下新建一個目錄 Shared，然后添加一個布局視圖 _Layout.cshtml
從前面的幾章節(jié)中我們了解到，如果 MVC 框架在控制器目錄找不到視圖，它們就會嘗試在 Shared 目錄中查找，也就是說 Shared 目錄里的視圖可以被多個控制器使用
在 Views 目錄下新建一個目錄 Shared
右鍵點擊 Shared 目錄，選擇 添加 -> 新建文件 打開新建文件對話框
如果你的電腦是 Windows 系統(tǒng)，則是選擇 添加 -> 新建項
選中左邊的 ASP.NET Core，然后從中間選中 MVC 視圖布局頁面
如果你的電腦是 Windows 系統(tǒng)，則是先選中 ASP.NET Core -> Web -> ASP.NET ，然后從中間選擇 Razor 布局
在名稱中輸入 _Layout 或 _Layout.cshtml ( Windows )，然后點擊右下角的 新建 或 添加 ( Windows )
創(chuàng)建完成后的目錄結果如下
_Layout.cshtml 中默認的內(nèi)容如下
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <div> @RenderBody() </div> </body> </html>因為布局視圖也是一個 Razor 視圖，所以也可以使用 C# 表達式
在上面的代碼中，可以看到像 RenderBody 和 ViewBag.Title 這樣的 C# 表達式。 當一個 MVC 控制器方法渲染一個普通的視圖時，如果普通的視圖有加載一個布局視圖。 那么普通視圖和它生成的 HTML 片段就會被包含進布局視圖中
而被包含的位置，就是 @RenderBody 表達式的地方，也就是說 @RenderBody 表達式用于包含普通視圖生成的內(nèi)容
布局視圖中的其它表達式，例如 @ViewBag.Title，ViewBag 是一種數(shù)據(jù)結構，可以添加任何想要放入 ViewBag 的屬性或數(shù)據(jù)。 例如可以在 ViewBag 上添加 ViewBag.Title，ViewBag.CurrentDate 或我們想要的任何屬性
我們修改下 _Layout.cshtml 文件，添加一個當前的時間
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> </head> <body> <div>@DateTime.Now</div> <div> @RenderBody() </div> </body> </html>接下來我們回到 Home/Index.html 普通控制器視圖，它的原本內(nèi)容如下
@model HelloWorld.Controllers.HomePageViewModel <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Home 控制器下的 Index 方法</title> </head> <body> <h1>歡迎!</h1> <div>這個消息來自 Home 控制器下的 Index 的視圖文件 index.cshtml </div> <table> @foreach (var employee in Model.Employees) { <tr> <td><a href="/Home/Detail/@employee.ID">@employee.ID</a></td> <td>@employee.Name</td> </tr> } </table> </body> </html>有了布局視圖，我們就可以刪除所有我們不在需要的 HTML 標簽，比如 <!DOCTHPE html> 、<html> 和 <head>，還有 <body> 以及它們對應的結束標記
刪除后的代碼如下
<h1>歡迎!</h1> <div>這個消息來自 Home 控制器下的 Index 的視圖文件 index.cshtml </div> <table> @foreach (var employee in Model.Employees) { <tr> <td><a href="/Home/Detail/@employee.ID">@employee.ID</a></td> <td>@employee.Name</td> </tr> } </table>當然了，我們還要引入布局視圖和給 ViewBag 賦值一個 title 屬性，這可以使用 @{} C# 語句塊來完成
@model HelloWorld.Controllers.HomePageViewModel @{ViewBag.Title = "Home 控制器下的 Index 方法";Layout = "~/Views/Shared/_Layout.cshtml"; } <h1>歡迎!</h1> <div>這個消息來自 Home 控制器下的 Index 的視圖文件 index.cshtml </div> <table> @foreach (var employee in Model.Employees) { <tr> <td><a href="/Home/Detail/@employee.ID">@employee.ID</a></td> <td>@employee.Name</td> </tr> } </table>保存所有的代碼，然后刷新瀏覽器，顯示如下
每刷新一次時間就會變一次，是不是很有成就感？
posted on 2018-09-29 16:15 NET未來之路 閱讀( ...) 評論( ...) 編輯 收藏轉載于:https://www.cnblogs.com/lonelyxmas/p/9724307.html
總結
以上是生活随笔為你收集整理的ASP.NET Core Razor 布局视图 - ASP.NET Core 基础教程 - 简单教程，简单编程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python 小型项目大全 36~40
- 下一篇： 设计模式之观察者模式——猫抓老鼠2