淺談ASP.NET Core 2.0 布局頁面(譯)
本文介紹了ASP.NET Core 2.0 布局頁面，分享給大家，具體如下：
問題
如何在ASP.NET Core 2.0項目中共享可見元素、代碼塊和指令？
答案
新建一個空項目，首先添加GreetingService服務(wù)和UserViewModel模型：
public interface IGreetingService
{
string Greet(string firstname, string surname);
}
public class GreetingService : IGreetingService
{
public string Greet(string firstname, string surname)
{
return $"Hello {firstname} {surname}";
}
}
然后在Startup中添加MVC服務(wù)和GreetingService服務(wù)，配置MVC中間件：
public void ConfigureServices(IServiceCollection services)
{
services.AddScoped<IGreetingService, GreetingService>();
services.AddMvc();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}
添加控制器HomeController，修改Index方法并返回ViewResult：
public class HomeController : Controller
{
public IActionResult Index()
{
var model = new UserViewModel
{
Firstname = "Tahir",
Surname = "Naushad"
};
return View(model);
}
}
添加布局頁面（_Layout.cshtml）：
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
<div>
<h1>I'm in Layout page</h1>
@RenderBody()
@RenderSection("footer", required: false)
@if (IsSectionDefined("links"))
{
@RenderSection("links", required: false)
}
else
{
<em>No social media links supplied</em>
}
</div>
</body>
</html>
添加視圖，注意遵守命名約定（Views/Home/Index.cshtml）：
@model UserViewModel
@{
ViewBag.Title = "ASP.NET Core";
}
<h2>I'm in View page</h2>
<p>@Greeter.Greet(@Model.Firstname, @Model.Surname)</p>
@section footer{
<h3>I'm in footer section</h3>
}
@*
@section links{
<a rel="external nofollow" target="_blank">Blog</a>
}
*@
添加導(dǎo)入頁面（_ViewImports.cshtml）：
@using LayoutPage.Models @inject IGreetingService Greeter
添加起始頁面（_ViewStart.cshtml）：
@{
Layout = "_Layout";
}
完成后的目錄結(jié)構(gòu)如下所示：
運行，此時頁面顯示：
討論
ASP.NET Core提供了在不同視圖之間重用可見元素和公共代碼的方法：
1. 布局頁面
2. 起始頁面
3. 導(dǎo)入頁面
布局頁面（_Layout.cshtml）
布局頁面用來在不同的頁面之間共享公共的可見元素，從而為整個應(yīng)用程序提供一致的外觀和使用體驗。
布局頁面會被添加到Views/Shared目錄并且命名為_Layout.cshtml（約定規(guī)則）?？梢栽谝粋€應(yīng)用程序中放置多個布局頁面。
視圖擁有一個Layout屬性來設(shè)置需要使用哪個布局。ASP.NET Core會首先在視圖相關(guān)的文件夾查找布局，如果未找到就會在Shared目錄查找。布局頁面調(diào)用@RenderBody方法來渲染視圖的內(nèi)容。
如果把_Layout.cshtml刪除，我們可以從異常信息中看到查找路徑的順序：
布局頁面也可以使用@RenderSection來決定使用視圖中的哪個段落來替換。這些段落可以是必須的或者可選的。視圖使用@section來定義這些段落的內(nèi)容。布局頁面可以使用IsSectionDefined來判斷視圖中是否定義了某個段落，并根據(jù)判斷結(jié)果進行相應(yīng)的處理：
@if (IsSectionDefined("links"))
{
@RenderSection("links", required: false)
}
else
{
<em>No social media links supplied</em>
}
導(dǎo)入頁面（_ViewImports.cshtml）
我們曾經(jīng)在前面的文章中討論過，視圖可以使用指令來做很多事情，比如導(dǎo)入命名空間（@using），注入依賴項（@inject）和聲明模型類型（@model）。MVC還提供了一個導(dǎo)入頁面來為一個或者多個視圖聲明公共的指令。
導(dǎo)入頁面一般被添加到Views目錄并且被命名為_ViewImports.cshtml。它也可以被添加到其他目錄（比如視圖目錄），這種情況下它會被應(yīng)用到此目錄下面的視圖（包含子目錄）。
如果存在多個導(dǎo)入頁面，則使用最靠近視圖的指令（比如@model，@inject），另一種情況是所有指令被合并到一起（比如@using，@addTagHelper）。
起始頁面（_ViewStart.cshtml）
MVC提供了一種在所有視圖之前之前運行代碼的機制，這就是起始頁面。起始頁面會在每一個視圖之前運行，除了布局頁面和部分視圖。
起始頁面一般被添加到Views目錄并且被命名為_ViewStart.cshtml。如果存在多個起始頁面，它們會按照分層順序執(zhí)行，從根目錄到子目錄。
起始頁面常用來為目錄下的所有視圖設(shè)置布局頁面。
原文：https://tahirnaushad.com/2017/08/23/asp-net-core-2-0-mvc-layout-pages/
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了ASP.NET中將聲音文件添加到資源中并進行播放的方法,實例分析了聲音文件的添加及播放實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
本篇文章討論一個你可以選擇利用的ASP.NET4中小小的，但很棒的新特性，即自動啟動，需要的朋友可以參考下2015-10-10
.NET使用YARP根據(jù)域名轉(zhuǎn)發(fā)實現(xiàn)反向代理
這篇文章介紹了.NET使用YARP根據(jù)域名轉(zhuǎn)發(fā)實現(xiàn)反向代理的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
Asp.net Core 1.1 升級后操作mysql出錯的解決辦法
這篇文章主要介紹了Asp.net Core 1.1 升級后操作mysql出錯的解決辦法,需要的朋友可以參考下2016-12-12
ASP.NET?Core中Razor頁面與MVC區(qū)別介紹
這篇文章介紹了ASP.NET?Core中Razor頁面與MVC的區(qū)別，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
詳解最好的.NET開源免費ZIP庫DotNetZip（.NET組件介紹之三）
本篇文章主要介紹了.NET開源免費ZIP庫DotNetZip組件的介紹，可以實現(xiàn)對文件的壓縮和解壓，有興趣的朋友可以了解一下。2016-12-12![Asp.net 連接MySQL的實現(xiàn)代碼[]](http://img.jbzj.com/images/xgimg/bcimg6.png)
ASP.NET連接MySQL需要一個組件(.net本身不提供訪問MySQL的驅(qū)動)MySQL.Data.Dll，此為官方提供(純C#開發(fā)，開源噢)，有多個版本選擇，采用的數(shù)據(jù)訪問模式為ADO.NET，跟asp.net訪問sqlserver很像，非常簡單。2009-08-08
.NET?ORM框架SqlSugar實現(xiàn)導(dǎo)航查詢功能
今天這篇文章分享一款好用簡單的ORM框架?SqlSugar,相比?EF?Core的導(dǎo)航查詢更加簡單,配置更加容易,幾分鐘就能上手,對.NET?ORM框架SqlSugar實現(xiàn)導(dǎo)航查詢功能感興趣的朋友一起看看吧2022-04-04
這篇文章主要介紹了xUnit 編寫 ASP.NET Core 單元測試的方法，文中代碼非常詳細，幫助大家更好的參考和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
.NET CORE動態(tài)調(diào)用泛型方法詳解
這篇文章主要為大家詳細介紹了.NET CORE動態(tài)調(diào)用泛型方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08