MVC+EF Core 完整教程20--tag helper詳解

?

之前我們有一篇：“動(dòng)態(tài)生成多級(jí)菜單”，對(duì)使用Html Helper做了詳細(xì)講述，并且自定義了一個(gè)菜單的 Html Helper：
https://www.cnblogs.com/miro/p/5541086.html
<https://www.cnblogs.com/miro/p/5541086.html>

Html Helper是關(guān)聯(lián)前后端的一個(gè)核心組件，后面的ASP.NET Core 又推出了Tag Helper, ?作用和Html Helper很類似。

一般來(lái)說(shuō)，如果作用類似，后推出的都會(huì)做一些改進(jìn)，我們先來(lái)看下兩者的比較。

一、Html helper 和 Tag Helper 對(duì)比

先來(lái)一個(gè)比較例子：

下面用 Html Helper 創(chuàng)建一個(gè) lable

@Html.Label("FirstName", "First Name:", new {@class="caption"})

?

再來(lái)看實(shí)現(xiàn)同樣標(biāo)簽的 tag helper

<label class="caption" asp-for="FirstName"></label>

?

可以看到 Html Helper的語(yǔ)法是作為一個(gè)方法 @Html.XXX(各種參數(shù) , 其他參數(shù) …)

來(lái)調(diào)用的。

?

上面 Html Helper例子中的方法有三個(gè)參數(shù)，前面兩個(gè)是字符串，最后一個(gè)是匿名對(duì)象( 用作html的屬性，new {@class="caption"}
)

?

而 Tag Helper 和原生的html標(biāo)簽很像，只不過(guò)增加了一些特有的屬性(asp-開(kāi)頭的attribute)。

如果你用vs進(jìn)行編輯時(shí)會(huì)發(fā)現(xiàn)，Html Helper 沒(méi)有智能提示（像字符串，匿名對(duì)象這些沒(méi)辦法智能提示），Tag Helper則可以智能提示。

另外，很明顯我們可以看出，Tag Helper的寫(xiě)法更加干凈，可讀性和維護(hù)性都比 Html Helper好。

如果熟悉前端，即使不熟悉c#，也能很容易看懂進(jìn)行前后端協(xié)作開(kāi)發(fā)。

我們簡(jiǎn)單小結(jié)一下，主要有這兩點(diǎn)：

1、Tag Helper 有智能提示

2、Tag Helper可讀性好，易于分工合作

說(shuō)明：

Tag Helper不能完全取代Html Helper, 不是每個(gè)Html Helper都有對(duì)應(yīng)的Tag Helper

?

下面我們直接動(dòng)手來(lái)開(kāi)發(fā)一個(gè)自己的Tag Helper（方便起見(jiàn)，我們接著之前的VCDemo這個(gè)項(xiàng)目改）。

二、自定義一個(gè) Tag Helper

場(chǎng)景：

我們模擬稍微復(fù)雜一點(diǎn)的場(chǎng)景，不僅僅是簡(jiǎn)單的改變一下標(biāo)簽屬性，我們定義一個(gè)可以接收數(shù)據(jù)的Tag Helper。

我們定義一個(gè)類用來(lái)放置網(wǎng)站信息，包括版本號(hào)，版權(quán)聲明，以及聲明日期。

然后定義一個(gè)Tag Helper，接收這個(gè)類的數(shù)據(jù)。

?

前置準(zhǔn)備

我們先配置下Tag Helper的作用域，讓我們自定義的Tag Helper可以在 view中被識(shí)別到。

默認(rèn)的配置文件在 Views文件夾下的 _ViewImports.cshtml 中。

打開(kāi)它，可以看到已經(jīng)有

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

?

我們通過(guò) @addTagHelper 使得tag helper在view中被識(shí)別。

第一個(gè)參數(shù)是要使用的位置，第二個(gè)參數(shù)是程序集。

使用通配符*, 代表指定程序集（Microsoft.AspNetCore.Mvc.TagHelpers）下的所有的tag
helpers在當(dāng)前Views文件夾及子文件夾下均可用。

