• 爱上MVC3~布局页的继承与扩展


    回到 目录

    在MVC3中引入了Razor引擎,这对于代码的表现力上是个突破,同时母板页也变成了_Layout,所以,我们就习惯上称它为布局页面,在razor里,布局页面是可以继承的,即,一个上下公用的布局页面(不用登陆的,产品展示页等),可以被上下左右公用的布局页面(需要登陆后看到的,如用户中心)继承。当然继承之后,父布局页里的一切,在子布局页里都是可见的,这对于使用面向对象的开发者来说,非常容易接受。

    我们来看一下图示:

    这是主布局页:

     

    这是子布局页,它继承了主布局页面的内容:

     

    总结:布局页可以通过layout去继承另一个布局页的内容。

    下面再来看一下布局页的扩展,事实上是对布局页上元素的扩展,我们以section元素为例,来说明一下。

    主布局代码:

    <head>
        <title>@ViewBag.Title</title>
        @RenderSection("Meta",false)
        <script src="../../Scripts/JS/jquery.js"></script>
        <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
        @RenderSection("Head", false)<!-- 主母板页中的JS片断 -->
    </head>

    子布局,用户中心代码:

    @section Meta{
        @RenderSection("Meta", false)
        <!-- 继承主母板的Meta,并扩展自己的Meta节点-->
    }
    @section Head{
        <link href="../../Scripts/JQTree/themes/default/style.css" rel="stylesheet" type="text/css" />
        <link href="../../Content/model.css" rel="stylesheet" />
        <script src="../../Scripts/JQTree/jquery.jstree.js"></script>
        <script src="../../Scripts/My97DatePicker4.7/WdatePicker.js" type="text/javascript"></script>
        <script src="../../Scripts/xheditor/xheditor-zh-cn.min.js" type="text/javascript"></script>
        @RenderSection("Head", false)
    }

    而真正的页面,也可以有自己的逻辑,去实现Meta和Head块,Meta块用来放置SEO信息,而Head块来放置CSS和JS代码。

    @section Meta{
        <meta name="keywords" content="权限管理 后台管理系统" />
        <meta name="description" content="权限管理 后台管理系统" />
        @section Head{
            <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
        }

    总结:布局页的一切元素还可以进行扩展,即在主布局页定义了元素,在子布局页还可以重新定义它,而在真的页面,看到的就是两个布局页的内容,这就是布局页的扩展。

    回到 目录

  • 相关阅读:
    Symbol
    前端微信支付步骤
    获取url参数值(可解码中文值)
    HTML5--canvas与svg的使用
    js-图片img转base64格式
    echarts 地图
    echarts 水球图
    react长列表性能优化
    CSS Modules
    react路由
  • 原文地址:https://www.cnblogs.com/lori/p/3420911.html
Copyright © 2020-2023  润新知