ASP.NET Core MVC中視圖的知識和ASP.NET MVC有很多相似之處，學(xué)習(xí)難度較低。以下內(nèi)容主要體現(xiàn)了編程中模塊化的思想，模塊化才應(yīng)是我們關(guān)注的重點。

布局用于提供各個頁面所需的公共部分，如：菜單、頁頭、頁尾等。在ASP.NET Core中默認的布局文件是位于/Views/Shared文件夾下的_Layout.cshtml文件：

我們通常在_Layout.cshtml中引入公共資源，如：

<link href="~/css/reset.css" rel="stylesheet" />
<link href="~/css/index.css" rel="stylesheet" /><script src="~/js/common/net/ajaxHandler.js"></script>
<environment names="Development">
<script src="~/js/lib/vue/vue.js"></script>
</environment>
<environment names="Production">
<script src="~/js/lib/vue/vue.min.js"></script>
</environment>

指定布局文件

可以在Razor視圖(即，cshtml文件)中使用Layout屬性來指定使用哪個布局文件：

ASP.NET Core MVC搜索布局文件的方式與局部視圖一樣，下文中會詳細說明。默認情況下，在布局文件中必須調(diào)用RenderBody方法。還可以使用RenderSection方法來引入section。

View Import

可以在_ViewImport.cshtm文件中添加命名空間或者Tag Helper以供其它視圖中使用，如：

@using Microsoft.AspNetCore.Identity
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

在_ViewImport.cshtm文件可以使用以下指令：

• @addTagHelper

• @removeTagHelper

• @tagHelperPrefix

• @using

• @model

• @inherits

• @inject

_ViewImport.cshtm文件不支持Razor文件的其它特性，如：function、section等。對于多個_ViewImports.cshtml的情況，指令運行結(jié)果遵循如下規(guī)則：

• @addTagHelper,?@removeTagHelper: 按照先后順序執(zhí)行

• @tagHelperPrefix: 后執(zhí)行的結(jié)果覆蓋先執(zhí)行的結(jié)果

• @model: 后執(zhí)行的結(jié)果覆蓋先執(zhí)行的結(jié)果

• @inherits: 后執(zhí)行的結(jié)果覆蓋先執(zhí)行的結(jié)果

• @using: 引入所指定的所有命名空間，但忽略重復(fù)引用

• @inject: 后注入覆蓋先注入的同名屬性

View Start

_ViewStart.cshtml文件中的代碼會在所有完整視圖(full view,not layout,not partial view)文件被渲染之前執(zhí)行。

默認情況下，ViewImports.cshtml和ViewStart.cshtml文件直接位于Views文件夾下：

• 相比其它位置的其它位置ViewImports.cshtml和ViewStart.cshtml，直接位于Views文件夾中的ViewImports.cshtml和ViewStart.cshtml文件會優(yōu)先執(zhí)行

• 后執(zhí)行的ViewImports.cshtml文件中的內(nèi)容有可能會覆蓋先執(zhí)行ViewImports.cshtml文件中的內(nèi)容

• ViewImports.cshtml和ViewStart.cshtml文件的作用域是當前目錄及子目錄

Tag Helper可以讓服務(wù)器端代碼參與到在Razor文件中創(chuàng)建和渲染HTML元素的工作中。

自定義Tag Helper：

public class XfhTagHelper : TagHelper
{
public string Content { set; get; }

public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
{
output.TagName = "a";
output.Attributes.Add("href", "https://www.google.com");
output.Content.SetContent(Content);
}
}

使用Tag Helper：

@addTagHelper *,Web

<xfh content="haha">customer tag helper</xfh>

Tag Helper與HTML Helper有些相似，二者不同之處可參考：Tag Helpers compared to HTML Helpers

Tag Helper具有以下優(yōu)點：

• 類HTML語法

  這一點是我喜歡Tag Helper的原因，使用Tag Helper可以使cshtml文件中后臺代碼與前端的搭配更和諧，利于提升代碼可讀性

• 語法智能感知

Tag Helper 作用域

• @addTagHelper

  @addTagHelper的第一個參數(shù)表示要加載哪些Tag Helper，使用"*"表示加載所有的Tag Helper；第二個參數(shù)表示從哪個程序集中加載Tag Helper。示例如下：

  @* 需指明TagHelper的完全限定名 *@
  @addTagHelper Web.TagHelpers.XfhTagHelper,Web

• @removeTagHelper

  @removeTagHelper也有兩個參數(shù)，含義同@addTagHelper

• @tagHelperPrefix

  給Tag Helper加上前綴標識，示例如下：

  @addTagHelper *,Web
  @tagHelperPrefix th:
  
  @* 不會被當作Tag Helper處理 *@
  <xfh content="haha">customer tag helper</xfh>
  <th:xfh content="tagHelperPrefix"></th:xfh>

Partial view，局部視圖是一個Razor文件，它通常嵌套在另一個Razor文件中。局部視圖主要用于拆分大的Razor文件及代碼復(fù)用。但請注意：

• 局部視圖不應(yīng)用來維護公共布局中的內(nèi)容，考慮使用_Layout.cshtml來維護公共布局

  Partial views shouldn't be used to maintain common layout elements.

• 盡量不要在局部視圖中使用復(fù)雜的渲染邏輯，或者需要執(zhí)行一些代碼片段才能獲取到視圖元素。這種情況考慮使用view component來替代局部視圖。

  Don't use a partial view where complex rendering logic or code execution is required to render the markup.If you need to execute code, use a view component instead of a partial view.

聲明局部視圖

