爱上MVC3~布局页的继承与扩展_.NET

您所在的位置：程序员俱乐部 > 编程开发 > .NET > 爱上MVC3~布局页的继承与扩展

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

2013/11/13 11:45:19 张占岭博客园我要评论(0)

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

回到目录

在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>
    }