本文目标

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

本文目录

1.母板页_Layout.cshtml

2.用户自定义控件

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

1.母板页_Layout.cshtml

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

1.母板页代码预览

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4     <title>@ViewBag.Title</title>

 5     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

 6     <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

 7 </head>

 8

 9 <body>

10     @RenderBody()

11 </body>

12 </html>

2.子页面标题的设置

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

 1         //LayoutDemo_01

 2         public ActionResult LayoutDemo_01()

 3         {

 4             ViewBag.Title = "布局页一";

 5             return View();

 6         }

 7

 8         //LayoutDemo_02

 9         public ActionResult LayoutDemo_02()

10         {

11             ViewBag.Title = "布局页二";

12             return View();

13         }
1 @{

2     ViewBag.Title = "布局页一";

3 }

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

 1 //第一个页面

 2 @{

 3     Layout = "~/Views/Shared/_Layout.cshtml";

 4 }

 5 这里是layoutg一的内容

 6

 7

 8 //第二个页面

 9 @{

10     Layout = "~/Views/Shared/_Layout.cshtml";

11 }

12 这里是layout二的内容

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

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

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4     <title>@ViewBag.Title</title>

 5     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

 6     <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

 7 </head>

 8 <body>

 9     <br />

10     @* 主要部分*@

11     @RenderBody()

12     <br />

13     <br />

14     @*其他部份内容*@

15     @RenderSection("MasterPart", false)

16 </body>

17 </html>

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

1 @{

2     Layout = "~/Views/Shared/_Layout.cshtml";

3 }

4 这里是layoutg一的内容

5 @section MasterPart{

6 这里是母板页的第二部分

7 }

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

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

6.整体运行效果

2.用户自定义控件

创建时选中Create as a patial view

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

使用时代码如下：

1 @{

2     Layout = "~/Views/Shared/_Layout.cshtml";

3 }

4 @Html.Partial("~/Views/Shared/_UserControl.cshtml")

5 这里是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为：

1 @{

2     Layout = "~/Views/Shared/_Layout.cshtml";

3 }

运行效果如下：

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，如下所示：

1 @{

2     Layout = null;

3 }

MVC中，视图的Layout使用的更多相关文章

  1. MVC中视图View向控制器传值的方法

    MVC中视图View向控制器传值的方法步骤如下: 1.index页面: 页面中只需要一个触发事件的按钮

  2. MVC中视图界面设置Checkbox

    今天是六一儿童节,来谈谈Checkbox,前面的博客已经提到了关于单选.多选.反选.全选等问题的处理,这里作一下补充说明. 全选/反选 <td width="5%">& ...

  3. MVC中视图访问的约定

    通常访问视图的时候,都会去选择访问Views文件夹内对应于Controller同名的文件夹下的某一个视图,这个视图对应于这个Controller类的某一个方法. 其实,也可以让这个方法对应于不同名的c ...

  4. ASP.NET MVC中的模型装配 封装方法 非常好用

    下面说一下 我们知道在asp.net mvc中 视图可以绑定一个实体模型 然后我们三层架构中也有一个model模型 但是这两个很多时候却是不一样的对象来的 就拿微软的官方mvc例子来说明 微软的视图实 ...

  5. MVC中学到的小知识(MVC中的跳转，传参)

    1.mvc中视图中的href="XXX",这个XXX是控制器地址,不是另一个视图.(这里的href语句只能转向控制器,不能直接转向视图),如果要实现转向视图,可以先转到控制器,然后 ...

  6. 关于 ASP.NET MVC 中的视图生成

    在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通 ...

  7. 关于ASP.NET MVC中的视图生成

    在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据.   从控制器到视图 ...

  8. ASP.NET MVC 中的视图生成

    关于 ASP.NET MVC 中的视图生成 在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Mode ...

  9. 007.Adding a view to an ASP.NET Core MVC app -- 【在asp.net core mvc中添加视图】

    Adding a view to an ASP.NET Core MVC app 在asp.net core mvc中添加视图 2017-3-4 7 分钟阅读时长 本文内容 1.Changing vi ...

  10. MVC中使用分部视图参数，改变分部视图连接样式

    MVC中使用分部视图参数,改变分部视图连接样式! Controller代码 [ChildActionOnly] public ActionResult Navigator(int tag) { ret ...

随机推荐

  1. jQuery 焦点图,图像文件js档

    jQuery 焦点图,图片文件在js文件里 演示 XML/HTML Code <div id="photo_container"></div> JavaSc ...

  2. zTree市县实现三个梯级数据库映射

    zTree市县实现三个梯级数据库映射 Province.hbm.xml: <?xml version="1.0" encoding="UTF-8"? &g ...

  3. JComboBox

    package swing.combox; import java.awt.FlowLayout; import javax.swing.DefaultComboBoxModel; import ja ...

  4. pdf转换为word小工具，挺好

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFwZW5nMDExMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  5. 【iOS发展-61】更换plist经过资源，执行iOS一旦数据仍显示在模拟器的外观，如何解决？

    (1)案例介绍 --我们首先导入plist文件做项目,模拟的观看效果. --删除plist,更换一个新的plist,CMD+R模拟执行,或者找到该程序界面上显示最后一个数据. (2)原因 是由于第一次 ...

  6. IIS URL Rewrite Module防盗链规则配置方法

    IIS版本:IIS 7.5 URL Rewrite组件:IIS URL Rewrite Module(http://www.iis.net/downloads/microsoft/url-rewrit ...

  7. EasyUI实战经验总结（转）

    最近公司培训EasyUI,就做下总结吧,给有需要的人,源码在文章最后. 1.最常用的表格 ? 1 2 3 <div class="easyui-panel" data-opt ...

  8. 好的安排小明（南阳19）（DFS）

    擅长排列的小明 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描写叙述 小明十分聪明,并且十分擅长排列计算.比方给小明一个数字5,他能立马给出1-5按字典序的全排列,假设你想 ...

  9. 从电商秒杀与抢购谈Web系统大规模并发

    从电商秒杀与抢购谈Web系统大规模并发 http://www.iamlintao.com/4242.html 一.大规模并发带来的挑战 在过去的工作中,我曾经面对过5w每秒的高并发秒杀功能,在这个过程 ...

  10. OAuth打造webapi认证服务

    使用OAuth打造webapi认证服务供自己的客户端使用 一.什么是OAuth OAuth是一个关于授权(Authorization)的开放网络标准,目前的版本是2.0版.注意是Authorizati ...