<link rel="stylesheet" href="/css/blog-common.min.css?v=Ey2dEx6TCJEMq7i5rGGloHkehiHv58PKGLPsLJ6UZME" />
<link type="text/css" rel="stylesheet" href="https://www.cnblogs.com/for-easy-fast/custom.css?v=O4GHqWcjXFnHQxkY+CVmLe8MOkY=" />
<link id="mobile-style" media="only screen and (max- 767px)" type="text/css" rel="stylesheet" href="/skins/bluesky/bundle-bluesky-mobile.min.css?v=aPLTLGTW9gWgNnbzAv5GStR8fCDZa8gRB5bmadJN9s8" />
<link type="application/rss+xml" rel="alternate" href="https://www.cnblogs.com/for-easy-fast/rss" />
<link type="application/rsd+xml" rel="EditURI" href="https://www.cnblogs.com/for-easy-fast/rsd.xml" />
<link type="application/wlwmanifest+xml" rel="wlwmanifest" href="https://www.cnblogs.com/for-easy-fast/wlwmanifest.xml" />
<script>
var currentBlogId = 154810;
var currentBlogApp = 'for-easy-fast';
var cb_enable_mathjax = false;
var isLogined = true;
var isBlogOwner = false;
var skinName = 'BlueSky';
var visitorUserId = '4aa92d34-6b0d-e011-ac81-842b2b196315';
</script>
<script>
var currentPostDateAdded = '2021-01-31 05:33';
</script>
<script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
<script src="/js/blog-common.min.js?v=8XLVVgIKTDKdhgJp-38Ybd0sr84shalIuuDSorvxDlE"></script>
<div id="page_begin_html">
</div>
<!--done-->
择其通者而纳之
世间知无限,唯识异同
</div><!--end: blogTitle 博客的标题和副标题 -->
<div id="navigator">
<div class="blogStats">
<div id="blog_stats_place_holder"><script>loadBlogStats();</script></div>
</div><!--end: blogStats -->
</div><!--end: navigator 博客导航栏 -->
ASP.NET Core 5.0 MVC中的视图分类及使用——布局视图、启动视图、导入视图、详细视图、分部视图
</h1>
<div class="clear"></div>
<div class="postBody">
创建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 <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">border-top footer text-muted</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
<div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">container</span><span style="color: rgba(128, 0, 0, 1)">"</span>>
&copy; <span style="color: rgba(128, 0, 128, 1)">2021</span> - net5MVC - <a asp-area=<span style="color: rgba(128, 0, 0, 1)">""</span> asp-controller=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Home</span><span style="color: rgba(128, 0, 0, 1)">"</span> asp-action=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Privacy</span><span style="color: rgba(128, 0, 0, 1)">"</span>>Privacy</a>
</div>
</footer>
<script src=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">~/lib/jquery/dist/jquery.min.js</span><span style="color: rgba(128, 0, 0, 1)">"</span>></script>
<script src=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">~/lib/bootstrap/dist/js/bootstrap.bundle.min.js</span><span style="color: rgba(128, 0, 0, 1)">"</span>></script>
<script src=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">~/js/site.js</span><span style="color: rgba(128, 0, 0, 1)">"</span> asp-append-version=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">true</span><span style="color: rgba(128, 0, 0, 1)">"</span>></script><span style="color: rgba(0, 0, 0, 1)">
@await RenderSectionAsync(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Scripts</span><span style="color: rgba(128, 0, 0, 1)">"</span>, required: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">)
</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. 运行,查看效果
</h1>
<div class="clear"></div>
<div class="postBody">
创建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 <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">border-top footer text-muted</span><span style="color: rgba(128, 0, 0, 1)">"</span>> <div <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">container</span><span style="color: rgba(128, 0, 0, 1)">"</span>> &copy; <span style="color: rgba(128, 0, 128, 1)">2021</span> - net5MVC - <a asp-area=<span style="color: rgba(128, 0, 0, 1)">""</span> asp-controller=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Home</span><span style="color: rgba(128, 0, 0, 1)">"</span> asp-action=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Privacy</span><span style="color: rgba(128, 0, 0, 1)">"</span>>Privacy</a> </div> </footer> <script src=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">~/lib/jquery/dist/jquery.min.js</span><span style="color: rgba(128, 0, 0, 1)">"</span>></script> <script src=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">~/lib/bootstrap/dist/js/bootstrap.bundle.min.js</span><span style="color: rgba(128, 0, 0, 1)">"</span>></script> <script src=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">~/js/site.js</span><span style="color: rgba(128, 0, 0, 1)">"</span> asp-append-version=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">true</span><span style="color: rgba(128, 0, 0, 1)">"</span>></script><span style="color: rgba(0, 0, 0, 1)"> @await RenderSectionAsync(</span><span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">Scripts</span><span style="color: rgba(128, 0, 0, 1)">"</span>, required: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">)
</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. 运行,查看效果
C# 线程同步
WPF中Visible设为Collapse时,VisualTreeHelper.GetChildrenCount为0
Set connectionId threw an exception.
C# 深化基本概念
wpf如何获取control template里的元素
DataGrid当列宽超出当前宽度时,没有数据也恒有滚动条
利用MEF实现插件机制(可根据输入类型来加载特定dll)
利用正则表达式类解析SQL语句,达到Worklist兼容各个RIS数据库的目的
Mysql 创建存储过程 更新表
- 最新文章
-
HL7 ADT Message Sample
The specified named connection is either not found in the configuration, not intended to be used
HL7 Event Type
用Entity Framework 来创建MySql数据库和表结构
WCF知识点(应用WCF支持原生Socket访问, 原始字节流传输)
WPF Background的设置有坑
HL7 Tools suite
实现PIX需要参考的标准资料
为BindingList添加Sort
TreeView滚动TreeViewItem
Copyright © 2011-2022 走看看