隨著技術(shù)的發(fā)展，ASP.NET Core MVC也推出了好長時間，經(jīng)過不斷的版本更新迭代，已經(jīng)越來越完善，本系列文章主要講解ASP.NET Core MVC開發(fā)B/S系統(tǒng)過程中所涉及到的相關(guān)內(nèi)容，適用于初學(xué)者，在校畢業(yè)生，或其他想從事ASP.NET Core MVC 系統(tǒng)開發(fā)的人員。?經(jīng)過前幾篇文章的講解，初步了解ASP.NET Core MVC項目創(chuàng)建，啟動運行，以及命名約定，創(chuàng)建控制器，視圖，模型，接收參數(shù)，傳遞數(shù)據(jù)，路由等內(nèi)容，今天繼續(xù)講解ASP.NET Core MVC?布局等相關(guān)內(nèi)容，僅供學(xué)習(xí)分享使用。

?

什么是布局？

?

大多數(shù) Web 應(yīng)用都有一個通用布局，可在頁面間切換時為用戶提供一致體驗。 該布局通常包括應(yīng)用標(biāo)頭、導(dǎo)航或菜單元素以及頁腳等常見的用戶界面元素。在如下布局中，Content內(nèi)容隨著不同請求而改變，其他頁面內(nèi)容則很少改變，進而形成統(tǒng)一的風(fēng)格，一致的用戶體驗，這就是布局的好處。

?

布局的優(yōu)勢

?

在ASP.NET Core MVC項目中，使用布局具有以下幾個優(yōu)勢：

1. 布局可使頁面在不同的請求之間保持一致的用戶體驗。
2. 布局可減少視圖中的重復(fù)代碼。

?

布局的分類

?

按照約定，默認(rèn)布局名為?_Layout.cshtml。 使用模板創(chuàng)建的新 ASP.NET Core 項目的布局文件為：

• 基于頁面的布局文件，Razor 頁面：?Pages/Shared/_Layout.cshtml
• 基于視圖控制器的布局文件，具有視圖的控制器：?Views/Shared/_Layout.cshtml

?

默認(rèn)布局

?

在通過模板創(chuàng)建的ASP.NET Core MVC項目中，默認(rèn)會生成布局視圖【Views/Shared/_Layout.cshtml】，布局視圖主要包括三部分：

1. 引入公共的JavaScript腳本，CSS樣式等資源文件
2. 定義公共的Header，F(xiàn)ooter，Left Navigation等用戶頁面元素
3. 定義Content區(qū)域，通過@RenderBody()來提供Content占位符。

布局視圖示例如下所示：

默認(rèn)情況下，每個布局必須調(diào)用?RenderBody。 無論在何處調(diào)用?RenderBody，都會呈現(xiàn)視圖的內(nèi)容。

?

指定布局

?

視圖具有Layout屬性，可以指定使用不同的布局視圖。指定的布局可以使用完整路徑 (，例如/Views/Shared/_Layout.cshtml，/Pages/Shared/_Layout.cshtml) 或部分名稱 (示例：?_Layout) 。?

默認(rèn)情況下【_ViewStart.cshtml】指定默認(rèn)的布局視圖，頁面內(nèi)容如下所示：

?

導(dǎo)入共享指令

?

視圖和頁面可以使用 Razor 指令來導(dǎo)入命名空間并使用依賴項注入。 可在一個共同的?_ViewImports.cshtml?文件中指定由許多視圖共享的指令。?_ViewImports?文件支持以下指令：

• @addTagHelper
• @removeTagHelper
• @tagHelperPrefix
• @using
• @model
• @inherits
• @inject
• @namespace

注意：該文件不支持函數(shù)和節(jié)定義等其他 Razor 功能。

默認(rèn)情況下，【_ViewImports.cshtml】頁面內(nèi)容如下所示：

?_ViewStart.cshtml，_ViewImports.cshtml?通常放置在?Pages?(或?Views) 文件夾中。如下所示：

?注意：_ViewImports.cshtml文件可以放置在任何文件夾中，在這種情況下，該文件將僅應(yīng)用于該文件夾及其子文件夾中的頁面或視圖。 從根級別開始處理?_ViewImports?文件，然后處理在頁面或視圖本身的位置之前的每個文件夾。 可以在文件夾級別覆蓋根級別指定的?_ViewImports?設(shè)置。

如果在文件層次結(jié)構(gòu)中找到多個?_ViewImports.cshtml?文件，則指令的組合行為如下所示：

• @addTagHelper@removeTagHelper：按順序全部運行
• @tagHelperPrefix：最接近視圖的文件會替代任何其他文件
• @model：最接近視圖的文件會替代任何其他文件
• @inherits：最接近視圖的文件會替代任何其他文件
• @using：全部包括在內(nèi)；忽略重復(fù)項
• @inject：針對每個屬性，最接近視圖的屬性會替代具有相同屬性名的任何其他屬性

?

取消布局

?

通過默認(rèn)模板創(chuàng)建的程序，默認(rèn)是應(yīng)用布局文件，效果如下：

?注意：content內(nèi)容也應(yīng)用了布局文件中公共的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>

取消布局效果，如下所示：

通過對比發(fā)現(xiàn)，取消布局后，原有的居中效果也消失了。說明失去了原有布局文件中css樣式的支持。

以上就是ASP.NET Core MVC從入門到精通之布局的全部內(nèi)容，旨在拋磚引玉，一起學(xué)習(xí)，共同進步。文章來源地址http://www.zghlxwxcb.cn/news/detail-416580.html

到了這里，關(guān)于ASP.NET Core MVC 從入門到精通之布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！