MVC视图之【分部视图】【布局页】初了解

最新推荐文章于 2021-09-19 17:21:49 发布

wuguandong

最新推荐文章于 2021-09-19 17:21:49 发布

阅读量9.3k

点赞数 8

文章标签： MVC 视图分部视图布局页

本文链接：https://blog.csdn.net/wuguandong/article/details/76180014

版权

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类型，表示子页面是否必须要写它。

关注