1. 创建布局页(_Layout.cshtml): 在Views/Shared文件夹中创建一个布局页。布局页通常包含HTML的整体结构,而且可以包含动态的Razor标记。
示例(_Layout.cshtml):
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title - My MVC App</title>
<!-- 引入样式表和其他头部元素 -->
</head>
<body>
<div id="header">
<!-- 共享的页眉内容 -->
</div>
<div id="content">
@RenderBody() <!-- 渲染视图的主体内容 -->
</div>
<div id="footer">
<!-- 共享的页脚内容 -->
</div>
<!-- 引入脚本等底部元素 -->
</body>
</html>
2. 在视图中使用布局: 在每个视图文件的顶部使用@layout指令指定布局页。通常,视图文件会继承布局页,并使用@RenderSection标记定义可选的内容部分。
示例(Views/Home/Index.cshtml):
@model YourNamespace.Models.User
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Home";
}
<h2>Welcome, @Model.UserName!</h2>
<p>Email: @Model.Email</p>
@section scripts {
<!-- 可选的脚本部分 -->
<script src="~/Scripts/myscript.js"></script>
}
3. 定义可选的部分(Section): 在布局页中,您可以使用@RenderSection标记定义可选的部分,而在视图中,您可以使用@section标记填充这些部分。
在布局页中的示例:
<div id="content">
@RenderBody() <!-- 渲染视图的主体内容 -->
</div>
@RenderSection("scripts", required: false) <!-- 渲染可选的脚本部分 -->
在视图中的示例:
@section scripts {
<!-- 可选的脚本部分 -->
<script src="~/Scripts/myscript.js"></script>
}
通过使用布局,您可以确保应用程序的外观和结构在整个应用程序中保持一致。这使得对于更改样式、调整页眉或页脚等共享元素变得更加容易,并且有助于减少冗余的代码。
转载请注明出处:http://www.zyzy.cn/article/detail/14863/ASP.NET Razor 标记