我们在以前的Asp.NET课程中已经学习过母版页了,在MVC中WebForm视图使用母版页的方法与以前基本相同。

创建一个项目MvcMasterPageDemo。 添加Home控制器,生成Index视图。 在生成视图的选框中,我们选择Aspx视图引擎,然后可以看到有“使用布局或母版页”的选项,给我们指向一个后缀为Master的文件(并不存在,所以无法完成视图添加)。 现在我们自己去创建它。

找到对应的目录,添加一个母版页

我们将母版页的内容部分按视图选项卡下的名称来命名,这样就能在生成的视图中,将页面内容默认关联到母版页的内容部分。

Razor 布局

还是通过Index生成视图,但这次我们选择Razor视图引擎,继续选择使用“布局与母版页”,按照提示上来说,布局页的文本框,可以留空。它默认引用的_Layout.cshtml页面的布局。

_ViewStart.cshtml文件里已经对页面进行了配置,所有的Razor引擎页面在执行之前,都会来执行这个ViewStart页面,Layout关键字就是用来指向默认页面布局的代码。

默认布局

我们可以看到生成的视图比之前的Aspx页面要干净许多。在视图中与_Layout.cshtml中分别添加一些文字来完成Razor布局页的测

自定义布局页

我们还可以在视图页面头部自定义需要的布局页,同样用Layout来声明,这样可以覆盖默认的Layout布局页面。

观察发现,我们在子视图页面中编写的内容,都是出现在布局页@RenderBody定义的位置。 @RenderBody当创建基于此布局页面的视图时,视图的内容会和布局页面合并,而新创建视图的内容会通过布局页面的@RenderBody()方法呈现在标签之间。

布局页中

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

视图页中

