Ken.Tutorial
@RenderBody() @ViewBag.Title 用于当前应用该模板的视图自定义标题 @RenderBody()表示渲染当前应用该母版的视图,并填充到当前位置。 2、创建视图作为子页面 创建视图并指定母版页(Layout) 在/Views/Home中新建文件Index.cshtml 在页面中可以通过以下方式指定母版页 指定母版页名字 @{ Layout = "_Layout"; } 指定母版页完整路径 @{ Layout = " /Views/Shared/_Layout.cshtml"; } 以上两种方式任选其一即可 @{ Layout = "_Layout"; }@ViewBag.Title
@ViewBag.Message 修改Action 调整 HomeController.cs中Action:Index(),通过视图输出Message public IActionResult Index() { ViewBag.Title = "Home"; ViewBag.Message = "Hello World ! -ken.io"; return View(); } 3、访问测试 启动项目,访问 / 或者 /home/index 将会看到: Ken.Tutorial Home Hello World ! -ken.io 三、带片段的母版页视图模板 通过母版页,我们可以方便的共用一些页面内容或者功能。但是对于一些特殊的子页面可能需要重写母版页中一些内容,或者在母版页中插入自己想呈现的内容,而不是只能将子页面呈现在固定的位置。 Razor视图引擎提供了Section的概念,我们可以在视图中定义Section,然后再母版视图中通过RenderSection方式加载视图定义的Section。 1、Section的定义与加载 Section定义 Section定义在子页面才有效。 Section定义示例: @section test{Section Content
} @section:定义Section的关键字 test:SectionName,命名规则同C#变量名一样,字母或下划线开头后面可以跟字母、下划线、数字 Section加载 在母版页中可以通过@RenderSection()方法加载子页面中定义的Section RenderSection只有在母版页(Layout)中使用才有效 强制加载 @RenderSection("test") 子页面中有定义就加载 @RenderSection("test", false) 子页面中有定义就加载,没有就显示默认内容 @if(IsSectionDefined("test")) { RenderSection("test"); } else {Layout Content
} 2、Section使用示例 创建Controller与Action 在Controllers文件夹中创建LayoutController.cs using System; using Microsoft.AspNetCore.Mvc; namespace Ken.Tutorial.Web.Controllers { public class LayoutController : Controller { public IActionResult SectionDemo() { return View(); } } } 创建带有Section视图 在Views文件夹中创建Layout文件夹并创建视图文件:SectionDemo.cshtml @{ Layout = "_Layout"; ViewBag.Title = "SectionDemo"; }@ViewBag.Title
Section Demo by ken.io
@section footer{Section Footer
} 修改模板页 修改 _Layout.cshtml 增加Section加载Ken.Tutorial
@RenderBody()
3、访问测试
启动项目,通过浏览器进行访问测试:/,/layout/sectiondemo
访问 /,将看到:
Ken.Tutorial
Home
Hello World ! -ken.io
Layout Footer
访问/layout/sectiondemo将看到:
Ken.Tutorial
SectionDemo
Section Demo by ken.io
Section Footer
四、视图呈现之前的全局代码
Razor视图引擎,提供了在视图呈现之前执行代码的入口。
这个入口是一个约定的文件即:_ViewStart.cshtml,我们可以通过该文件定义全局视图呈现前执行的代码,也是定义某个文件夹下的视图呈现前需要执行的代码。
完整路径示例:
/Views/_ViewStart.cshtml
/Views/Home/_ViewStart.cshtml
如果两个_ViewStart.cshtml文件同时存在,那么/Views/_ViewStart.cshtml的执行优先级高于/Views/Home/_ViewStart.cshtml
全局代码示例
在Views文件夹下创建视图文件_ViewStart.cshtml
@{
Layout = "_Layout";
}
这里我们通过全局代码,将所有视图的母版页都指定为_Layout。
这样我们在视图子页面就不用逐一制定母版页了。
如果我们将Index.cshtml中指定的Layout注释掉
@{
//Layout = "_Layout";
}
然后启动项目,访问 /,依然看到:
Ken.Tutorial
Home
Hello World ! -ken.io
局部全局代码示例
在/Views/Home文件夹下创建视图文件_ViewStart.cshtml
@{
Layout = null;
}
这里我们局部全局代码,将在/Views/Home文件夹下的所有视图的母版页都指定为null,默认不引用任何母版页。
这时我们启动项目,访问 / ,将看到:
Home
Hello World ! -ken.io
五、备注
1、附录
本文代码示例
https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-06
本文参考
https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/overview?view=aspnetcore-2.1
本文首发于我的独立博客:https://ken.io/note/asp.net-core-tutorial-mvc-view-layout-sectionhttps://www.cnblogs.com/ken-io/p/aspnet-core-tutorial-mvc-view-layout-section.html
