ASP.NET Core 5.0 MVC中的视图分类及使用——布局视图、启动视图、导入视图、详细视图、分部视图

时间2023-12-04 01:19:02发布访客分类ASP.NET浏览1303

导读：创建MVC应用程序创建后的项目启动视图 _ViewStart.cshtml顾名思义，就是在View开始执行之前执行，而且是每一个View, 它的预设内容是@{ Layout = "_Layout"; }我们可以在这个页面，添加一...

创建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">
    
            &
    copy;
     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>