<三>Asp.netcore MVC 视图(View)

在MVC模式中， 视图封装了用户与应用交互呈现细节。 视图是具有生成要发送到客户端内容的、 包含嵌入代码的HTML模板。视图使用Razor语法， 该语法允许以最少的代码量或复杂度与HTML进行交互。ASP.NET Core MVC视图默认以.cshtml文件保存在应用程序的Views文件夹里面。

一、创建视图

属于某个控制器的视图创建在Views/ [ControllerName]文件夹下。在控制器之间共用的视图则放在Niews/Shared文件夹下。 

@{ ＠符号代表Razor代码。C#语句在大括号（｛｝）包裹的Razor代码块中运行，
ViewData ["Title"] = "About"; 
}
<h2>@ViewData ["Title"] </h2> 
<h3>@ViewData["Message"]</h3>
<p>Use this area to provide additional information.</p>

二、数据传输方式

1、在视图中指定 个模型类型（视图模型）， 将此类型的实例从操作传递到视图。 建议使用模型或视图模型将数据传递到视图。这允许视图利用强类型检查， 你可以使用@model指令引用该类型

@model WebApplicationl.ViewModels.Address <h2>Contact</h2> 
<address> 
@Model.street<br /> 
@Model. City, @Model. State @Model. PostalCode<br /> <abbr title="Phone">P:</abbr>
</address>

public IActionResultContact()｛ 
var viewModel = new Address()
{
    Name = "Microsof七",
    Street = "One Microsoft Way", City = "Redmond", 
    State = "WA", 
    PostalCode = "98052-6399" 
}; 
return View(viewModel);

2、ViewData、ViewBag

该集合的动态视图， 它不是个单独的集合。ViewData 是通过字符串键访问的字典对象， 可以在其中存储和检索对象。 当提取对象时，需要将它们转换为特定类型。可以使用ViewData 将数据从控制器传递到视图

@using ViewModeles.Address;
@{
var address = ViewData["Address") as Address;
}

ViewData ["Greeting"] = "Hello"; 
ViewData ["Address"] = new Address ()

三、布局（Layout）

1、大多数Web应用程序具有通用布局，为用户在页面之间导航提供一致的体验。布局通常包括常见的用户界面元素，例如应用头、导航或菜单元素和页脚，如下图所示。

 

 

 2、ASP.NET应用程序的默认布局名为_Layout.cshtml。项目模板放在在Views/Shared 文件夹中。

Razor视图有一个 Layout属性。单个视图通过设置此属性来指定布局:

@{
   Layout = "_Layout" ;
}

3、局部视图(Partial Views)

ASP.NET Core MVC支持局部视图，当希望在不同视图之间共享网页的可重用部分时，局部视图非常有用。与视图一样,局部视图使用.cshtml 文件扩展名。

局部视图是将大视图分成较小组件的有效方法。它可以减少视图内容的重复，并允许重用视图元素。通用的布局元素应在_Layout.cshtml中指定,非布局可重用内容可以封装为局部视图。

@Html.Partial( "AuthorPartial")；
@await Html.PartialAsync("AuthorPartial")
@Html.Partial("PartialName", viewModel)

4、视图组件(View Component）

视图组件是ASP.NET Core MVC中的新特性，类似于部分视图，但是它更加强大。视图组件不使用模型绑定，并且仅依赖于调用它时所提供的数据。

创建方式

派生自ViewComponent。
使用[ViewComponent]属性装饰类，或从具有[ViewComponent]属性的类派生。创建一个名称后缀为ViewComponent结尾的类。

使用

@Component.InvokeAsync("视图组件名",<匿名类型参数>)。
参数将传递到InvokeAsync方法。
@await Component.InvokeAsync("PriorityList",new { maxPriority = 2，isDone =false }