本文目标

1.能够重用Razor模板进行页面的组件化搭建

本文目录

1.母板页_Layout.cshtml

2.用户自定义控件

3.默认Layout引用的使用(_ViewStart.cshtml)

1.母板页_Layout.cshtml

类似于传统WebForm中的.master文件,起到页面整体框架重用的目地

1.母板页代码预览

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5..min.js")" type="text/javascript"></script>
</head> <body>
@RenderBody()
</body>
</html>

2.子页面标题的设置

虽然多个子页面可以引用同一个母板页,但不同的页面标题可以单独设置。@ViewBag.Title 即是一个标题的占位符,在Control里或页面中给该标题的变量赋值。

//LayoutDemo_01
public ActionResult LayoutDemo_01()
{
ViewBag.Title = "布局页一";
return View();
} //LayoutDemo_02
public ActionResult LayoutDemo_02()
{
ViewBag.Title = "布局页二";
return View();
}
@{
ViewBag.Title = "布局页一";
}

3.子页面主内容的设置
页面主内容是由@RenderBody()来标识的。子页面的内容直接替换到该方法处。

//第一个页面
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
这里是layoutg一的内容 //第二个页面
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
这里是layout二的内容

4.子页面其他内容的设置

由于母板面的内容大多数不会是连续的,如下代码所示:

<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5..min.js")" type="text/javascript"></script>
</head>
<body>
<br />
@* 主要部分*@
@RenderBody()
<br />
<br />
@*其他部份内容*@
@RenderSection("MasterPart", false)
</body>
</html>

此时我们使用@RenderSection定义占位符子页面实现,@RenderSection方法接受两个参数:("名称","是否是必须的"),如果是必须的那么子页面必须实现该方法,否则会报错。
子页面代码如下:

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
这里是layoutg一的内容
@section MasterPart{
这里是母板页的第二部分
}

@section+空格+名称{内容}来实现母板页内容的替换。
5.其他注意项

母板页的命名可以随意,但建议以"_"下划线开头。

6.整体运行效果

2.用户自定义控件

创建时选中Create as a patial view

创建后在页面中填写如下代码:

使用时代码如下:

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@Html.Partial("~/Views/Shared/_UserControl.cshtml")
这里是layoutg一的内容

运行效果如下:

3.默认Layout引用的使用(_ViewStart.cshtml)

当我们的页面未指定Layout的时候,如果项目在全局或在同文件夹内存在_ViewStart.cshtml时该页面的Layout会自动继承自_ViewStart.cshtml,如果不同的文件夹层级都存在_ViewStart.cshtml,则继承离该页面最近的一个。_ViewStart.cshtml是一个特殊的文件。

1.使用全局_ViewStart.cshtml

_ViewStart.cshtml的文件位置和内容,如下图所示:

我们在User文件夹里建立页面LayoutDemo_03.cshtml,如下图所示:

在LayoutDemo_03.cshtml并没有定义Layout,但实际上他的Layout继承了_ViewStart.cshtml为:

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

运行效果如下:

2.使用文件夹内的_ViewStart.cshtml

在Shared文件夹内新建文件_LayoutNew.cshtml,如下图所示:

我们在上面加了区别的文字"新的布局",然后在User文件夹内新建文件_ViewStart.cshtml,如下图所示:

我们把User文件夹内的_ViewStart.cshtml的内容修改为Layout = "~/Views/Shared/_LayoutNew.cshtml";,此时我们再次浏览LayoutDemo_03.cshtml的时候,该页面的布局的引用会继承User文件夹内的_ViewStart.cshtml,运行效果如下:

说明:如果不想页面使用任何母板页和布局页,则需要设置Layout = null,如下所示

@{
Layout = null;
}

转自:http://www.cnblogs.com/iamlilinfeng