当然还要在视图中定义节,否则会出现异常:@section MySection{ //do }

注意:为了防止因缺少节而出现异常,可以给@RenderSection() 第2个参数设置为Flase

*压缩器*

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

这两句代码是将“样式表”与“脚本库” 通过压缩器封装,并在页面上调用。

在 MVC 中,Bundle 对象可以用来将 js 和 css 进行压缩(多个文件可以打包成一个文件)。 并且可以区分调试和非调试,在调试时不进行压缩,以原始方式显示出来,以方便查找问题。

*在项目的 App_Start 文件夹中,会有一个 BundleConfig.cs 类文件,从类文件的静态函数RegisterBundles 中我们可以看到该函数中缺省包含很多代码都使用了 bundles.Add 函数和Include 函数。

其中的bundles.Add是在向网站的BundleTable中添加Bundle项,这里主要有ScriptBundle和 StyleBundle,分别用来压缩脚本和样式表。

bundles.Add(new StyleBundle("虚拟路径").Include("真实路径1",“真实路径2”)

我们可以到 Global.asax 文件中 Application_Start 函数中查看到该函数的调用。

自己创建变压器:

在项目的 Content 文件夹下的 themes 文件夹建立一个自己的文件夹,命名为 mycss,并在其中新建里三个样式表文件分别是 a.css、b.css 和 c.css。

然后我们来到 BundleConfig 中的 RegisterBundles 函数中,将缺省代码全部删除或者注释掉,编写自己的压缩样式表。 由于Global.asax中本身就有一个压缩器注册,所以我们写完代码编译后就可以直接使用了。(脚本压缩同理)

我把这三个样式表压缩到了一个不存在的路径~/bundle/mycss 中。 新建一个控制器和视图,在视图中通过@Styles.Render(“ ~/bundle/mycss ”)来引用样式。

压缩器的安全特性

可以看到三条样式表引用全部显示在页面上。还差一步,Bundle 对象在调试时候是不执行压缩的,所以我们得需要将web.config配置文件中 <compilation debug=“true” targetFramework=“4.5.1” />的 debug 改为 false,让 Web应用程序在非调试环境下运行。

MVC 模板页和布局的更多相关文章

  1. Mvc模板页

    以前学过WEB的应该都知道母版页这个东西,在这里呢,mvc的模板页和WEB中的模板页也是一样的效果和用途. 首先:创建一个项目,控制器,生成Index视图,在生成视图的时候我们选择Razor视图引擎, ...

  2. ABP+AdminLTE+Bootstrap Table权限管理系统第九节--AdminLTE引入及模板页和布局和菜单

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 AdminLTE AdminLTE 官网地址:https://adminlte.io/themes/AdminLT ...

  3. MVC模板页使用

    这里我们要做一个公共的模板,样式如下: 内容 ·asp.net mvc如何创建模板??1.在/Views/Shared/中右键-添加-视图 2.重命名为”HeadLayout”,勾选”创建为分部视图” ...

  4. MVC系列学习(七)-模板页

    1.新建一个MVC项目,选择基本 2.查看文件 看到VS为我们生成了一些东西 布局页面,Layout 指定了模板页 3.开始实例 首先控制器中的代码如下: 视图中代码如下: 1.在/Views/_Vi ...

  5. SharePoint 2013 新特性 (三) 破改式 —— 设计管理器的使用 [2.HTML变身模板页]

    假设你跟我一样,看到了一个非常漂亮的页面,想把这种风格放到SharePoint里,咋办呢,那肯定得自定义个模板页了,好点是SharePoint Designer搞定,差点就得用Visual Studi ...

  6. MVC笔记-模板页布局

    MVC分区后  要加上Ares下的主目录   如:@Html.ActionLink("这个帖子真奇葩", "HotIndex", "Prosceniu ...

  7. ASP.Net MVC开发基础学习笔记:五、区域、模板页与WebAPI初步

    一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新 ...

  8. ASP.Net MVC开发基础学习笔记(5):区域、模板页与WebAPI初步

    一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新 ...

  9. ASP.NET MVC学习之路:模板页

    1.MVC开发步骤: 控制器-视图. 2.每一个视图都会有一个默认的模板页:_ViewStart.cshtml. 名字不能改,只能叫_ViewStart. 3.Layout=”~/Views/Shar ...

随机推荐

  1. HUD 2846 Repository

    /* 开始想耍小聪明 直接map搞 代码短 好理解 空间够 恩 很好 就是 map慢死了 T了 */ #include<iostream> #include<cstdio> # ...

  2. java沙箱机制原理

    参考文档如下: http://www.2cto.com/kf/201012/79578.html

  3. activiti总结2

    根据流程号查询失败原因. activiti重试机制.齿轮节点.邮件节点.任务节点.ACT_HI_ACTINST历史表.ACT_RU_EXECUTION运行表.看图. 在Eclipse里面自己写个测试方 ...

  4. js动态新增组合Input标签

    var x = 1; function addlink() { var linkdiv = document.getElementById("add1_0"); if (linkd ...

  5. HTML5新增的属性和废除的属性

    HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofoc ...

  6. (转)jQuery Validate 表单验证

    在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交,我们可以通过自己编写JavasScript代码来验证,但是有时数据量过多时就会有些难度了.基于jQuery的jquery.valid ...

  7. 《CSS网站布局实录》学习笔记(四)

    第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一 ...

  8. 我对Backbone中url属性的理解

    Model中有一个url属性,而且有一个urlRoot属性. Collection中也有一个url属性. // 这是Model中的url方法 url: function() { var base = ...

  9. minus的用法

    简单的说就是去同留异. MINUS 指令是运用在两个 SQL 语句上.它先找出第一个 SQL 语句所产生的结果,然后看这些结果有没有在第二个 SQL 语句的结果中.如果有的话,那这一笔资料就被去除,而 ...

  10. Shell中IFS用法

    一 .IFS的介绍    Shell 脚本中有个变量叫IFS(Internal Field Seprator) ,内部域分隔符.完整定义是The shell uses the value stored ...