本文目标

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使用相关推荐

java调用视图如何传参_Spring MVC中视图向控制器传参（接收方式）
1.方法一(通过HttpServletRequest方式接收) 1.1.添加servlet的jar包 javax.servlet javax.servlet-api 3.1.0 provided 1. ...
MVC中视图访问的约定
通常访问视图的时候,都会去选择访问Views文件夹内对应于Controller同名的文件夹下的某一个视图,这个视图对应于这个Controller类的某一个方法. 其实,也可以让这个方法对应于不同名的c ...
ASP.NET MVC中的模型装配封装方法非常好用
下面说一下我们知道在asp.net mvc中视图可以绑定一个实体模型然后我们三层架构中也有一个model模型但是这两个很多时候却是不一样的对象来的就拿微软的官方mvc例子来说明微软的视图实 ...
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.Ch ...
关于 ASP.NET MVC 中的视图生成
在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图通 ...
如何在FineUIMvc（ASP.NET MVC）视图中绑定多个模型？
起因这是知识星球内的一个网友提出的,按理说ASP.NET MVC中一个视图只能绑定一个模型(Model),在视图顶部标识如下: @model IEnumerable<FineUICore.Ex ...
Spring MVC中的视图解析ViewResolver
http://blog.csdn.net/prince2270/article/details/5891085 在Spring MVC中,当Controller将请求处理结果放入到ModelAndVi ...
体验 ASP.NET Core 1.1 中预编译 MVC Razor 视图
这是从 ASP.NET Core 1.1 官方发布博文中学到的一招,可以在 dontet publish 时将 Razor 视图编译为 .dll 文件. 需要在 project.json 中添加如下配 ...
mvc的视图中显示DataTable的方法
mvc的视图中显示DataTable的方法: 不断的循环画出table @{ViewBag.Title = "ShowDataTable"; } @using System.Dat ...
asp.net mvc 中的部分视图
使用方法:@Html.Action(action, controller) 加载局部页面. 例如在模板页中使用:@Html.Action("Contact", "Comp ...

MVC中，视图的Layout使用

本文目标

本文目录

1.母板页_Layout.cshtml

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

2.用户自定义控件

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

MVC中，视图的Layout使用相关推荐

最新文章

热门文章