Razor View文件是为action方法提供视图，可以在Views->ControllerName文件夹下创建这个文件，在我们应用程序中创建一个CityController.cs文件，这个控制器中有一个Tokyo的方法
using Microsoft.AspNetCore.Mvc;namespace AspNetCore.Views.Controllers{public class CityController : Controller{public IActionResult Tokyo(){return View();}}}
针对这个action方法，我们创建一个他自己的视图在Views->City文件夹下，注意文件夹的名字没有Controller后缀，是City而不是CityController
因此在应用程序的Views文件夹内创建一个新的文件夹叫City，选择Add->New Item, 在弹出的对话框中选择Razor View -Empty 并且将其命名为Tokyo.cshtml
<h1>Welcome to Tokyo</h1>运行应用程序进入URL-https://localhost:7019/City/Tokyo，我们会看到View呈现在浏览器中
using Microsoft.AspNetCore.Mvc;namespace AspNetCore.Views.Controllers{public class CityController : Controller{public IActionResult Tokyo(){return View();}public IActionResult Nagoya(){return View();}}}
现在我们将创建一个Nagoya.cshtml视图文件在Views->City文件夹，我们简单的显示消息
<h1>Welcome to Nagoya</h1>在应用程序中，下列图片显示了2个View的位置
在Visual Studio中可以使用快捷键为action添加View，右键点击action方法名称并且在菜单中选择Add View，Visual Studio将会打开对话框，你能选择视图并且给视图命名，如果没有Controller文件夹会自动创建一个
3 在View中使用Razor语法写自定义逻辑
你可以在视图中写业务逻辑代码，例如if和foreach语句，例子：在视图中添加下列代码：
@if (DateTime.Now.DayOfWeek == DayOfWeek.Monday){<p>It's a Boring Day</p>}else{<p>It's a Party Day</p>}
也可以在视图中添加下面代码
@{string[] countries = new string[] { "England", "France", "Germany", "China" };<ul>@foreach (string country in countries){<li>@countries</li>}</ul>}
在视图中，添加HTML表单和提交按钮，当这个按钮被点击时，这个表单被提交到与之匹配的action，这个url被设置使用表单action特性属性，我们创建表单action的url通过使用下面两个帮助标签：
<h1>Welcome to Tokyo</h1><form asp-controller="City" asp-action="Tokyo" method="post"><div class="mb-3 row"><label class="col-sm-1 control-label">名称</label><div class="col-sm-11"><input class="form-control" name="name" /></div></div><div class="mb-3 row"><label class="col-sm-1 control-label">性别</label><div class="col-sm-11"><select class="form-control" name="sex"><option value="F">Female</option><option value="M">Male</option></select></div></div><div class="mb-3 row"><div class="col-sm-11 offset-sm-1"><button class="btn btn-primary" type="submit">保存</button></div></div></form>
<form asp-controller="City" asp-action="Tokyo" method="post">这个表单有2个html控件能够输入用户和性别，提交这个表单时，action方法会接收到对应的值
<input class="form-control" name="name" /><select class="form-control" name="sex"><option value="F">Female</option><option value="M">Male</option></select>
现在在CityController中添加一个POST版本的Tokyo方法，代码如下
[HttpPost]public IActionResult Tokyo(string name,string sex){return View();}
共享视图保存在Views->Shared目录下，可以在不同的action之间共享页面, 让我们通过一个例子来了解一下，在HomeController.cs文件中创建一个新的action方法叫CallSharedView，代码如下：
public IActionResult CallSharedView(){return View();}
我们把CallSharedView方法代码复制到另外一个控制器中ExampleController.cs
<h1>Displaying from Shared View</h1>ASP.NET Core action会从下面两个地方搜索视图文件：
/Views/<ControllerName>/<ViewName>.cshtml/Views/Shared/<ViewName>.cshtml
public IActionResult List(){return View();}
如果你的控制器是ASP.NET Core Area的一部分，可以从下面3个位置搜索：
/Areas/<AreaName>/Views/<ControllerName>/<ViewName>.cshtml/Areas/<AreaName>/Views/Shared/<ViewName>.cshtml/Views/Shared/<ViewName>.cshtml
让我们通过一个例子来了解一下，首先在应用程序的根目录下添加一个新的Areas文件夹，接下来在Areas文件加内添加一个Sales文件夹
using Microsoft.AspNetCore.Mvc;namespace AspNetCore.Views.Areas.Sales{public class AdminController : Controller{public IActionResult List(){return View();}}}
在Program.cs类中添加区域路由
app.MapControllerRoute(name:"myArea",pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");
运行应用程序并且在浏览器中打开url-https://localhost:7019/Sales/Admin/List ，我们会看到一个视图文件没有呈现的错误, ASP.NET Core 从下面三个位置搜索视图：
1 /Areas/Sales/Views/Admin/Show.cshtml => 如果在这个文件夹下发现文件，该视图将会被呈现, 如果没有，则会到第二个位置查找
2 /Areas/Sales/Views/Shared/Show.cshtml => 如果在这个文件夹下发现视图，该视图将会被呈现，如果没有，则会到第三个位置查找
3 /Views/Shared/Show.cshtml => 如果在这个文件夹下发现视图，该视图将会被呈现，如果没有，则会抛出一个异常
7 Layout视图
ASP.NET Core是否内置应用程序的UI或者另外一些技术包含公共部分保持相同，例如：logo区域，头部菜单，左侧导航以及右侧工具链或者底部区域，ASP.NET Core 有一个布局视图叫_Layout.cshtml 包含公共UI部分，Layout视图必须位于Views->Shared文件夹
注意：如果你的应用程序已经有layout文件，你可以删除它，我们将从头创建一个新的布局文件
_Layout.cshtml文件将被创建，我们打开并且编辑它
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width" /><title>@ViewBag.Title</title></head><body><div>@RenderBody()</div></body></html>
7.1 _ViewStart.cshtm文件
@{Layout = "_Layout";}
@{Layout = Layout;}
因此有这个文件能够移除大量的重复代码，类似的，如果一个应用程序有ViewStart文件，但是不想在视图中应用它，这种情况下在View中添加@{ Layout = ; }
7.2 使用Bootstrap设计Layout
我们可以使用Bootstrap包设计我们页面，首先需要安装Bootstarp包，安装完成，会在wwwroot->lib->bootstrap目录下，我们创建ASP.NET Core Web App(Model-View-Controller)模版已经在项目中预先安装Bootstrap
因此我们检查文件夹我们发现它已经安装，现在我们添加3设计部分在_Layout.cshmtl. 这些是：
1 在页面头部添加bootstrap.min.css 样式
2 在页面头部添加bootstrap导航菜单链接到应用程序的不同的action方法
现在添加一个新的Action方法并且命名为TestLayout，代码如下：
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width" /><title>@ViewData["Title"]</title><link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.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-fluid"><a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">UnderstandingControllersViews</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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-controller="Home" asp-action="Index">Home</a></li><li class="nav-item"><a class="nav-link text-dark" asp-controller="City" asp-action="Tokyo">Tokyo</a></li><li class="nav-item"><a class="nav-link text-dark" asp-controller="City" asp-action="Nagoya">Nagoya</a></li><li class="nav-item"><a class="nav-link text-dark" asp-controller="Home" asp-action="CallSharedView">Shared View</a></li><li class="nav-item"><a class="nav-link text-dark" asp-controller="Example" asp-action="CallSharedView">Shared View</a></li><li class="nav-item"><a class="nav-link text-dark" asp-controller="Admin" asp-action="List">Search View</a></li><li class="nav-item"><a class="nav-link text-dark" asp-area="Sales" asp-controller="Admin" asp-action="List">Area View</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">ASP.NET Core Site</div></footer></body></html>
public IActionResult TestLayout(){ViewBag.Title = "Welcome to TestLayout";return View();}
我们设置ViewBag.Title变量，layout将读取这个值并显示当前页面title
运行应用程序打开https://localhost:7019/Home/TestLayout 如下所示：
@section Top {<div class="p-3 mb-2 bg-primary text-white">This is Top</div>}@section Bottom {<div class="p-3 mb-2 bg-info text-white">This is Bottom</div>}@section Script {<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>}<h2 class="text-primary">TestLayout starts here</h2><p class="text-success">This text is coming from child view</p>
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width" /><title>@ViewData["Title"]</title><link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /></head><body><header></header>@RenderSection("Top");<div class="container"><main role="main" class="pb-3">@RenderBody()</main></div>@RenderSection("Bottom")@RenderSection("Script")<footer class="border-top footer text-muted"><div class="container">ASP.NET Core Site</div></footer></body></html>
7.4 布局可选段落
可选的布局段落虽然在子视图中定义了，但是我们不想用，我们通过一个例子来了解，添加另一个段落调用Ads在layout布局文件中
Layout视图没有在子视图中发现这个段落，我们可以通过在TestLayout.cshtml视图中添加下面代码来修复这个bug
@section Ads {}
我们也可以通过另外一种方式解决这个错误，确保这个段落在layout页面是可选的，使用这个可选段落dotnet会忽略它如果这个段落没有在子视图中定义
我们使用@RenderSection方法第二个参数，进入Layout页面并且修改@RenderSection("Ads")为@RenderSection("Ads", false)使这个段落可选
<html><head><meta name="viewport" content="width=device-width" /><title>@ViewData["Title"]</title><link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /></head><body><header></header>@RenderSection("Top");<div class="container"><main role="main" class="pb-3">@RenderBody()</main></div>@RenderSection("Bottom")@RenderSection("Ads",false);@RenderSection("Script")<footer class="border-top footer text-muted"><div class="container">ASP.NET Core Site</div></footer></body></html>
源代码地址
参考文献
[1]https://www.yogihosting.com/aspnet-core-views/
