ASP.NET Core Views系列一

1 创建View

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呈现在浏览器中

这个View适用于Tokyo的action方法，如果我有另外一个action叫Nagoya在相同的控制器中

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的位置

2 添加视图快捷键

在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>}

4 如何在ASP.NET Core View中调用Action方法

在视图中，添加HTML表单和提交按钮，当这个按钮被点击时，这个表单被提交到与之匹配的action，这个url被设置使用表单action特性属性，我们创建表单action的url通过使用下面两个帮助标签：

1 asp-controller - 指定控制器的名称，如果这个参数被省略，框架会自动查找当前view关联的控制器

2 asp-action - 指定action方法的名字，如果该参数被省略，框架会自动查找当前view关联的action

例子：更新Tokyo.cshtml视图文件包含下面表单代码

<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>

注意使用asp-controller="City"和asp-action="Tokyo"这两个帮助标签创建URL，当表单提交时CityController控制器中的Tokyo方法将被调用，method="post"特性告诉action以post方式调用

<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();}

为了获取到这2个值我们需要在控制器中添加2个参数，现在运行应用并且进入URL-https://localhost:7019/City/Tokyo，在表单中输入值并提交你将会在控制器的action方法中获取到该值

ASP.NET Core Views系列一

5 Shared 视图

共享视图保存在Views->Shared目录下，可以在不同的action之间共享页面, 让我们通过一个例子来了解一下，在HomeController.cs文件中创建一个新的action方法叫CallSharedView，代码如下：

public IActionResult CallSharedView(){   return View();}

我们把CallSharedView方法代码复制到另外一个控制器中ExampleController.cs

现在Home和Example控制器中分别有叫CallSharedView方法, 针对这两个action方法我们创建一个共享视图，因此添加一个视图文件在Views->Shared文件夹并且命名为CallSharedView.cshtml , 这个视图的名字和这两个控制器中action方法的名字相同

这个视图相当简单，我们用h1 标签展示消息

<h1>Displaying from Shared View</h1>

ASP.NET Core 保证所有的共享视图可用并且确保他们可用，运行应用程序并且在浏览器中打开下面两个连接，这两个连接使用了我们之前创建的2个方法

ASP.NET Core Views系列一

6 ASP.NET Core是如何搜索视图文件的

ASP.NET Core action会从下面两个地方搜索视图文件：

/Views/<ControllerName>/<ViewName>.cshtml/Views/Shared/<ViewName>.cshtml

例如下面AdminController中的List方法，最后一行调用View()方法

public IActionResult List() {    return View();}

ASP.NET Core会在下面两个位置查找视图：

1 /Views/Admin/List.cshtml => 如果在这个位置发现文件，将会呈现视图，如果在这个位置没有发现文件，将会在第二个位置查找

2 /Views/Shared/List.cshtml => 如果在这里发现文件将呈现该文件，如果没有View将抛出一个错误

我们没有为List方法添加视图文件，这种情况下将会抛出一个错误，因此运行应用程序并且输入如下url，你将会看到一个视图没有发现的异常消息

ASP.NET Core Views系列一

我们只需要在/Views/Admin文件夹或者在/Views/Shared文件夹下添加List.cshtml

6.1 区域视图

如果你的控制器是ASP.NET Core Area的一部分，可以从下面3个位置搜索：

/Areas/<AreaName>/Views/<ControllerName>/<ViewName>.cshtml/Areas/<AreaName>/Views/Shared/<ViewName>.cshtml/Views/Shared/<ViewName>.cshtml

让我们通过一个例子来了解一下，首先在应用程序的根目录下添加一个新的Areas文件夹，接下来在Areas文件加内添加一个Sales文件夹

在Areas->Sales文件加下添加一个新的AdminController, 在这个控制器中添加一个List方法

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 => 如果在这个文件夹下发现视图，该视图将会被呈现，如果没有，则会抛出一个异常

ASP.NET Core Views系列一

7 Layout视图

ASP.NET Core是否内置应用程序的UI或者另外一些技术包含公共部分保持相同，例如：logo区域，头部菜单，左侧导航以及右侧工具链或者底部区域，ASP.NET Core 有一个布局视图叫_Layout.cshtml 包含公共UI部分，Layout视图必须位于Views->Shared文件夹

