• MVC:@RenderBody、@RenderPage、@RenderSection用法


    本文导读:在Razor引擎中没有了“母版页”,取而代之的是叫做“布局”的页面(_Layout。cshtml)放在了共享视图文件夹中。模板页:@RenderBody()占位符;局部页面:@RenderPage();模板页预设区域:@RenderSection("")

    一、@RenderBody

    当创建基于_Layout.cshtml布局页面的视图时,视图的内容会和布局页面合并,而新创建视图的内容会通过_Layout.cshtml布局页面的@RenderBody()方法呈现在标签之间。

    二、@RenderPage
     

    从名称可以猜出来这个方法是要呈现一个页面。比如网页中固定的头部可以单独放在一个共享的视图文件中,然后在布局页面中通过这个方法调用,用法如下:
     

    @RenderPage(“~/Views/Shared/_Header.cshtml”)


    带参数
     

    @RenderPage(“~/Views/Shared/_Header.cshtml”,new{parm="my",parm2="you")


    调用页面获取参数:
     

    //获取 RenderPage() 传递过来的参数
    @PageData["param"]

     

     

    三、@RenderSection

     

    布局页面还有节(Section)的概念,也就是说,如果某个视图模板中定义了一个节,那么可以把它单独呈现出来


    为了防止因缺少节而出现异常,可以给RenderSection()提供第2个参数:


    @RenderSection("head", false)

    @if (IsSectionDefined("head"))
    {
    @RenderSection("head", false)
    }
    else
    {
    <p>SubMenu Section is not defined!</p>
    }

     

     

     四、_Layout。cshtml 代码如下

     
     
    HTML 代码   复制

    <!DOCTYPE html>
    

    <html>
    

    <head>
    

        <title>@ViewBag.Title</title>
    

        <link href="@Url.Content("~/Content/Site。css")" rel="stylesheet" type="text/css" />
    

        <script src="@Url.Content("~/Scripts/jquery-1.4.4.min。js")" type="text/javascript"></script>
    

        @RenderSection("head", required: true)@*View页面自定义特定js/css使用*@
    

    </head>
    

    <body>
    

        @RenderPage("~/Views/Shared/_Header。cshtml")
    

        @RenderBody()
    

    </body>
    

    </html>
  • 相关阅读:
    Python的包管理工具Pip
    [Reactive Programming] RxJS dynamic behavior
    [Reactive Programming] Using an event stream of double clicks -- buffer()
    [RxJS + AngularJS] Sync Requests with RxJS and Angular
    [Javascript] An Introduction to JSPM (JavaScript Package Manager)
    [Angular 2] 9. Replace ng-modle with #ref & events
    [React] Intro to inline styles in React components
    [AngualrJS + Webpack] Production Source Maps
    [AngularJS + Webpack] Uglifying your JavaScript
    [AngularJS + Webpack] Production Setup
  • 原文地址:https://www.cnblogs.com/DTWolf/p/4920539.html
Copyright © 2020-2023  润新知