淺談ASP.NET Core 2.0 布局頁(yè)面(譯)

更新時(shí)間：2017年11月06日 10:26:31 作者：三生石上(FineUI控件)

本篇文章主要介紹了淺談ASP.NET Core 2.0 布局頁(yè)面(譯)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了ASP.NET Core 2.0 布局頁(yè)面，分享給大家，具體如下：

問(wèn)題

如何在ASP.NET Core 2.0項(xiàng)目中共享可見(jiàn)元素、代碼塊和指令？

答案

新建一個(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>

    <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)入頁(yè)面（_ViewImports.cshtml）：

@using LayoutPage.Models

@inject IGreetingService Greeter

添加起始頁(yè)面（_ViewStart.cshtml）：

@{

  Layout = "_Layout";

}

完成后的目錄結(jié)構(gòu)如下所示：

運(yùn)行，此時(shí)頁(yè)面顯示：

討論

ASP.NET Core提供了在不同視圖之間重用可見(jiàn)元素和公共代碼的方法：

1. 布局頁(yè)面

2. 起始頁(yè)面

3. 導(dǎo)入頁(yè)面

布局頁(yè)面（_Layout.cshtml）

布局頁(yè)面用來(lái)在不同的頁(yè)面之間共享公共的可見(jiàn)元素，從而為整個(gè)應(yīng)用程序提供一致的外觀和使用體驗(yàn)。

布局頁(yè)面會(huì)被添加到Views/Shared目錄并且命名為_(kāi)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目錄并且被命名為_(kāi)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目錄并且被命名為_(kāi)ViewStart.cshtml。如果存在多個(gè)起始頁(yè)面，它們會(huì)按照分層順序執(zhí)行，從根目錄到子目錄。

起始頁(yè)面常用來(lái)為目錄下的所有視圖設(shè)置布局頁(yè)面。

源代碼下載

原文：https://tahirnaushad.com/2017/08/23/asp-net-core-2-0-mvc-layout-pages/

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: