ASP.NET Core - 關於Tag Helper值得了解的五點


如果您開發過ASP.NET Core Web應用程序,您應該已經熟悉了Tag Helper。ASP.NET Core應用程序依賴Tag Helper來呈現表單和表單字段是很常見的。所以,一個視圖通常包含許多Tag Helper以及標准的HTML標記。您可以通過多種方式使用Tag Helper來提高開發的效率。本文將討論其中的某些問題。

1. 使用Tag Helper智能感知

就像HTML元素和JavaScript代碼一樣,Visual Studio也可以為Tag Helper顯示智能感知。如果您使用Visual Studio 2017,您可能需要做一些工作才能獲得手智能感知。從工具菜單中選擇擴展和更新菜單選項。在結果對話框中查找Razor Language Services

點擊下載按鈕下載擴展程序,然后關閉Visual Studio,關閉IDE時,將安裝Razor Language Services。所以,請耐心等待一會兒。安裝完成后,您將看到如下所示的成功對話框:

現在,您可以在Razor視圖文件( *.cshtml )中獲取智能感知。例如,下圖顯示的是表單Tag Helper的智能感知。

2. 自定義Tag Helper字體和顏色

如果您的視圖中混合使用了許多Tag Helper和HTML標記,您可能希望突出顯示Tag Helper為不同字體和顏色。幸運的是,Visual Studio允許您這樣做。轉到工具 - > 選項,然后轉到環境節點下的字體和顏色。

您可以使用“HTML Razor Tag Helper元素”和“HTML Razor Tag Helper屬性”設置來自定義Tag Helper的外觀。下圖顯示的是自定義 form 標簽的樣式。

您可以看到Tag Helper的標簽以及_asp- * _屬性顯示不同的顏色和字體大小。

3. 禁用Tag Helper

有時您可能需要禁用元素的Tag Helper。例如,您可能希望使用<form>作為標准HTML標記,而不是作為Tag Helper。您可以禁用元素的Tag Helper,如下所示:

如您看到的 ! 字符已添加到<form>的開始和結束標簽。屬性Tag Helper(如 asp-actionasp-controller)將不適用於此<form>元素。

4. 添加Tag Helper前綴

如果您希望區分Tag Helper與普通的HTML標記(不僅僅是視覺區別),那么您可以使用標簽前綴。如果您使用ASP.NET Web服務器控件和Web用戶控件,那么您應該熟悉標簽前綴的想法。要指定標簽前綴,請使用 _  @tagHelperPrefix _ 指令,如下所示:

    @tagHelperPrefix taghelper:

上面的行對所有的Tag Helper分配了一個前綴taghelper:。您可以在 _ViewImports.cshtml _或單個視圖文件中寫入此行。一旦添加,您需要這樣寫Tag Helper標記:

您可以看到不能再使用<form>標簽,而是使用<taghelper:form>標簽。

5. 在視圖中添加或刪除Tag Helper

如果在Views文件夾中打開 _ViewImports.cshtml 文件,您將找到這一行代碼:

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

  @addTagHelper 用於使一個或多個Tag Helper可用於項目中的所有視圖文件。第一個參數*表示所有來自該程序集Microsoft.AspNetCore.Mvc.TagHelpers中的Tag Helper都將可以使用。您還可以指定特定的Tag Helper而不是*。請參閱以下示例:

    @addTagHelper Microsoft.AspNetCore.Mvc.TagHelpers.FormTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers

上面的代碼只添加了FormTagHelper到視圖。這樣,只有<form>將被視為Tag Helper,智能感知也只會作用於它。

假設您已使用_ViewImports.cshtml文件將所有內置的Tag Helper添加到項目中。您希望將它們提供給大多數視圖,除了某幾個視圖。如何禁用這些視圖的Tag Helper?使用   @removeTagHelper指令。以下代碼顯示了如何實現:

    @removeTagHelper Microsoft.AspNetCore.Mvc.TagHelpers.FormTagHelper, Microsoft.AspNetCore.Mvc.TagHelpers

上述代碼從特定視圖中刪除FormTagHelper(您需要將該代碼放置在該視圖的頂部)。

有關ASP.NET Core Tag Helper的詳細介紹請閱讀官方文檔:https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro

原文:《Five Things Worth Knowing About ASP.NET Core Tag Helpers》http://www.binaryintellect.net/articles/2678a2f2-3236-45a6-a0e5-e6340d9930d5.aspx
翻譯:Sweet Tang
本文地址:http://www.cnblogs.com/tdfblog/p/five-things-worth-knowing-about-asp-net-core-tag-helpers.html
歡迎轉載,請在明顯位置給出出處及鏈接。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM