本文目标

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. arch linux设备(请参考官方文档,桌面安装没有找到一个好工作后)

    首先,启动安装系统(一获得通过vmware虚拟机) 1.设置键盘布局 #loadkeys "us" #设置为美国的键盘布局.一般能够默认就可以 2.建立硬盘的分区 我採用的是fdi ...

  2. 【Web探索之旅】第四部分:Web程序员

    内容简介 1.第四部分第一课:什么是Web程序员? 2.第四部分第二课:如何成为Web程序员? 3.第四部分第三课:成为优秀Web程序员的秘诀 第四部分:Web程序员(完结篇) 大家好.终于来到了[W ...

  3. 【甘道夫】HBase开发环境搭建过程中可能遇到的异常:No FileSystem for scheme: hdfs

    异常: 2014-02-24 12:15:48,507 WARN  [Thread-2] util.DynamicClassLoader (DynamicClassLoader.java:<in ...

  4. XML文件编码问题

    这两天的过程中的一个项目,以解决编码格式ANSI的xml当文件.我遇到了一些问题.下面的例子现在将总结分析过程. 通过win7记事本或notepad++创建一个xml文件test_source: &l ...

  5. 采用objdump调试驱动程序

    最近的一个推断调整nand是好是坏司机+测试程序,因此,与下面的调整过程.看来他也学到了一点知识.因此,关于备案. 这篇文章主要是讲述调式驱动的一个方法而已. 先来看看測试程序 #include &l ...

  6. C/C++:C++友元类

    C++友元类: 正常情况下,一个类是訪问不到还有一个类的私有成员的. 就像以下这个: #include <iostream> class A{ private: int a; public ...

  7. Cntlm安装和配置体验

    对于那些谁使用NTLM验证网络代理环境(即除了需要设置的代理主机和端口还需要提供一个域用户名和密码)供.通过代理上网头疼.这主要是由于非常大的软件不支持NTLM的代理(比方眼下的GIT就不能支持NTL ...

  8. GitLab 安装配置笔记(转)

    GitLab的安装方式 GitLab的两种安装方法: 编译安装 优点:可定制性强.数据库既可以选择MySQL,也可以选择PostgreSQL;服务器既可以选择Apache,也可以选择Nginx. 缺点 ...

  9. DisplayContent、StackBox、TaskStack笔记

    文章仅零散记录自己的一点理解,仅供自己參考. 每一个显示设备,都有一个Display对象,DisplayManagerService专门管理这些Display. 1.DisplayContent() ...

  10. Build制作模型

    #include <iostream> using namespace std; //不知道为什么事实上非常好解释的东西在网上搞的人晕头转向的,下面是我的理解. //一个基类衍生出很多详细 ...