开发者社区> mcy247> 正文

爱上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>
    }

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

本文转自博客园张占岭(仓储大叔)的博客,原文链接:爱上MVC3~布局页的继承与扩展,如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20411 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
22286 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23551 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
13325 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
16608 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
22293 0
+关注
mcy247
做自己的太阳 无需凭借谁的光
1070
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载