创建布局页及套用布局页的视图页

实现模板页面。使用_Layout.cshtml创建母板页面,实现站点的页面布局。子视图页面引用_Layout.cshtml,实现完整的页面效果。W3school网站完成效果,如图所示:在这里插入图片描述实践思路:

  1. 创建MVC应用程序。
  2. 在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>

  1. 创建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>

  1. 在Views-Shared文件夹下的_Layout.cshtml文件中添加一个li:
                    <li>@Html.ActionLink("我要学习", "Study", "Home")</li>

  1. 运行程序,输入“URL:http://localhost:端口/home/study”。

猜你喜欢

转载自blog.csdn.net/m0_47675090/article/details/106240257