ASP.NET Core 3.0 : 二十五. TagHelper

来源:https://www.cnblogs.com/FlyLolo/archive/2019/09/25/ASPNETCore_25.html
-Advertisement-
Play Games

什麼是TagHelper？這是ASP.NET Core 中新出現的一個名詞，它的作用是使伺服器端代碼可以在Razor 文件中參與創建和呈現HTML 元素。(ASP.NET Core 系列目錄) 一、概述 上面的解釋有點拗口？那麼換一個名詞，HtmlHelper大家都知道吧，在ASP.NET Core ...


　　什麼是TagHelper？這是ASP.NET Core 中新出現的一個名詞，它的作用是使伺服器端代碼可以在Razor 文件中參與創建和呈現HTML 元素。(ASP.NET Core 系列目錄)

一、概述

　　上面的解釋有點拗口？那麼換一個名詞，HtmlHelper大家都知道吧，在ASP.NET Core中，TagHelper類似HtmlHelper，但可以說是青出於藍而勝於藍。那麼TagHelper的作用也就大概明白了吧。

首先通過一個例子看一下TagHelper是怎麼使用的，看看它和HtmlHelper有什麼區別。新建一個Book類：

    public class Book
    {
        [Display(Name = "編號")]
        public string Code { get; set; }
[Display(Name = "名稱")]
        public string Name { get; set; }
    }

新建對應的Controller和Action：

    public class BookController : Controller
    {
        // GET: /<controller>/
        public IActionResult Index()
        {
            return View(new Book() { Code = "001", Name = "ASP" });
        }
    }

最後就是View了：

@model Book
@{
    Layout = null;
}
@Html.LabelFor(m => m.Name)
@Html.EditorFor(m => m.Name)
<br />
<label asp-for="Name"></label>
<input asp-for="Name" />

這裡分別通過HtmlHelper和TagHelper兩種方式實現了一個文本和輸入框的顯示。查看網頁源代碼，可以看到二者生成的HTML如下:

<label for="Name">Name</label>
<input class="text-box single-line" id="Name" name="Name" type="text" value="ASP" />
<br/>
<label for="Name">Name</label>
<input type="text" id="Name" name="Name" value="ASP" />

目前看起來二者差不多，從工作量上來看也是區別不大。現在功能實現了，需要做一些樣式處理。簡單舉個例子，現在希望Book的編號（Code）對應的label的顏色設置為紅色，定義了一個css如下：

<style type="text/css">
    .codeColor {
        color:red;
    }
</style>

然後準備把這個樣式應用到label上，這時如果是HtmlHelper就很有可能會被問：“class寫在哪”，估計好多人都被問過。然後我們告訴他可以這樣寫：

@Html.LabelFor(m=>m.Name,new {@class="codeColor"})

前端工程師添加後達到了想要的效果，但同時表示記不住這個寫法，下次可能還會問。

如果是TagHelper就方便了，告訴他可以像平時給Html的標簽添加class一樣操作即可，也就是：

<label asp-for="Name" class="codeColor"></label>

前端工程師表示這種寫法“真是太友好了”。同樣對於Form及驗證，比較一下兩種寫法的不同，HtmlHelper版：

@using (Html.BeginForm("Index", "Home", FormMethod.Post)){    
@Html.LabelFor(m => m.Code)
    @Html.EditorFor(m => m.Code)    @Html.ValidationMessageFor(m => m.Code)    <input type="submit" value="提交" />
}

TagHelper版：

<form asp-action="Index" asp-controller="Home" method="post">
    <label asp-for="Code"></label>
    <input asp-for="Code" />
    <span asp-validation-for="Code"></span>
    <input type="submit" value="提交" />
</form>

二、自定義TagHelper

現在有這樣的需求，用於顯示Book的編號的label不止要添加名為codeColor的css樣式，還要給書的編號自動添加一個首碼，例如“BJ”。

對於這樣的需求，希望可以通過一個簡單的標記，然後由TagHelper自動實現。例如：

<label show-type="bookCode">1001</label>

自定義了一個屬性“show-type”，用於標識這個label的顯示類別，“1001”為假定的圖書編號。通過這樣的設置方式，將來如果需求有變化，需要對編號的顯示做更多的修飾，只需修改對應的TagHelper即可，而頁面部分不需要做任何調整。

