MVC项目中新建一个视图,会出现以下界面:
之前一直不清楚【创建为分部视图】和【使用布局页】选项的作用,今天看了一些资料,有了一点基本的了解,所以写这篇文章,当笔记来用,避免以后忘记。
---------------------------------------------------------------------------------------------------
1.分部视图、布局页
---------------------------------------------------------------------------------------------------
网站的网页上有一些部分是固定的,在每个页面都要出现,如网站名称、功能导航,这些通用的东西就可以写在一个模版页面里面,供所有页面所共用。
MVC项目新增视图的时候,
1.如果不勾选【创建分部视图】和【使用布局页】,新建的cshtml页面上会出现:
@{
Layout = null;
}
它的意思是:不使用任何模版。
这时候,页面的代码即为运行后显示的内容。
2.如果勾选【创建分部视图】,新建的cshtml页面是一个完全空白的页面。
这时候,系统会自动把View文件夹下名为“_ViewStart.cshtml”的内容添加到新建的html最上面。
“_ViewStart.cshtml”里写的是“Layout = "~/Views/Shared/_Layout.cshtml";,意思是使用“Shared”文件夹内名称为“_Layout.cshtml”的模版。
明白了吧,不写不代表不使用分部视图(模版),而是使用默认的分部视图。
不想使用任何分部视图,需要标注Layout = null。
_ViewStart.cshtml 中的内容
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
3.你或许会问:如果项目中有一些页面要引用另外一个模板怎么办?
这时候就需要用到【使用布局页】选项了,勾选后,点击【添加】会让你选择一个项目中的html文件,作为这个页面的模板。
举个例子,我新建了一个_test.cshtml,作为测试用的布局页(模板),它的内容如下,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>这个是测试的模板</h1>
@RenderBody()
</body>
</html>
新建一个页面index.cshtml,选用它(_test.cshtml)作为【布局页】,
index.cshtml内容入下,
@{
ViewBag.Title = "Index";
Layout = "~/Views/_test.cshtml";
}
<h2>这是新建的index页面</h2>
(上面 @{ } 中的内容是自动生成的。)
运行后的结果
总结:【分部视图】【布局页】选项只会产生新建的视图上面@{ }中的一点差异,也可以自己改动其中的代码,效果是一样的。
---------------------------------------------------------------------------------------------------
2. RenderBody RenderSection
---------------------------------------------------------------------------------------------------
1.RenderBody
模版中的@RenderBody是一个占位符,是留给子页面的位置,子页面使用这个模版,子页面中的内容会被放到@RenderBody的位置。合并后当作一个整体加载。
2.RenderSection
RenderSection也是个占位符,解决了只有一个RenderBody的问题。比如,子页面要引入自己css文件,而
@RenderBody写在了模板的<body>的最下面,而css想要加到模板的<head>中,
这时候只需要在模板的head中加入
@RenderSection("CSS",false)
在子页面上加入
@section CSS{
//要引入的内容
}
便可以了。
RenderSection第一个参数是string类型,标明名称;
第二个参数是boolean类型,表示子页面是否必须要写它。