欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-03 19:15:39
本文介绍了asp.net core 2.0 布局页面,分享给大家,具体如下: 问题 如何在asp.net core 2.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 2.0 布局页面(译)

运行,此时页面显示:

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

讨论

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

1. 布局页面

2. 起始页面

3. 导入页面

布局页面(_layout.cshtml)

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

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

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

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

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

 布局页面也可以使用@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。如果存在多个起始页面,它们会按照分层顺序执行,从根目录到子目录。

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

源代码下载

原文:

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