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

時間 2020-07-03

標籤 mvc+ef mvc core 完整教程 tag helper 詳解简体版

原文原文鏈接

以前咱們有一篇：「動態生成多級菜單」，對使用Html Helper作了詳細講述，而且自定義了一個菜單的 Html Helper： https://www.cnblogs.com/miro/p/5541086.htmlhtml

Html Helper是關聯先後端的一個核心組件，後面的ASP.NET Core 又推出了Tag Helper, 做用和Html Helper很相似。前端

通常來講，若是做用相似，後推出的都會作一些改進，咱們先來看下二者的比較。web

1、Html helper 和 Tag Helper 對比

先來一個比較例子：編程

下面用 Html Helper 建立一個 lablec#

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

再來看實現一樣標籤的 tag helper編輯器

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

能夠看到 Html Helper的語法是做爲一個方法 @Html.XXX(各類參數 , 其餘參數 …)學習

來調用的。字體

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

而 Tag Helper 和原生的html標籤很像，只不過增長了一些特有的屬性(asp-開頭的attribute)。

若是你用vs進行編輯時會發現，Html Helper 沒有智能提示（像字符串，匿名對象這些沒辦法智能提示），Tag Helper則能夠智能提示。

另外，很明顯咱們能夠看出，Tag Helper的寫法更加乾淨，可讀性和維護性都比 Html Helper好。

若是熟悉前端，即便不熟悉c#，也能很容易看懂進行先後端協做開發。

咱們簡單小結一下，主要有這兩點：

一、Tag Helper 有智能提示

二、Tag Helper可讀性好，易於分工合做

說明：

Tag Helper不能徹底取代Html Helper, 不是每一個Html Helper都有對應的Tag Helper

下面咱們直接動手來開發一個本身的Tag Helper（方便起見，咱們接着以前的VCDemo這個項目改）。

2、自定義一個 Tag Helper

場景：

咱們模擬稍微複雜一點的場景，不只僅是簡單的改變一下標籤屬性，咱們定義一個能夠接收數據的Tag Helper。

而後定義一個Tag Helper，接收這個類的數據。

前置準備

咱們先配置下Tag Helper的做用域，讓咱們自定義的Tag Helper能夠在 view中被識別到。

默認的配置文件在 Views文件夾下的 _ViewImports.cshtml 中。

打開它，能夠看到已經有

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

咱們經過 @addTagHelper 使得tag helper在view中被識別。

第一個參數是要使用的位置，第二個參數是程序集。

使用通配符*, 表明指定程序集（Microsoft.AspNetCore.Mvc.TagHelpers）下的全部的tag helpers在當前Views文件夾及子文件夾下都可用。

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

@addTagHelper *, VCDemo

讓咱們本身的程序集VCDemo下的tag helpers也均可用。

步驟

一、先定義一個類 Models/WebsiteInfo.cs ，用來放置網站信息。

    public class WebsiteInfo

    {

        public Version Version { get; set; }

        public int CopyrightYear { get; set; }

        public string PoweredBy { get; set; }

    }

二、新建文件夾 TagHelpers 用來放置自定義的 tag helper

三、在文件夾中新建類 WebsiteInfoTagHelper，繼承於TagHelper，實現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;

        }

    }

美圓符號$ 指定了後面可使用佔位符{}插入數據, 若是不使用 $ 後面的{}就是普通的字符串。

使用時傳入了 WebsiteInfo對象， {Info.Version} 就會替代成相應的值。

四、咱們在home/index上添加以下內容：

<h3>如下爲版權聲明</h3>

@{ WebsiteInfo websiteInfo = new WebsiteInfo

    {

        Version = new Version(3, 0),

        CopyrightYear = 2019,

        PoweredBy = "編程小紙條"

    };

}

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