zoukankan      html  css  js  c++  java
  • ASP.NET Core 入门笔记7,ASP.NET Core MVC 视图布局入门

    一、前言

    1、本教程主要内容

    • ASP.NET Core MVC (Razor)视图母版页教程
    • ASP.NET Core MVC (Razor)带有Section的视图母版页教程
    • ASP.NET Core MVC (Razor)视图全局代码(_ViewStart.cshtml)教程

    2、本教程环境信息

    软件/环境说明
    操作系统 Windows 10
    SDK 2.1.401
    ASP.NET Core 2.1.3
    IDE Visual Studio Code 1.28
    浏览器 Chrome 70

    本篇代码以下代码进行调整:https://github.com/ken-io/asp.net-core-tutorial/tree/master/chapter-02

    3、准备工作

    VS Code 本身不提供 ASP.NET Core MVC 视图引擎(Razor)的智能感知。
    幸运的是,VS Code C#扩展 从 1.17.0 版本开始支持Razor视图引擎的智能感知。

    所以,我们要将VS Code C#扩展升级到最新版本。

    二、母版页视图模板

    网页中往往有通用的布局,比如导航、底部等等,这些页面中共用的部分,就需要放在母版页里面。
    这样每个页面只用关注本页面要完成的功能/内容即可。提高了开发效率,也降低了公共部分的维护成本。

    Razor视图引擎原生提供了Layout的概念,作为视图布局的基础,可以让我们在视图中引用另外一个视图作为该视图的母版。

    1、创建布局页(Layout)作为母版页

    在项目根目录Views文件夹中创建子目录Shared,并在Shared目录中创建母版页 _Layout.cshtml

    通常公共的Razor视图文件名都以_开头

    <html>
        <head>
            <title>@ViewBag.Title - Ken.Tutorial</title>
        </head>
        <body>
            <h1>Ken.Tutorial</h1>
            @RenderBody()
        </body>
    </html>
    

    @ViewBag.Title 用于当前应用该模板的视图自定义标题
    @RenderBody()表示渲染当前应用该母版的视图,并填充到当前位置。

    2、创建视图作为子页面

    创建视图并指定母版页(Layout)

    /Views/Home中新建文件Index.cshtml
    在页面中可以通过以下方式指定母版页

    • 指定母版页名字
    @{
        Layout = "_Layout";
    }
    
    • 指定母版页完整路径
    @{
        Layout = " /Views/Shared/_Layout.cshtml";
    }
    

    以上两种方式任选其一即可

    @{
        Layout = "_Layout";
    }
    <h3>@ViewBag.Title</h3>
    @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{
         <p>Section Content</p>
     }
    

    @section:定义Section的关键字
    test:SectionName,命名规则同C#变量名一样,字母或下划线开头后面可以跟字母、下划线、数字

    Section加载

    在母版页中可以通过@RenderSection()方法加载子页面中定义的Section

    RenderSection只有在母版页(Layout)中使用才有效

    • 强制加载
    @RenderSection("test")
    
    • 子页面中有定义就加载
    @RenderSection("test", false)
    
    • 子页面中有定义就加载,没有就显示默认内容
    @if(IsSectionDefined("test"))
    {
        RenderSection("test");
    }
    else
    {
        <p>Layout Content</p>
    }
    

    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";
    }
    <h3>@ViewBag.Title</h3>
    <p>Section Demo by ken.io</p>
    
    @section footer{
        <p>Section Footer</p>
    }
    

    修改模板页

    修改 _Layout.cshtml 增加Section加载

    <html>
        <head>
            <title>@ViewBag.Title - Ken.Tutorial</title>
        </head>
        <body>
            <div class="header">
                <h1>Ken.Tutorial</h1>
                <hr/>
            </div>
    
            <div class="content">
                @RenderBody()
            </div>
    
            <div class="footer">
                <hr/>
                @if(IsSectionDefined("footer"))
                {
                    RenderSection("footer");
                }
                else
                {
                    <p>Layout Footer</p>
                }
            </div>
        </body>
    </html>
    

    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

    摘抄自:https://www.cnblogs.com/ken-io/p/aspnet-core-tutorial-mvc-view-layout-section.html
    如有侵权请告知
  • 相关阅读:
    关于jabber协议
    xmpp相关链接,
    Implementation of the Server Dialback method as defined by the RFC3920
    好吧,隐藏的文件,
    Vue之methods watch和compute的区别和联系
    面向过程编程&面向对象编程
    JS高阶---线程与事件机制(小结)
    Vuex简介
    Vuex操作步骤
    vue单页面应用刷新网页后vuex的state数据丢失的解决方案
  • 原文地址:https://www.cnblogs.com/xiaoahui/p/11726630.html
Copyright © 2011-2022 走看看