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 4.0

好文要顶

时间: 2024-10-12 03:54:51

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

Mvc模板页

以前学过WEB的应该都知道母版页这个东西,在这里呢,mvc的模板页和WEB中的模板页也是一样的效果和用途. 首先:创建一个项目,控制器,生成Index视图,在生成视图的时候我们选择Razor视图引擎,然后勾选"使用布局或母版页"选项,它默认引用的_Layout.cshtml页面的布局._ViewStart.cshtml文件里已经对页面进行了配置,所有的Razor引擎页面在执行之前,都会来执行这个ViewStart页面. @{ Layout = "~/Views/Shared/

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

1.新建一个MVC项目,选择基本 2.查看文件 看到VS为我们生成了一些东西 布局页面,Layout 指定了模板页 3.开始实例 首先控制器中的代码如下: 视图中代码如下: 1.在/Views/_ViewStart.cshtml[如果/Views下有中有该 子视图,运行时都先加载它先则它的优先级高与其他视图] 2.在/Views/Shared/_Layout.cshtml[模板页或布局页,如果视图中没设置Layout=null的话,都默认调用布局页] 3.在/Views/Home/_ViewSt

MVC笔记-模板页布局

@Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @RenderSection("header", required: false) <!-- 子页插入到head的入口.相当于母版页里的ContentPlaceHolder --> @{Html.RenderAction("LoginInfo", "Partial&

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

一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新的区域,可以让我们的项目不至于太复杂而导致管理混乱.有了区域后,每个模块的页面都放入相应的区域内进行管理很方便.例如:上图中有两个模块,一个是Admin模块,另一个是Product模块,所有关于这两个模块的控制器.Model以及视图都放入各自的模块内.可以从上图中看出,区域的功能类似一个小的MVC项

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

1.MVC开发步骤: 控制器-视图. 2.每一个视图都会有一个默认的模板页:_ViewStart.cshtml. 名字不能改,只能叫_ViewStart. 3.Layout=”~/Views/Shared/_Layout.cshtml”; 代表指向的布局. 4._ViewStart.cshtml页面什么时候执行呢? 在每个页面执行之前,先执行此页面代码. 也就是说,给所有页面执行了默认布局了. 5.在_Layout.cshtml文件里,@RenderBody()表示在这个位置显示子页面的内容.相

Asp.Net MVC part45 过滤器、模板页

过滤器 使用方式自定义类继承自相应的类或接口,重写方法,作为特性使用在控制器类中重写方法 特性方式的使用注意:如果继承自接口需要让类实现FilterAttribute,才可以作为特性使用使用方式1:作为Controller或Action的特性使用方式2:在Global中注册为全局过滤器,应用于所有的Controller的Action参数类均继承自ControllerContext,主要包含属性请求上下文.路由数据.结果 身份验证过滤器在约束的Action执行前执行重写OnAuthorizatio

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

一.区域—麻雀虽小,五脏俱全的迷你MVC项目 1.1 Area的兴起 为了方便大规模网站中的管理大量文件,在ASP.NET MVC 2.0版本中引入了一个新概念—区域(Area). 在项目上右击创建新的区域,可以让我们的项目不至于太复杂而导致管理混乱.有了区域后,每个模块的页面都放入相应的区域内进行管理很方便.例如:上图中有两个模块,一个是Admin模块,另一个是Product模块,所有关于这两个模块的控制器.Model以及视图都放入各自的模块内.可以从上图中看出,区域的功能类似一个小的MVC项

创建 MVC的模板页,引用多个Css(期间,产生 HTTP 错误 500.23 - Internal Server Error   检测到在集成的托管管道模式下不适用的 ASP.NET 设置。)

首先,创建一个_Layut.cshtml的模板页 @using System.Web.Optimization <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>666</title> @Styles.Render("~/Content/Css/css&q

MVC中子页面如何引用模板页中的jquery脚本

MVC中子页面如何引用模板页中的jquery脚本 最近在学习mvc,遇到了一个问题:在html页面中写js代码,都是引用mvc5自带的jquery脚本,虽然一拖(将指定的jquery脚本如 jquery-1.10.2.js拖动到页面html标签外)就可以搞定. 但是一个页面你可以拖,10个页面,100个页面你也拖吗?这样子是不是很麻烦.方法:将要引用的jquery脚本放入Layout页面中,这样子子页面就可以调用模板页中的jquery脚本了. 例子:1 首先建立一个模板页Layout页面,在其b