浅谈ASP.NET Core 2.0 布局页面(译)

所属分类: 网络编程 / ASP.NET 阅读数: 987
收藏 0 赞 0 分享

本文介绍了ASP.NET Core 2.0 布局页面,分享给大家,具体如下:

问题

如何在ASP.NET Core 2.0项目中共享可见元素、代码块和指令?

答案

新建一个空项目,首先添加GreetingService服务和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服务和GreetingService服务,配置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 href="http://www.cnblogs.com/sanshi/" rel="external nofollow" target="_blank">Blog</a>

  }

*@ 

添加导入页面(_ViewImports.cshtml):

@using LayoutPage.Models

@inject IGreetingService Greeter 

添加起始页面(_ViewStart.cshtml):

@{

  Layout = "_Layout";

} 

完成后的目录结构如下所示:

运行,此时页面显示:

讨论

ASP.NET Core提供了在不同视图之间重用可见元素和公共代码的方法:

1. 布局页面

2. 起始页面

3. 导入页面

布局页面(_Layout.cshtml)

布局页面用来在不同的页面之间共享公共的可见元素,从而为整个应用程序提供一致的外观和使用体验。

布局页面会被添加到Views/Shared目录并且命名为_Layout.cshtml(约定规则)。可以在一个应用程序中放置多个布局页面。

视图拥有一个Layout属性来设置需要使用哪个布局。ASP.NET Core会首先在视图相关的文件夹查找布局,如果未找到就会在Shared目录查找。布局页面调用@RenderBody方法来渲染视图的内容。

如果把_Layout.cshtml删除,我们可以从异常信息中看到查找路径的顺序:

 布局页面也可以使用@RenderSection来决定使用视图中的哪个段落来替换。这些段落可以是必须的或者可选的。视图使用@section来定义这些段落的内容。布局页面可以使用IsSectionDefined来判断视图中是否定义了某个段落,并根据判断结果进行相应的处理:

@if (IsSectionDefined("links"))

{

  @RenderSection("links", required: false)

}

else

{

  <em>No social media links supplied</em>

} 

导入页面(_ViewImports.cshtml)

我们曾经在前面的文章中讨论过,视图可以使用指令来做很多事情,比如导入命名空间(@using),注入依赖项(@inject)和声明模型类型(@model)。MVC还提供了一个导入页面来为一个或者多个视图声明公共的指令。

导入页面一般被添加到Views目录并且被命名为_ViewImports.cshtml。它也可以被添加到其他目录(比如视图目录),这种情况下它会被应用到此目录下面的视图(包含子目录)。

如果存在多个导入页面,则使用最靠近视图的指令(比如@model,@inject),另一种情况是所有指令被合并到一起(比如@using,@addTagHelper)。

起始页面(_ViewStart.cshtml)

MVC提供了一种在所有视图之前之前运行代码的机制,这就是起始页面。起始页面会在每一个视图之前运行,除了布局页面和部分视图。

起始页面一般被添加到Views目录并且被命名为_ViewStart.cshtml。如果存在多个起始页面,它们会按照分层顺序执行,从根目录到子目录。

起始页面常用来为目录下的所有视图设置布局页面。

源代码下载

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

.NET Core源码解析配置文件及依赖注入

这篇文章我们设计了一些复杂的概念,因为要对ASP.NET Core的启动及运行原理、配置文件的加载过程进行分析,依赖注入,控制反转等概念的讲解等
收藏 0 赞 0 分享

.NET Corek中Git的常用命令及实战演练

这篇文章将通过故事的形式从Git的历史谈起,并讲述Git的强大之处。然后通过实战演练教你如何在Github以及码云上托管我们的代码并进行代码的版本控制
收藏 0 赞 0 分享

Asp.Net Core WebAPI使用Swagger时API隐藏和分组详解

这篇文章主要给大家介绍了关于Asp.Net Core WebAPI使用Swagger时API隐藏和分组的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Asp.Net Core具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

如何利用FluentMigrator实现数据库迁移

这篇文章主要给大家介绍了关于如何利用FluentMigrator实现数据库迁移的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

ASP.NET Core利用Jaeger实现分布式追踪详解

这篇文章主要给大家介绍了关于ASP.NET Core利用Jaeger实现分布式追踪的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ASP.NET Core具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

浅谈从ASP.NET Core2.2到3.0你可能会遇到这些问题

这篇文章主要介绍了ASP.NET Core2.2到3.0可能会遇到的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解.net core webapi 前后端开发分离后的配置和部署

这篇文章主要介绍了.net core webapi 前后端开发分离后的配置和部署,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

详解ASP.Net Core 中如何借助CSRedis实现一个安全高效的分布式锁

这篇文章主要介绍了ASP.Net Core 中如何借助CSRedis实现一个安全高效的分布式锁,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

.net 4.5部署到docker容器的完整步骤

这篇文章主要给大家介绍了关于.net 4.5部署到docker容器的完整步骤,文中通过示例代码介绍的非常详细,对大家学习或者使用.net4.5具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享

.net core并发下线程安全问题详解

这篇文章主要给大家介绍了关于.net core并发下线程安全问题的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用.net core具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
收藏 0 赞 0 分享
查看更多