我們仿照它的樣子添加一行：

@addTagHelper *, VCDemo

讓我們自己的程序集VCDemo下的tag helpers也都可用。

?

?

?

步驟

1、先定義一個(gè)類 Models/WebsiteInfo.cs ，用來(lái)放置網(wǎng)站信息。
public class WebsiteInfo { public Version Version { get; set; } public int
CopyrightYear {get; set; } public string PoweredBy { get; set; } }
?

2、新建文件夾 TagHelpers 用來(lái)放置自定義的 tag helper

3、在文件夾中新建類 WebsiteInfoTagHelper，繼承于TagHelper，實(shí)現(xiàn)Process方法。
public class WebsiteInfoTagHelper : TagHelper { public WebsiteInfo Info { get;
set; } public override void Process(TagHelperContext context, TagHelperOutput
output) { output.TagName= "section"; output.Content.SetHtmlContent( $@"
<ul><li><strong>Version:</strong> {Info.Version}</li> <li><strong>Copyright
Year:</strong> {Info.CopyrightYear}</li> <li><strong>Powered by:</strong>
{Info.PoweredBy}</li></ul>"); output.TagMode = TagMode.StartTagAndEndTag; } }
?

美元符號(hào)$ 指定了后面可以使用占位符{}插入數(shù)據(jù), 如果不使用 $ 后面的{}就是普通的字符串。

使用時(shí)傳入了 WebsiteInfo對(duì)象， {Info.Version} 就會(huì)替代成相應(yīng)的值。

4、我們?cè)趆ome/index上添加如下內(nèi)容：
<h3>以下為版權(quán)聲明</h3> @{ WebsiteInfo websiteInfo = new WebsiteInfo { Version = new
Version(3, 0), CopyrightYear = 2019, PoweredBy = "編程小紙條" }; } <website-info
info="@websiteInfo" />
?

?

說(shuō)明：

最后一行代碼：

<website-info info="@websiteInfo" />

1、這個(gè)info屬性 不是單純的字符串，是一個(gè)類，非字符串的屬性可以把“@”省略，即寫(xiě)成這樣 <website-info info
="websiteInfo" /> 也是可以的。

2、有一個(gè)約定，我們之前定義的 tag helper是WebsiteInfoTagHelper：

2.1 我們?cè)谇岸耸褂脮r(shí)，首先去掉TagHelper后綴，變成 WebsiteInfo

2.2 然后將WebsiteInfo這種Pascal case的風(fēng)格，轉(zhuǎn)換成 Kebab case的風(fēng)格，website-info, 變成：<
website-info info="@websiteInfo" />

?

請(qǐng)參考 stackoverflow各種風(fēng)格說(shuō)明:

Pascal Case:?SomeSymbol

Camel Case:?someSymbol

Snake case:? some_symbol

Kebab case:? some-symbol


https://stackoverflow.com/questions/11273282/whats-the-name-for-hyphen-separated-case/12273101#12273101

<https://stackoverflow.com/questions/11273282/whats-the-name-for-hyphen-separated-case/12273101#12273101>

?

運(yùn)行結(jié)果：

?

?

?

三、另外一個(gè)小提示

VS編輯器對(duì)view中字體做了一些區(qū)別

1、單純的html標(biāo)簽(tag)是灰色字體，屬性(attributes)是紅色字體，屬性值(attribute values)是藍(lán)色字體。如下

?

?

2、tag helper相關(guān)的屬性是加粗紫色, 例如

?

?

3、C#代碼帶有灰色背景色，如下方框處

?

祝 學(xué)習(xí)進(jìn)步 ：）

?

P.S. 系列文章列表：https://www.cnblogs.com/miro/p/3777960.html
<https://www.cnblogs.com/miro/p/3777960.html>

?

?

• ? 上一篇：（三十七）c#Winform自定義控件-有標(biāo)題的面板
• ? 下一篇：程序員，30歲，“理所應(yīng)當(dāng)”就該中年危機(jī)了嗎？