创建MVC应用程序
创建后的项目
启动视图 _ViewStart.cshtml
顾名思义,就是在View开始执行之前执行,而且是每一个View, 它的预设内容是
@{ Layout = "_Layout"; }
我们可以在这个页面,添加一些全局性的内容,比如全局变量等,然后在具体View页面使用这些变量值
导入视图_ViewImports.cshtml,
它的作用是放一些要引用的命名空间,之后的每一个View就不用再引用这些命名空间了,_ViewImports.cshtml一样。它的预设内容是
@using net5MVC
@using net5MVC.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
在这个页面,我们根据页面需要去引用命名空间,它的作用范围是全局的。在这个页面添加文本是没有效果的。
布局视图_Layout.cshtml
它的作用是让所有的视图页保持一致的外观,比如说 统一的 左侧目录、统一的头部导航、头部轮廓图、统一底部官网链接等。它的预设内容是
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - net5MVC</title> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="~/css/site.css" /> </head> <body> <header> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <div class="container"> <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">net5MVC</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> <ul class="navbar-nav flex-grow-1"> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a> </li> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> </li> </ul> </div> </div> </nav> </header> <div class="container"> <main role="main" class="pb-3"> @RenderBody() </main> </div> <footer class="border-top footer text-muted"> <div class="container"> © 2021 - net5MVC - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> </div> </footer> <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> @await RenderSectionAsync("Scripts", required: false) </body> </html>
详细视图 [Action].cshtml
这个很常见,都认识,不介绍了,略过~。
运行效果
将下面这些数据,加到各自页面中,运行Index页面观察效果
<h2 style="color:red">_ViewStart.cshtml页面</h2> <h2 style="color:green">_Layout.cshtml页面</h2> <h2 style="color:darkgoldenrod">_ViewImport.cshtml页面</h2> <h2 style="color:blue">Index.cshtml页面</h2>
_ViewStart.cshtml页面
_Layout.cshtml页面
_ViewImport.cshtml页面
Index.cshtml页面
在index.cshtml上 F5,运行
分部视图_Partial[Name].cshtml
1. 在Index相同的目录下新建视图页_PartialIndex,并加入一些数据
2. 在Index页面,引入该分部页内容 Html.RenderPartial("_PartialIndex", model);
3. 运行,查看效果