局部視圖名通常以下劃線_開頭，下劃線主要用于易于辨識局部視圖文件。注意一點，在渲染局部視圖時，不會執(zhí)行_ViewStart.cshtml文件中的代碼。其余與普通視圖一樣。

??局部視圖中定義的section只對當前局部視圖可見

使用局部視圖

引用局部視圖文件而不帶擴展名cshtml時，在MVC框架中，會從以下路徑中加載局部視圖文件，優(yōu)先級從上而下依次降低：

/Areas/<Area-Name>/Views/<Controller-Name>

/Areas/<Area-Name>/Views/Shared

/Views/Shared

/Pages/Shared

當引用局部文件帶上擴展名時，局部視圖文件必須和引用方位于相同目錄下。

可使用以下方式引入局部視圖：

• Partial Tag Helper

<partial name="partial.cshtml" model="Model"/>
@* 局部視圖文件后綴可以省略，如： *@
<partial name="partial" />
@* 也可以使用局部視圖文件全名，如： *@
<partial name="~/Views/Shared/_PartialName.cshtml" />

• HTML Helper

  @await Html.PartialAsync("_PartialName")

也可以使用?RenderPartialAsync方法來渲染局部視圖，該方法直接將渲染結(jié)果寫入到response中，而不是返回?IHtmlContent，所以只能在Razor代碼塊中調(diào)用該方法：

@{
await Html.RenderPartialAsync("_PartialName");
}

相比于PartialAsync，RenderParatialAsync有著更好的性能。

View component，視圖組件和局部視圖類似，但它更強大。一個視圖組件包含兩部分：ViewComponent類和一個視圖。

視圖組件不使用模型綁定，視圖組件中所用的數(shù)據(jù)有調(diào)用者提供。視圖組件有以下特點：

• 渲染數(shù)據(jù)塊而非整個響應(yīng)

• 關(guān)注點分離、易于測試

• 可以有參數(shù)和業(yè)務(wù)邏輯

  MVC本身就提倡關(guān)注點分離，所以，視圖組件中應(yīng)盡可能只包含與渲染視圖相關(guān)的邏輯

• 通常在層中調(diào)用

自定義視圖組件

創(chuàng)建視圖組件類：

• 視圖組件繼承自ViewComponent或使用ViewComponentAttribute特性

• 自定義類約定以ViewComponent結(jié)尾（非強制）

public class FirstViewComponent : ViewComponent
{
// 方法名InvokeAsync是基于約定的，同步方法名為Invoke
public async Task<IViewComponentResult> InvokeAsync(string descript)
{
return View<string>(descript);
}
}

???視圖組件類中可以使用依賴注入。需注意：視圖組件不會參與到Controller的生命周期中，所以filter對它無效。

創(chuàng)建視圖文件：

視圖組件默認視圖名為：Default，簡單定義視圖內(nèi)容如下：

在運行時按照以下順序搜索視圖文件：

• /Views/{Controller Name}/Components/{View Component Name}/{View Name}

• /Views/Shared/Components/{View Component Name}/{View Name}

• /Pages/Shared/Components/{View Component Name}/{View Name}

??推薦使用Default作為視圖組件的視圖文件名，且視圖文件存放路徑為：Views/Shared/Components/{View Component Name}/{View Name}

可以使用如下兩種方式來調(diào)用視圖組件：

• Component.InvokeAsync

• Tag Helper

@addTagHelper *,Web

<div class="text-center">
@await Component.InvokeAsync("First", new { descript = "invoking view component" })
<br />
@* Tag Helper方式調(diào)用ViewComponent，需以vc:作為前綴 *@
<vc:first descript="tag helper">
</vc:first>
</div>

???注意，使用Tag Helper形式調(diào)用視圖組件時，組件名和組件的方法參數(shù)使用?kebab case方式，即，組件PriorityList有參數(shù)maxPriority，則調(diào)用方式如下：

<vc:priority-list max-priority="2">
</vc:priority-list>

除此之外，還可以在Controller中調(diào)用視圖組件：

public IActionResult InvokeVC()
{
// 注意，視圖組件名稱大小寫敏感
return ViewComponent("First", new { Descript = "controller"});
}

View component methods

抄錄一段微軟官網(wǎng)上對于View component methods的總結(jié)，人太懶，就不翻譯了?，留意加粗部分：

A view component defines its logic in an?InvokeAsync?method that returns a?Task<IViewComponentResult>?or in a synchronous?Invoke?method that returns an?IViewComponentResult. Parameters come directly from invocation of the view component, not from model binding.?A view component never directly handles a request. Typically, a view component initializes a model and passes it to a view by calling the?View?method. In summary, view component methods:

• Define an?InvokeAsync?method that returns a?Task<IViewComponentResult>?or a synchronous?Invokemethod that returns an?IViewComponentResult.

• Typically initializes a model and passes it to a view by calling the?ViewComponent?View?method.

• Parameters come from the calling method, not HTTP. There's no model binding.

• Are not reachable directly as an HTTP endpoint. They're invoked from your code (usually in a view). A view component never handles a request.

• Are overloaded on the signature rather than any details from the current HTTP request.

本文主要對ASP.NET Core中的視圖部分做了簡要概述，相比于文中的各種概念，我們應(yīng)該把注意力放到模塊化設(shè)計上。模塊化、抽象思維是程序員應(yīng)該掌握的兩種能力。他們可以讓我們寫出高內(nèi)聚、低耦合的代碼。

原文地址：https://www.cnblogs.com/Cwj-XFH/p/10885745.html

.NET社區(qū)新聞，深度好文，歡迎訪問公眾號文章匯總?http://www.csharpkit.com?

總結(jié)

以上是生活随笔為你收集整理的ASP.NET Core MVC 视图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。