系統提供了方便的自定義TagHelper的方式，就是繼承系統提供的TagHelper類，並重寫它的Process/ProcessAsync方法，例如下麵的例子：

    public class LabelTagHelper : TagHelper
    {
        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            if (output.Attributes.TryGetAttribute("show-type", out TagHelperAttribute showTypeAttribute))
            {
                if (showTypeAttribute.Value.ToString().Equals("bookCode"))
                {
                    output.Attributes.SetAttribute("class", "codeColor");

                    string content = output.Content.IsModified ? output.Content.GetContent() : (await output.GetChildContentAsync()).GetContent(); ;
                    output.Content.SetContent("BJ" + content);
                }
            }
        }
    }

首先判斷label是否被設置了show-type="bookCode"，然後獲取當前label的Content內容，將其添加首碼“BJ”後作為此label的Content的新內容。註意一下Content的獲取方式，如果它沒有被修改，憑感覺直接通過output.Content.GetContent()獲取到的內容是空的。

訪問index頁面，可以看到改標簽已被處理，如下圖：

備註：a.關於獲取show-type的值，還可以有其他方式，下文會講到。

b.從規範化命名的角度，建議將自定義的TagHelper其命名為XXXagHelper這樣的格式。

三、TagHelper的註冊

TagHelper自定義之後需要將其註冊一下，否則它是不會生效的。打開_ViewImports.cshtml，預設為：

@using TagHelperDemo
@using TagHelperDemo.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

在最下麵添加一條

@addTagHelper *, TagHelperDemo

最後添加的這一句話是什麼意思呢？也就是將程式集TagHelperDemo（即第二個參數）中的所有TagHelper（第一個參數為“*”，即所有）全部啟用。假如還定義了一個PasswordTagHelper，但只想只添加LabelTagHelper，可以這樣寫：

@addTagHelper TagHelperDemo.TagHelpers. LabelTagHelper, TagHelperDemo

如果想添加所有自定義的TagHelper，但要去除LabelTagHelper呢？

那麼可以先添加所有，再去除這個LabelTagHelper。

@addTagHelper *, TagHelperDemo
@removeTagHelper TagHelperDemo.TagHelpers. LabelTagHelper, TagHelperDemo

四、TagHelper的作用範圍

在項目中，可能不止使用label標簽來顯示Book的Code，還有可能會是p、span等類型的標簽，現在的需求是，無論是上述哪一種標簽，都要實現添加css和首碼的功能。

現在將index.cshtml中新增一個p標簽如下：

<p show-type="bookCode">1002</p>

訪問這個頁面發現1002未被處理。這是因為我們定義的TagHelper名為LabelTagHelper，在預設的情況下只會處理label標簽。當然也可以做特殊設置，例如下麵代碼的寫法：

    [HtmlTargetElement("p")]
    public class LabelTagHelper : TagHelper
    {
      //代碼省略
    }

通過“[HtmlTargetElement("p")]”指定本TagHelper只能被使用於p標簽。再次訪問此頁面，發現p標簽被處理了，而label未被處理。這說明這樣的顯式指定的優先順序要高於預設的名稱匹配。除了設置指定標簽，還可以有一些其他的輔助設置：

[HtmlTargetElement("p", Attributes = "show-type", ParentTag = "div")]
public class LabelTagHelper : TagHelper

可以這樣寫，會匹配p標簽，要求該標簽擁有show-type屬性，並且父標簽為div。這幾個條件是“and”的關係。如果還想匹配label標簽，可以添加對label的設置，例如下麵代碼這樣：

[HtmlTargetElement("p", Attributes = "show-type", ParentTag = "div")]
[HtmlTargetElement("label", Attributes = "show-type", ParentTag = "div")]
public class LabelTagHelper : TagHelper

這兩個HtmlTargetElement的關係是“or”。通過這樣的設置，可以極大的縮小目標標簽的範圍。

但是這樣設置之後，這個TagHelper的名字再叫LabelTagHelper就不合適了，例如可以改為BookCodeTagHelper，最終代碼如下：

