zoukankan      html  css  js  c++  java
  • ASP.NET Core 5.0 MVC中的视图分类及使用——布局视图、启动视图、导入视图、详细视图、分部视图

    创建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>
    _ViewStart.cshtml页面

     _Layout.cshtml页面

     _ViewImport.cshtml页面

     Index.cshtml页面

    在index.cshtml上 F5,运行

    分部视图_Partial[Name].cshtml

    1. 在Index相同的目录下新建视图页_PartialIndex,并加入一些数据

      2. 在Index页面,引入该分部页内容   Html.RenderPartial("_PartialIndex", model);

     3. 运行,查看效果

    !

    • 作       者 : 明志德道
    • 希     望: 如果内容对您有用,动动小手点个赞吧,您的支持就是我持续写作的动力!
    • 声     明1 : 如有错误,欢迎讨论,请勿谩骂^_^。
    • 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址,否则保留追究法律责任的权利。
  • 相关阅读:
    模拟器 waiting for debugger
    2020年春节抢票神器
    spyder crashed during last session
    D盘 自动创建 保存的图片 本机照片
    北邮 自考 数据结构 考核指导
    对无相关性的样本特征进行onehot编码
    opencv的Kmeans聚类算法应用
    adaboost详解
    ROC与AUC曲线绘制
    K近邻算法核心函数详解
  • 原文地址:https://www.cnblogs.com/for-easy-fast/p/14353269.html
Copyright © 2011-2022 走看看