ASP.NET Core MVC中的视图（Views）

1.什么是视图

在 MVC 中，视图封装了用户与应用交互呈现细节。视图是具有生成要发送到客户端内容的，包含嵌入代码的HTML模板。视图使用使用 Razor 语法，该语法允许以最少的代码或复杂度与 HTML 进行交互。

ASP.NET Core MVC 视图默认以 .cshtml 文件保存在应用程序的 Views 文件夹里面。通常，每个控制器都有自己的文件夹，其中包含对应控制器操作方法的视图。

除了对应操作的视图，局部视图，布局以及其他特定视图文件可以用来减少重复，并允许在视图中重复使用。

视图在 MVC 应用程序中提供了关注的分离，将用户界面级标记与业务逻辑分开封装。通常，可以通过布局与共享指令<layout>或布局视图<partial>对应的用户界面中重复使用。

2.创建视图

属于某个控制器的视图创建在 Views/[ControllerName] 文件夹下。在控制器之间公用的视图则放在 /Views/Shared 文件夹下。将视图命名为与其关联的控制器操作一样的名字，并添加 .cshtml 扩展名。例如，为Home 控制器的 About 操作创建一个视图，则应在 /Views/Home 文件夹下创建一个 About.cshtml 文件，或者在操作方法上右键点击添加视图：

@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>

<p>Use this area to provide additional information.</p>

@ 符号代表 Razor 代码。C# 语法在 { } 包裹的 Razor 代码块中运行，Razor 可以通过运用 @ 符号对值进行操作，从而在HTML中显示，就像上面 <h2> 和 <h3> 元素里面展示的那样。

这个视图只关心由它负责的这部分输出。而页面布局的部分，以及视图中的通用外观，在别的地方指定。

3.控制器指定视图

视图通常作为 ViewResult 从操作返回。操作方法可以直接创建和返回一个 ViewResult ，但一般，如果控制器继承自 Controller ，则只需使用 View 辅助方法即可：

public IActionResult About()
        {
            ViewData["Message"] = "Your application description page.";

            return View();
        }

View 的辅助方法有多个重载，以便于返回视图。可以有选择性地指定一个返回的视图，还可以给视图返回一个模型对象。

当操作返回视图时，将发生称为视图发现的过程。此过程将确定使用哪个视图文件。除非指定了特定的视图文件，否则运行时首先查找控制器对应的视图，然后在 Share 文件夹中查找匹配的视图名称。

当操作返回 View 方法时，比如 return View(); 这个操作的名字则被用作视图名称。也可以给这个方法床底一个明确的视图名称 return View("SomeView"); 。这两种情况视图都会在对应控制器的视图文件夹和Share文件夹搜索匹配的文件。

可以提供视图文件的路径，在这种情况下， .cshtml 扩展名必须指定为文件路径的一部分，return View(“Views/Home/About.cshtml ”);

4.给视图传递数据

ASP.NET Core MVC 可以使用多种机制给视图传递数据。最健壮的方式是在视图中指定一个模型类型（通常称为视图模型，以区别于业务领域的模型类型），然后将此类型的实例从操作传递到视图。建议使用模型或视图模型将数据传递到视图。这允许视图利用强类型检查，可以使用 @model 指令为视图指定模型：

@model MVCTest.Models.Operation

@{
    ViewData["Title"] = "Create";
}

<h2>Create</h2>

<h4>Operation</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Id" class="control-label"></label>
                <input asp-for="Id" class="form-control" />
                <span asp-validation-for="Id" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

一旦为视图指定了模型，就可以使用 @Model 以强类型方式访问发送到视图的实例。（@Model.Name）上面使用的标签助手。控制器向视图提供实例：

public ActionResult Create()
        {
            var model = new Operation()
            {
                Id=1,
                Name="test"
            };
            return View(model);
        }

对于可以作为模型提供给视图的类型没有限制，建议传递具有很少或没有行为的视图模型，以便将业务逻辑封装在应用程序的其他位置。

1.弱类型数据

除了强类型视图之外，所有视图都可以访问弱类型的数据集合。此集合可以通过控制器和视图上的 ViewData 或 ViewBag 属性进行引用。ViewBag 属于 ViewData 的一个包装器，它提供了该集合的动态视图，它不是一个单独的集合。

ViewData 是通过字符串键访问的字典对象，可以在其中存储和检索对象。当提取对象时，需要将它们转化为特定类型。可以使用 ViewData 将数据从控制器传递到视图，以及在视图（局部视图和布局）中传递。字符串可以直接存储和使用，不需要转化：

public IActionResult About()
        {
            var model = new Operation()
            {
                Id=1,
                Name="test"
            };
            ViewData["Operation"]  = model ;
            
            ViewData["Message"] = "Your application description page.";

            return View();
        }

视图：

@{
    ViewData["Title"] = "About";
    //需要转化
    var operation = ViewData["Operation"]  as Operation ;
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>
<h3>@operation.Id</h3>
<h3>@operation.Name</h3>
<p>Use this area to provide additional information.</p>

ViewBag 对象提供对存储在 ViewData 中的对象的动态访问，这样可以更方便的使用，因为不需要转换：

@{
    ViewData["Title"] = "About";

}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>
<h3>@ViewBag.Operation.Id</h3>
<h3>@ViewBag.Operation.Name</h3>
<p>Use this area to provide additional information.</p>

由于两者都指向相同的底层 ViewData 集合，因此如果方便，可以在读取和写入值时，在 ViewBag 和 ViewData 之间可以混合使用。

2.动态视图

不声明类型，但具有传递给它们的模型实例的视图可以动态引用此实例。但不提供任何编译保护或 IntelliSense 。如果属性不存在，则页面将在运行时出错。

5.更多视图特性

标签助手可以轻松地将服务器端行为添加到现有地 HTML 标签中，从而避免在视图中使用自定义代码或助手代码。

生成自定义 HTML 标记可以使用许多内置地 HTML 助手来实现，更复杂地 UI 逻辑（可能具有自己地数据需求）可以封装在视图组件（View Components）中。视图组件提供了与控制器和视图提供的相同的关注点，并且可以消除对于处理由常见UI 元素使用数据的动作和视图的需要。

视图页支持依赖注入，允许服务注入到视图。

频道导航