[HtmlTargetElement("p", Attributes = "show-type", ParentTag = "div")]
[HtmlTargetElement("label", Attributes = "show-type", ParentTag = "div")]
public class BookCodeTagHelper : TagHelper
{
    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        if (output.Attributes.TryGetAttribute("show-type", out TagHelperAttribute showTypeAttribute))
        {
            if (showTypeAttribute.Value.ToString().Equals("bookCode"))
            {
                output.Attributes.SetAttribute("class", "codeColor");

                string content = output.Content.IsModified ? output.Content.GetContent() :
                                    (await output.GetChildContentAsync()).GetContent(); ;
                output.Content.SetContent("BJ" + content);
            }
        }
    }
}

如果想使個別Html標簽屏蔽TagHelper的作用，可以使用“!”。例如下麵兩個標簽：

<!label show-type="bookCode">1001</label>

五、自定義標簽

上一節最終形成了一個名為BookCodeTagHelper的TagHelper，我們知道LabelTagHelper是可以按名稱預設匹配label標簽的，那麼是否可以自定義一個BookCode標簽呢？在index.cshtml中添加這樣的代碼：

<BookCode>1003</BookCode>

 

由於自定義bookcode標簽的目的就是專門顯示Book的Code，所以也不必添加show-type屬性了。然後修改BookCodeTagHelper，修改後的代碼如下：

public class BookCodeTagHelper : TagHelper
{
    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        output.Attributes.SetAttribute("class", "codeColor");

        string content = output.Content.IsModified ? output.Content.GetContent() :
                            (await output.GetChildContentAsync()).GetContent(); ;
        output.Content.SetContent("BJ" + content);
    }
}

 

去掉了兩個HtmlTargetElement設置並取消了對show-type的判斷，訪問index頁面查看新建的bookcode標簽是否會被處理，結果是沒有被處理。這是為什麼呢？

這是由於TagHelper會將採用Pascal 大小寫格式的類和屬性名將轉換為各自相應的短橫線格式。即“BookCode”對應“book-code”，獲取標簽的屬性值，同樣遵循這樣的規則。所以將標簽改為如下寫法即可：

<book-code>1003</book-code>

再次運行測試，發現這個新標簽被成功處理。查看網頁源代碼，被處理後的Html代碼是這樣的：

<book-code class="codeColor">TJ1003</book-code>

如果想將其改變為label，可以在BookCodeTagHelper中通過指定TagName實現：

public class BookCodeTagHelper : TagHelper
{
    public Book Book { get; set; }
    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "label";
        output.Attributes.SetAttribute("class", "codeColor");

        string content = output.Content.IsModified ? output.Content.GetContent() :
                            (await output.GetChildContentAsync()).GetContent(); ;
        output.Content.SetContent(Book.Prefix + content);
    }
}

六、TagHelper與頁面之間的數據傳遞

假如現在的新需求是圖書編碼的首碼不再固定為“BJ”了，需要在標簽中定義，例如這樣：

<book-code prefix="SH">1003</book-code>

需要獲取prefix的值，在上面的例子中採用的是TryGetAttribute方法，其實還有簡單的方式，修改BookCodeTagHelper，代碼如下：

   public class BookCodeTagHelper : TagHelper
    {
        public string Prefix { get; set; }
        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            output.Attributes.SetAttribute("class", "codeColor");

            string content = output.Content.IsModified ? output.Content.GetContent() :
                                (await output.GetChildContentAsync()).GetContent(); ;
            output.Content.SetContent(Prefix + content);
        }
    }

標簽中的prefix的值會自動賦值給BookCodeTagHelper.Prefix，是不是更方便了。那麼如果是Model中的值呢？假如Book類有一個屬性“public string Prefix { get; set; } ”，這和傳入一個字元串沒什麼區別，那麼可以這樣寫：

<book-code prefix="@Model.Prefix">1003</book-code>

這種傳值方式不止是支持字元串，將Model整體傳入也是支持的，將標簽修改如下：

<book-code book="@Model">1003</book-code>

修改BookCodeTagHelper代碼：

    public class BookCodeTagHelper : TagHelper
    {
        public Book Book { get; set; }
        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            output.Attributes.SetAttribute("class", "codeColor");

            string content = output.Content.IsModified ? output.Content.GetContent() :
                                (await output.GetChildContentAsync()).GetContent(); ;
            output.Content.SetContent(Book.Prefix + content);
        }
    }

七、取消標簽輸出