MVC入门教程-视图中的Layout使用的更多相关文章

  1. MVC入门教程

    MVC入门系列教程-视频版本,已入驻51CTO学院,文本+视频学效果更好哦.视频链接地址如下: 点我查看视频.另外,针对该系列教程博主提供有偿技术支持,群号:226090960,群内会针对该教程的问题 ...

  2. 无废话MVC入门教程笔记

    自学mvc,看了园子里李林峰写的李林峰写的无废话MVC入门教程笔记,现在有的平时忽略的或是不太清楚的点记下来 1,Html.DropDownList //服务端写法 @{ //下拉列表的值 List& ...

  3. Spring MVC 入门教程示例 (一)

    今天和大家分享下  Spring MVC  入门教程 首先还是从 HelloWorld  web 工程开始 -------------------------- 1.首先创建一个Maven Web工程 ...

  4. 观看杨老师(杨旭)Asp.Net Core MVC入门教程记录

    观看杨老师(杨旭)Asp.Net Core MVC入门教程记录 ASP.NET Core MVC入门 Asp.Net Core启动和配置 Program类,Main方法 Startup类 依赖注入,I ...

  5. 《挑战30天C++入门极限》入门教程:C++中的const限定修饰符

        入门教程:C++中的const限定修饰符 const修饰符可以把对象转变成常数对象,什么意思呢? 意思就是说利用const进行修饰的变量的值在程序的任意位置将不能再被修改,就如同常数一样使用! ...

  6. 无废话MVC入门教程二[第一个小Demo]

    mvc技术交流,欢迎加群: 本文目标 1.了解"模型"."视图"."控制器"的创建.调试和使用过程. 本文目录 1.创建模型 2.创建视图 ...

  7. MVC入门教程二[第一个小Demo](转载)

    本文目标 1.了解"模型"."视图"."控制器"的创建.调试和使用过程. 本文目录 1.创建模型 2.创建视图 3.创建控制器 4.调试 5 ...

  8. ASP.NET Core MVC的Razor视图中,使用Html.Raw方法输出原生的html

    我们在ASP.NET Core MVC项目中,有一个Razor视图文件Index.cshtml,如下: @{ Layout = null; } <!DOCTYPE html> <ht ...

  9. 【转】ASP.NET MVC 入门教程列表

    ASP.NET MVC小论 2008-12-04 11:11 by T2噬菌体, 8052 visits, 网摘, 收藏, 编辑 摘要:ASP.NET MVC作为微软官方的.NET平台下MVC解决方案 ...

随机推荐

  1. 怎么利用ultraISO对一个文件夹制作ISO镜像

    1. 运行UltraISO软件,选择好需要转换成ISO的文件,直接拖到UltraISO的界面中. 2.点击“另存为”按钮,选择存放路径并写上ISO文件的名称,文件保存类型选择为ISO格式,点击“保存” ...

  2. 将FAT32格式转换成NTFS格式命令

    convert f: /fs:ntfs /x 可以不用格式化里面的数据

  3. 基础canvas应用-钟表绘制

    首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...

  4. DM8168 解码显示模块代码阅读分析

    解码/显示概述:从共享文件夹获取H264流,对264流进行解析,生成hdr文件,hdr文件中包含每一帧的信息,将视频帧信息存放在A8核分配的共享内存空间,供其他核或其他的link调用,M3 Video ...

  5. phpwind9.0 顶部和底部版权信息永久性修改

    过了pw头部和底部版权修改方法,但是每次升级程序后版权又变成了默认的了,还得重新修改,其实有个方法可以永久性修改,底部和顶部随着主题走. pw9全局主题位于/themes/site/目录下,  前面文 ...

  6. python学习之---匿名函数,返回函数,偏函数

    1. 返回函数: 所谓的返回函数,指的是函数作为返回值.高阶函数除了可以接受函数作为参数外,同样可以接受函数作为结果返回.以下是一个可变参数的求和例子,一般求和函数是如此这般定义的: >> ...

  7. JAVA与编译语言及解释语言的关系

    转自JAVA结合了编译和解释执行的优点 编译型语言是一次性编译成机器码,脱离开发环境独立运行,所以运行效率较高,但是由于编译成的是特定平台上机器码,所以可移植性差. 编译型语言的典型代表有C.C++. ...

  8. Android 模拟器上的127.0.0.1 localhost

    调试中通过android simulator模拟器链接localhost或者127.0.0.1,因为我在电脑上面建立了apache,我的代码大概就是URL url = new URL(urlStrin ...

  9. 【UVA 11354】 Bond (最小瓶颈生成树、树上倍增)

    [题意] n个点m条边的图 q次询问 找到一条从s到t的一条边 使所有边的最大危险系数最小 InputThere will be at most 5 cases in the input file.T ...

  10. Python之re模块

    参考:http://www.cnblogs.com/PythonHome/archive/2011/11/19/2255459.html 这个模块提供了与 Perl 相似l的正则表达式匹配操作.Uni ...