注意：如果你的应用程序已经有layout文件，你可以删除它，我们将从头创建一个新的布局文件

我们在Shared文件夹下添加一个新的_Layout.cshtml文件

ASP.NET Core Views系列一

_Layout.cshtml文件将被创建，我们打开并且编辑它

<!DOCTYPE html>
<html><head>    <meta name="viewport" content="width=device-width" />    <title>@ViewBag.Title</title></head><body>    <div>        @RenderBody()    </div></body></html>

正如你清楚的看到它包含了HTML代码块使用了一小部分Razor代码像 @ViewBag.Title 用来设置页面的title，@RenderBody()呈现所有的子视图，不包含Section，让我们先了解Layout是如何工作的

7.1 _ViewStart.cshtm文件

Razor视图启动文件是_ViewStart.cshtml文件，位于Views文件夹内，它包含的代码会首先运行，代码比较简单并且告诉dotnet使用_Layout.cshtml 作为默认布局文件

@{    Layout = "_Layout";}

如果没有_ViewStart.cshtml这个文件，那么我们需要通过在每个视图上添加以下Razor代码来告诉它们默认布局

@{    Layout = Layout;}

因此有这个文件能够移除大量的重复代码，类似的，如果一个应用程序有ViewStart文件，但是不想在视图中应用它，这种情况下在View中添加@{ Layout = null; }

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方法

3 在页面底部添加footer

现在添加一个新的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>

现在我们为我们应用程序创建一个通用页面，现在我们创建一个新的action方法测试TestLayout页面

public IActionResult TestLayout(){    ViewBag.Title = "Welcome to TestLayout";    return View();}

我们设置ViewBag.Title变量，layout将读取这个值并显示当前页面title

这个View代码比较简单并且包含了2行，这个视图作为_Layout.csthml的子视图来呈现，我们讨论过@RenderBody(),他的主要功能是呈现子视图在_Layout.cshtml文件替换@RenderBody()代码被调用

运行应用程序打开https://localhost:7019/Home/TestLayout 如下所示：

ASP.NET Core Views系列一

7.3 段落布局

Layout Sections帮助我们在布局文件中指定的位置插入子视图的内容，这个对应用程序设计处理是非常简单的，通过使用@Section表达式在子视图中定义内容，在Layout视图我们使用@RenderSection呈现这些Sections，我们添加3个layout sections在TestLayout.cshmtl作为展示：

1 Top

2 Bottom

3 Script

@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>

这些sections可以包含html和razor代码，在这里我们在顶部和底部添加一些简单的DIV，并且引入了脚本段，接下来在应用程序的_Layout.cshtml文件中添加代码呈现这些段落，我们更新一下_Layout.cshmtl文件代码如下

<!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>

运行应用程序并测试：

ASP.NET Core Views系列一

7.4 布局可选段落

可选的布局段落虽然在子视图中定义了，但是我们不想用，我们通过一个例子来了解，添加另一个段落调用Ads在layout布局文件中

这里我们没有在TestLayout.cshml视图中定义段落，现在运行应用程序，你将看到未处理的异常：

ASP.NET Core Views系列一

Layout视图没有在子视图中发现这个段落，我们可以通过在TestLayout.cshtml视图中添加下面代码来修复这个bug

@section Ads {}

我们也可以通过另外一种方式解决这个错误，确保这个段落在layout页面是可选的，使用这个可选段落dotnet会忽略它如果这个段落没有在子视图中定义

我们使用@RenderSection方法第二个参数，进入Layout页面并且修改@RenderSection("Ads")为@RenderSection("Ads", false)使这个段落可选

<!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("Ads",false);
    @RenderSection("Script")    <footer class="border-top footer text-muted">        <div class="container">            ASP.NET Core Site        </div>    </footer></body></html>

源代码地址

https://github.com/bingbing-gui/Asp.Net-Core-Skill/tree/master/Fundamentals/AspNetCore.Views/AspNetCore.Views

董川民