实现模板页面。使用_Layout.cshtml创建母板页面,实现站点的页面布局。子视图页面引用_Layout.cshtml,实现完整的页面效果。W3school网站完成效果,如图所示:实践思路:
- 创建MVC应用程序。
- 在View目录下创建Shared文件夹,选中Shared文件夹右键单击“MVC 5 Layout Page (Razor)”。创建布局页_LayoutPage1.cshtml,如图所示:
3) 修改布局页的body内容,参考代码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<h2>欢迎进入W3school学习网站</h2>
<div>
@RenderBody()
</div>
<h3>版权所有保留一切权利</h3>
</body>
</html>
- 创建HomeController和Study.cshtml,备注:创建视图时需手动选择具体布局页_LayoutPage1.cshtml。手动选择布局页,如图所示:
5) 打开Study.cshtml,清空其中所有默认创建的标题标签代码,填入子页面内容,代码如下:
@{
Layout = "~/Views/Shared/_LayoutDemo3.cshtml";
}
<p>[HTML]</p>
<ul>
<li><a herf="#">HTML</a></li>
<li><a herf="#">HTML3</a></li>
<li><a herf="#">XHTML</a></li>
<li><a herf="#">CSS</a></li>
</ul>
<p>[.Net]</p>
<ul>
<li>C#</li>
<li>ASP.NET</li>
<li>EF</li>
</ul>
- 在Views-Shared文件夹下的_Layout.cshtml文件中添加一个li:
<li>@Html.ActionLink("我要学习", "Study", "Home")</li>
- 运行程序,输入“URL:http://localhost:端口/home/study”。