溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹ASP.NET Core 2.0 布局頁(yè)面的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
問(wèn)題
如何在ASP.NET Core 2.0項(xiàng)目中共享可見元素、代碼塊和指令？
答案
新建一個(gè)空項(xiàng)目，首先添加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);
}
}添加布局頁(yè)面（_Layout.cshtml）：
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
<div>
<h2>I'm in Layout page</h2>
@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";
}
<h3>I'm in View page</h3>
<p>@Greeter.Greet(@Model.Firstname, @Model.Surname)</p>
@section footer{
<h4>I'm in footer section</h4>
}
@*
@section links{
<a href="http://www.cnblogs.com/sanshi/" rel="external nofollow" target="_blank">Blog</a>
}
*@添加導(dǎo)入頁(yè)面（_ViewImports.cshtml）：
@using LayoutPage.Models @inject IGreetingService Greeter
添加起始頁(yè)面（_ViewStart.cshtml）：
@{
Layout = "_Layout";
}完成后的目錄結(jié)構(gòu)如下所示：
運(yùn)行，此時(shí)頁(yè)面顯示：
討論
ASP.NET Core提供了在不同視圖之間重用可見元素和公共代碼的方法：
1. 布局頁(yè)面
2. 起始頁(yè)面
3. 導(dǎo)入頁(yè)面
布局頁(yè)面（_Layout.cshtml）
布局頁(yè)面用來(lái)在不同的頁(yè)面之間共享公共的可見元素，從而為整個(gè)應(yīng)用程序提供一致的外觀和使用體驗(yàn)。
布局頁(yè)面會(huì)被添加到Views/Shared目錄并且命名為_Layout.cshtml（約定規(guī)則）?？梢栽谝粋€(gè)應(yīng)用程序中放置多個(gè)布局頁(yè)面。
視圖擁有一個(gè)Layout屬性來(lái)設(shè)置需要使用哪個(gè)布局。ASP.NET Core會(huì)首先在視圖相關(guān)的文件夾查找布局，如果未找到就會(huì)在Shared目錄查找。布局頁(yè)面調(diào)用@RenderBody方法來(lái)渲染視圖的內(nèi)容。
如果把_Layout.cshtml刪除，我們可以從異常信息中看到查找路徑的順序：
布局頁(yè)面也可以使用@RenderSection來(lái)決定使用視圖中的哪個(gè)段落來(lái)替換。這些段落可以是必須的或者可選的。視圖使用@section來(lái)定義這些段落的內(nèi)容。布局頁(yè)面可以使用IsSectionDefined來(lái)判斷視圖中是否定義了某個(gè)段落，并根據(jù)判斷結(jié)果進(jìn)行相應(yīng)的處理：
@if (IsSectionDefined("links"))
{
@RenderSection("links", required: false)
}
else
{
<em>No social media links supplied</em>
}導(dǎo)入頁(yè)面（_ViewImports.cshtml）
我們?cè)?jīng)在前面的文章中討論過(guò)，視圖可以使用指令來(lái)做很多事情，比如導(dǎo)入命名空間（@using），注入依賴項(xiàng)（@inject）和聲明模型類型（@model）。MVC還提供了一個(gè)導(dǎo)入頁(yè)面來(lái)為一個(gè)或者多個(gè)視圖聲明公共的指令。
導(dǎo)入頁(yè)面一般被添加到Views目錄并且被命名為_ViewImports.cshtml。它也可以被添加到其他目錄（比如視圖目錄），這種情況下它會(huì)被應(yīng)用到此目錄下面的視圖（包含子目錄）。
如果存在多個(gè)導(dǎo)入頁(yè)面，則使用最靠近視圖的指令（比如@model，@inject），另一種情況是所有指令被合并到一起（比如@using，@addTagHelper）。
起始頁(yè)面（_ViewStart.cshtml）
MVC提供了一種在所有視圖之前之前運(yùn)行代碼的機(jī)制，這就是起始頁(yè)面。起始頁(yè)面會(huì)在每一個(gè)視圖之前運(yùn)行，除了布局頁(yè)面和部分視圖。
起始頁(yè)面一般被添加到Views目錄并且被命名為_ViewStart.cshtml。如果存在多個(gè)起始頁(yè)面，它們會(huì)按照分層順序執(zhí)行，從根目錄到子目錄。
起始頁(yè)面常用來(lái)為目錄下的所有視圖設(shè)置布局頁(yè)面。
以上是“ASP.NET Core 2.0 布局頁(yè)面的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