ASP.NET Core 5.0 MVC中的视图分类及使用——布局视图、启动视图、导入视图、详细视图、分部视图 </h1> <div class="clear"></div>
<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-width: 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-->
![返回主页](/skins/custom/images/logo.gif)
择其通者而纳之
世间知无限,唯识异同
</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应用程序
![](https://img2020.cnblogs.com/blog/539967/202101/539967-20210131160717862-1875934718.png)
创建后的项目
启动视图 _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页面
![](https://img2020.cnblogs.com/blog/539967/202101/539967-20210131164258775-1345525486.png)
_Layout.cshtml页面
![](https://img2020.cnblogs.com/blog/539967/202101/539967-20210131164357840-1622616796.png)
_ViewImport.cshtml页面
![](https://img2020.cnblogs.com/blog/539967/202101/539967-20210131164459832-1254873035.png)
Index.cshtml页面
![](https://img2020.cnblogs.com/blog/539967/202101/539967-20210131164829501-1016567217.png)
在index.cshtml上 F5,运行
![](https://img2020.cnblogs.com/blog/539967/202101/539967-20210131165051141-1854117189.png)
分部视图_Partial[Name].cshtml
1. 在Index相同的目录下新建视图页_PartialIndex,并加入一些数据
![](https://img2020.cnblogs.com/blog/539967/202101/539967-20210131172031876-1139146450.png)
2. 在Index页面,引入该分部页内容 Html.RenderPartial("_PartialIndex", model);
![](https://img2020.cnblogs.com/blog/539967/202101/539967-20210131172059485-1948571852.png)
3. 运行,查看效果
![](https://img2020.cnblogs.com/blog/539967/202101/539967-20210131172201714-659028176.png)
</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. 运行,查看效果
</div><!--end: topics 文章、评论容器-->
</div><!--end: forFlow -->
</div><!--end: mainContent 主体内容容器-->
<div id="sideBar">
<div id="sideBarMain">
<div id="sidebar_news" class="newsItem">
<script>loadBlogNews();</script>
<div id="page_end_html">
<script type="text/javascript">
$(function(){
$('#blogTitle h1').addClass('bounceInLeft animated');
$('#blogTitle h2').addClass('bounceInRight animated');
// 删除反对按钮
$('.buryit').remove();
initCommentData();
});
function initCommentData() {
$('.feedbackItem').each(function() {
var text = $(this).find('.feedbackListSubtitle .layer').text();
// 将楼层信息放到data里面
// $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, ''));
if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself');
var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif';
$(this).find('> .feedbackCon > .blog_comment_body').append('')
});
}
$(document).ajaxComplete(function(event, xhr, settings) {
// 监听获取评论ajax事件
if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) {
initCommentData();
}
});
</div>