當(dāng)前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

ASP.NET Core MVC 视图

發(fā)布時間：2023/12/4 asp.net 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 ASP.NET Core MVC 视图小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

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

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

指定布局文件

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

ASP.NET Core MVC搜索布局文件的方式與局部視圖一樣，下文中會詳細(xì)說明。默認(rèn)情況下，在布局文件中必須調(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í)行。

默認(rèn)情況下，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文件的作用域是當(dāng)前目錄及子目錄

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加上前綴標(biāo)識，示例如下：
@addTagHelper *,Web
@tagHelperPrefix th:

@* 不會被當(dāng)作Tag Helper處理 *@
<xfh content="haha">customer tag helper</xfh>
<th:xfh content="tagHelperPrefix"></th:xfh>

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

局部視圖不應(yīng)用來維護(hù)公共布局中的內(nèi)容，考慮使用_Layout.cshtml來維護(hù)公共布局
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只對當(dāng)前局部視圖可見

使用局部視圖

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

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

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

/Views/Shared

/Pages/Shared

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

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

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，視圖組件和局部視圖類似，但它更強(qiáng)大。一個視圖組件包含兩部分：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é)尾（非強(qiáng)制）

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

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

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

視圖組件默認(rèn)視圖名為：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)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： dotnet pack 打包文件版本号引
下一篇： ASP.NET Core 通过 Micr