前面的幾個例子都是對滿足條件的標簽的修改，TagHelper也可以取消對應標簽的輸出，例如存在這樣一個標簽：

<div simple-type="Simple1"></div>

如果不想讓它出現在生成的Html中，可以這樣處理：

[HtmlTargetElement("div",Attributes = "simple-type")]
public class Simple1TagHelpers : TagHelper
{
    public string SimpleType { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        if (SimpleType.Equals("Simple1"))  //可以是其他一些判斷規則
        {
            output.SuppressOutput();
        }
    }
}

八、TagBuilder

在TagHelper中，可以用TagBuilder來輔助生成標簽，例如存在如下兩個div：

<div simple-type="Simple2"></div>
<div simple-type="Simple3"></div>

想在div中添加Html元素可以這樣寫：

[HtmlTargetElement("div",Attributes = "simple-type")]
public class Simple1TagHelpers : TagHelper
{
    public string SimpleType { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        if (SimpleType.Equals("Simple2"))
        {
            output.Content.SetHtmlContent("<p>Simple2</p>");
        }
        else if (SimpleType.Equals("Simple3"))
        {
            var p = new TagBuilder("p");
            p.InnerHtml.Append("Simple3");
            output.Content.SetHtmlContent(p);
        }
    }
}

通過TagBuilder生成了一個新的p標簽，並將它插入到div中。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Winform中實現根據配置文件重新載入ZedGraph屬性的實現思路
    場景 Winforn中設置ZedGraph曲線圖的屬性、坐標軸屬性、刻度屬性： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100112573 初次載入ZedGraph後，可以進行一些曲線圖屬性的設置，使曲線圖重新載入。 思路： ...
  • Winform中實現設置ZedGraph的GraphPane的大小匹配ZedGraphControl
    場景 Winforn中設置ZedGraph曲線圖的屬性、坐標軸屬性、刻度屬性： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100112573 初次載入ZedGraphControl時可以通過其屬性設置其Size大小，然後實現一 ...
  • （七十二）c#Winform自定義控制項-雷達圖
    前提 入行已經7,8年了，一直想做一套漂亮點的自定義控制項，於是就有了本系列文章。 GitHub：https://github.com/kwwwvagaa/NetWinformControl 碼雲：https://gitee.com/kwwwvagaa/net_winform_custom_contr ...
  • Winform中對xml文件進行保存時空白節點自動換行問題的解決
    場景 Winform中自定義xml配置文件後對節點進行讀取與寫入： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100532137 在上面實現對xml配置文件進行節點的讀取和寫入時，發現一個問題， 就是節點的內容為空相應的xml ...
  • layui + 三層架構 + ajax 導出Excel功能
    直接上效果圖和源碼： 1.先全選數據，然後點擊導出 2.前端ui使用取值 不懂使用Layui的可以去官網有詳細文檔連接：https://www.layui.com 3.這是後臺控制器必須要引入的文件，可以在vs工具->NuGet包管理->程式包管理設置 （裡面搜索） 4.這是後臺代碼，事件，從dal ...
  • Jenkins 結合 Docker 為 .NET Core 項目實現低配版的 CI&CD
    隨著項目的不斷增多，最開始單體項目手動執行 命令，手動發佈項目就不再適用了。一兩個項目可能還吃得消，10 多個項目每天讓你構建一次還是夠嗆。即便你的項目少，每次花費在發佈上面的時間累計起來都夠你改幾個 BUG 了。 所以我們需要自動化這個流程，讓項目的發佈和測試不再這麼繁瑣。在這裡我使用了 Jenk ...
  • 前後端交互
    一、手寫 1.如何在JavaScript訪問C#函數? 2.如何在JavaScript訪問C#變數? 3.如何在C#中訪問JavaScript的已有變數? 4.如何在C#中訪問JavaScript函數?ep:var a = "<%=ss()%>";//JavaScript中調用C#後臺的函數,ss是 ...
  • ASP.NET Core 3.0 原生DI拓展實現IocManager
    昨天 .NET Core 3.0 正式發佈，創建一個項目運行後發現：原來使用的Autofac在ConfigureServices返回IServiceProvider的這種寫法已經不再支持。 當然Autofac官方也給出了示例。.NET Core 本身內置DI，我決定不再使用Autofac，就使用原生 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類