隨著技術的發展，ASP.NET Core MVC也推出了好長時間，經過不斷的版本更新迭代，已經越來越完善，本系列文章主要講解ASP.NET Core MVC開發B/S系統過程中所涉及到的相關內容，適用於初學者，在校畢業生，或其他想從事ASP.NET Core MVC 系統開發的人員。 經過前幾篇文章... ...
隨著技術的發展，ASP.NET Core MVC也推出了好長時間，經過不斷的版本更新迭代，已經越來越完善，本系列文章主要講解ASP.NET Core MVC開發B/S系統過程中所涉及到的相關內容，適用於初學者，在校畢業生，或其他想從事ASP.NET Core MVC 系統開發的人員。 經過前幾篇文章的講解，初步瞭解ASP.NET Core MVC項目創建，啟動運行，以及命名約定，創建控制器，視圖，模型，接收參數，傳遞數據，路由等內容，今天繼續講解ASP.NET Core MVC 佈局等相關內容，僅供學習分享使用。
什麼是佈局？
大多數 Web 應用都有一個通用佈局，可在頁面間切換時為用戶提供一致體驗。 該佈局通常包括應用標頭、導航或菜單元素以及頁腳等常見的用戶界面元素。在如下佈局中，Content內容隨著不同請求而改變，其他頁面內容則很少改變，進而形成統一的風格，一致的用戶體驗，這就是佈局的好處。
佈局的優勢
在ASP.NET Core MVC項目中，使用佈局具有以下幾個優勢：
- 佈局可使頁面在不同的請求之間保持一致的用戶體驗。
- 佈局可減少視圖中的重覆代碼。
佈局的分類
按照約定，預設佈局名為 _Layout.cshtml。 使用模板創建的新 ASP.NET Core 項目的佈局文件為：
- 基於頁面的佈局文件，Razor 頁面：
Pages/Shared/_Layout.cshtml - 基於視圖控制器的佈局文件，具有視圖的控制器：
Views/Shared/_Layout.cshtml
預設佈局
在通過模板創建的ASP.NET Core MVC項目中，預設會生成佈局視圖【Views/Shared/_Layout.cshtml】，佈局視圖主要包括三部分：
- 引入公共的JavaScript腳本，CSS樣式等資源文件
- 定義公共的Header，Footer，Left Navigation等用戶頁面元素
- 定義Content區域，通過@RenderBody()來提供Content占位符。
佈局視圖示例如下所示：
預設情況下，每個佈局必須調用 RenderBody。 無論在何處調用 RenderBody，都會呈現視圖的內容。
指定佈局
視圖具有Layout屬性，可以指定使用不同的佈局視圖。指定的佈局可以使用完整路徑 (，例如/Views/Shared/_Layout.cshtml，/Pages/Shared/_Layout.cshtml) 或部分名稱 (示例： _Layout) 。
預設情況下【_ViewStart.cshtml】指定預設的佈局視圖，頁面內容如下所示：
導入共用指令
視圖和頁面可以使用 Razor 指令來導入命名空間並使用依賴項註入。 可在一個共同的 _ViewImports.cshtml 文件中指定由許多視圖共用的指令。 _ViewImports 文件支持以下指令：
@addTagHelper@removeTagHelper@tagHelperPrefix@using@model@inherits@inject@namespace
註意：該文件不支持函數和節定義等其他 Razor 功能。
預設情況下，【_ViewImports.cshtml】頁面內容如下所示：
_ViewStart.cshtml，_ViewImports.cshtml 通常放置在 Pages (或 Views) 文件夾中。如下所示：
註意：_ViewImports.cshtml文件可以放置在任何文件夾中，在這種情況下，該文件將僅應用於該文件夾及其子文件夾中的頁面或視圖。 從根級別開始處理 _ViewImports 文件，然後處理在頁面或視圖本身的位置之前的每個文件夾。 可以在文件夾級別覆蓋根級別指定的 _ViewImports 設置。
如果在文件層次結構中找到多個 _ViewImports.cshtml 文件，則指令的組合行為如下所示：
@addTagHelper@removeTagHelper：按順序全部運行@tagHelperPrefix：最接近視圖的文件會替代任何其他文件@model：最接近視圖的文件會替代任何其他文件@inherits：最接近視圖的文件會替代任何其他文件@using：全部包括在內；忽略重覆項@inject：針對每個屬性，最接近視圖的屬性會替代具有相同屬性名的任何其他屬性
取消佈局
通過預設模板創建的程式，預設是應用佈局文件，效果如下：
註意：content內容也應用了佈局文件中公共的css樣式和javascript腳本等資源。
在視圖中，通過指定Layout屬性可以取消或替換佈局，如下所示：
1 @{ 2 ViewData["Title"] = "Home Page"; 3 Layout = null; 4 } 5 6 <div class="text-center"> 7 <h1 class="display-4">Welcome</h1> 8 <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p> 9 </div>
取消佈局效果，如下所示：
通過對比發現，取消佈局後，原有的居中效果也消失了。說明失去了原有佈局文件中css樣式的支持。
以上就是ASP.NET Core MVC從入門到精通之佈局的全部內容，旨在拋磚引玉，一起學習，共同進步。
作者：小六公子
出處：http://www.cnblogs.com/hsiang/
本文版權歸作者和博客園共有，寫文不易，支持原創，歡迎轉載【點贊】，轉載請保留此段聲明，且在文章頁面明顯位置給出原文連接，謝謝。
關註個人公眾號，定時同步更新技術及職場文章
