ASP.NET实战005:MVC布局页、分布页和视图使用
1、启动页为了确定其用途我们来逐个分析,在_ViewStart.cshtml文件中只有一个代码块,是Razor语法格式,作用是引用了“/Views/Shared/”目录下的_Layout.cshtml文件,这里我们现将内容注释掉并运行程序,我们可以发现浏览器中呈现了当前视图中的index内容。
2、在_ViewStart.cshtml 文件添加一个div,内容写上“这里是_ViewStart.cshtml 文件区域内容”,刷新浏览器我们看到_ViewStart.cshtml的内容也显示出来了,说明当前页面加载的时候载入了_ViewStart.cshtml 文件(没有_Layout.cshtml文件不影响页面显示)。
3、布局页接着我们引入_Layout.cshtml文件,在_Layout.cshtml 文件中我们可以看到这是个嵌入了C#的HTML结构文件,里面引入了脚本、样式和和简单的布局,同样在body中添加一个div,内容写上“这里是_Layout.cshtml文件区域内容”,刷新浏览我们可以看到内容由_ViewStart.cshtml 、_Layout.cshtml 、index.cshtml3个文件组成。
4、这里我们可以看到,当前页面内容中_Layout.cshtml内容再最外层,而_ViewStart.cshtml和index.cshtml的内容再中间,这里我们要注意在body中载入了一个@伊怕锱鳏RenderBody()方法,它的作用是渲染View到当前占位符。注释掉行不行呢?注释掉之后页面提示错误,尚未对布局页“~/views/shared/layout.cshtml”调用“renderBody”方法。
5、关于RenderBody()方法主要作用是将视图中的内容通过@RenderBody()方法(该方法不需要参数且只能出现一次)合并到布局页面中的指定位置,这样我们就可以将一些常用到的模块在布局中实现,这样不仅可以降低代码的重复性,使程序更加模块化还可以加快网页的响应速度,提高用户体验。
6、分布页在Shared目录中建个_header.cshtml文件,将layout.cshtml中的头部代码移入到_header.cshtml文件中让这个文件成为一个独立的分布页。接下来我们来调用这个分布页文件,一般网页的header、sidebar、footer都是固定不变的,我们可以把这些元素写成分布页放在一个共享的视图文件中,然后在布局页面中通过@RenderPage()方法调用即可。
7、视图页最后就我们的视图页了,主要给用户提供数据的呈现和交互,当Action被请求时会调用对应的视图,该视图同样可以由多个局部视图组成,根据视图的不同需求我们可以@Html.Partial()、@Html.Action()方式来调用。最简单的是使用 Html.Partial(),如果页面需要数据交互则使用@Html.Action()。