MVC 模板页和布局
我们在以前的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 模板页和布局的更多相关文章
- Mvc模板页
以前学过WEB的应该都知道母版页这个东西,在这里呢,mvc的模板页和WEB中的模板页也是一样的效果和用途. 首先:创建一个项目,控制器,生成Index视图,在生成视图的时候我们选择Razor视图引擎, ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第九节--AdminLTE引入及模板页和布局和菜单
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 AdminLTE AdminLTE 官网地址:https://adminlte.io/themes/AdminLT ...
- MVC模板页使用
这里我们要做一个公共的模板,样式如下: 内容 ·asp.net mvc如何创建模板??1.在/Views/Shared/中右键-添加-视图 2.重命名为”HeadLayout”,勾选”创建为分部视图” ...
- MVC系列学习(七)-模板页
1.新建一个MVC项目,选择基本 2.查看文件 看到VS为我们生成了一些东西 布局页面,Layout 指定了模板页 3.开始实例 首先控制器中的代码如下: 视图中代码如下: 1.在/Views/_Vi ...
- SharePoint 2013 新特性 (三) 破改式 —— 设计管理器的使用 [2.HTML变身模板页]
假设你跟我一样,看到了一个非常漂亮的页面,想把这种风格放到SharePoint里,咋办呢,那肯定得自定义个模板页了,好点是SharePoint Designer搞定,差点就得用Visual Studi ...
- MVC笔记-模板页布局
MVC分区后 要加上Ares下的主目录 如:@Html.ActionLink("这个帖子真奇葩", "HotIndex", "Prosceniu ...
- ASP.Net MVC开发基础学习笔记:五、区域、模板页与WebAPI初步
一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新 ...
- ASP.Net MVC开发基础学习笔记(5):区域、模板页与WebAPI初步
一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新 ...
- ASP.NET MVC学习之路:模板页
1.MVC开发步骤: 控制器-视图. 2.每一个视图都会有一个默认的模板页:_ViewStart.cshtml. 名字不能改,只能叫_ViewStart. 3.Layout=”~/Views/Shar ...
随机推荐
- UVA 11770 Lighting Away
RunID User Problem Result Memory Time Language Length Submit Time 2482977 zhyfzy J Accepted 0 KB 138 ...
- JavaScript基础(二)
一.外部引用语法<script src="script.js"></script> 二.在页面中的位置 1.我们可以将JavaScript代码放在html文 ...
- zookeeper管理solr的配置文件
zookeeper可以管理solr和其他软件的配置文件.配置文件还是保存在linux服务器的磁盘上,但是不是改变solr读取solr/home配置的配置文件的位置. 现在solr/home配置文件的位 ...
- iOS中使用图片作为颜色的背景图
Objective-C: [UIColor colorWithPatternImage:[UIImage imageNamed:@"jpg"]]; Swift: UIColor(p ...
- pod install后出现: [!] `<PBXResourcesBuildPhase UUID=`xxxx`>` attempted to initialize an object with an unknown UUID
[!] `<PBXResourcesBuildPhase UUID=`xxx`>` attempted to initialize an object with an unknown UU ...
- core java 第四章笔记
import java.util.*; public class Employee { private static int nextid = 1; private String name; priv ...
- oracle 空置排在最后显示
nulls last select * from emp order by comm select * from emp order by comm desc select * from emp or ...
- 武汉科技大学ACM:1003: 华科版C语言程序设计教程(第二版)例题6.6.改编
Problem Description 小明明最喜欢学英语了,英语课从来不翘课,但是英语却一直没学好,因为上课一直在睡觉.为什么会睡觉呢,因为他觉得英文单词太长了.现在小明明有一个很长很长很长的单词, ...
- HDU 3721 Building Roads (2010 Asia Tianjin Regional Contest) - from lanshui_Yang
感慨一下,区域赛的题目果然很费脑啊!!不过确实是一道不可多得的好题目!! 题目大意:给你一棵有n个节点的树,让你移动树中一条边的位置,即将这条边连接到任意两个顶点(边的大小不变),要求使得到的新树的直 ...
- js中的|| 与 &&
a && b : 将a, b转换为Boolean类型, 再执行逻辑与, true返回b, false返回aa || b : 将a, b转换为Boolean类型, 再执行逻辑或, tru ...