快捷導(dǎo)航

asp.net core razor自定義taghelper的方法

更新時(shí)間：2019年09月18日 16:08:36 作者：馮輝

這篇文章主要介紹了asp.net core razor自定義taghelper的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

又一個(gè)新的名詞(taghelper),通過(guò)taghelper是可以操作html標(biāo)簽、條件輸出、更是自由添加內(nèi)外元素。當(dāng)然也內(nèi)置了挺多的asp-開(kāi)頭的taghelper。

下面文章中也簡(jiǎn)單的帶大家實(shí)現(xiàn)一個(gè)taghelper;

創(chuàng)建自定義html元素

創(chuàng)建一個(gè)類(lèi)ButtonTagHelper

tagName為標(biāo)簽名稱(chēng),下面創(chuàng)建一個(gè)button標(biāo)簽

using Microsoft.AspNetCore.Razor.TagHelpers;
namespace Ctrl.Core.Tag.Controls.Button
{
  [HtmlTargetElement("test-button")]
  public class ButtonTagHelper:TagHelper
  {
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
      output.TagName = "button";
      base.Process(context, output);
    }
  }
}

注冊(cè)taghelper

創(chuàng)建完后可沒(méi)法執(zhí)行使用哦,在.cshtml通過(guò)某個(gè)標(biāo)簽比如form標(biāo)簽輸入asp-,下面立刻就出現(xiàn)了一個(gè)列表 asp-.... ,這些是怎么做到的呢？因?yàn)樵赺ViewImports在我們創(chuàng)建項(xiàng)目工程時(shí),已經(jīng)提前引入了taghelper默認(rèn)引入的是微軟已經(jīng)為我們寫(xiě)好的taghelper類(lèi)庫(kù)Microsoft.AspNetCore.Mvc.TagHelpers;

我們自定義的話也需要按照這個(gè)方式引入自定義的taghelper,下面我自己創(chuàng)建了一個(gè)類(lèi)庫(kù)名字為"Ctrl.Core.Tag",我這個(gè)類(lèi)庫(kù)下面要存放所有的taghelper 我直接引入命名空間

@addTagHelper *,Ctrl.Core.Tag

如果想引入特定的taghelper如下

@addTagHelper 你的TagHelper , 命名空間

然后我們測(cè)試一下是否可用了,先生成一下項(xiàng)目,然后找個(gè)cshtml視圖,輸入剛才的前綴test會(huì)出來(lái)剛才定義的標(biāo)簽

添加上并運(yùn)行項(xiàng)目查看剛才創(chuàng)建的button標(biāo)簽是否存在

添加自定義屬性

上面需求是滿足不了我們?nèi)粘Ｐ枨蟮?下面我們?cè)俣x一個(gè)元素屬性

 output.Attributes.SetAttribute("class", "btn btn-primary");

然后再打開(kāi)頁(yè)面看效果就會(huì)看到class元素已經(jīng)給加上了.

using Microsoft.AspNetCore.Razor.TagHelpers;
namespace Ctrl.Core.Tag.Controls.Button
{
  [HtmlTargetElement("test-button")]
  public class ButtonTagHelper:TagHelper
  {
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
      output.TagName = "button";
      output.Attributes.SetAttribute("class", "btn btn-primary");
      base.Process(context, output);
    }
  }
}

通過(guò)vs感知匹配按鈕類(lèi)型

上面能滿足我們自定義標(biāo)簽了,但是可能使用起來(lái)有局限性,下面我給大家提供一個(gè)場(chǎng)景思路,后面大家可以自己進(jìn)行擴(kuò)展.

我創(chuàng)建一個(gè)枚舉類(lèi)為 CtrlButtonType

namespace Ctrl.Core.Tag.Controls.Button
{
  /// <summary>
  ///   按鈕類(lèi)型
  /// </summary>
  public enum CtrlButtonType
  {
    /// <summary>
    /// 默認(rèn)樣式
    /// </summary>
    Default,
    /// <summary>
    ///   首選項(xiàng)
    /// </summary>
    Primary,
    /// <summary>
    ///   成功
    /// </summary>
    Success,
    /// <summary>
    /// 一般信息
    /// </summary>
    Info,
    /// <summary>
    /// 警告
    /// </summary>
    Warning,
    /// <summary>
    /// 危險(xiǎn)
    /// </summary>
    Danger
  }
}

在buttonTagHelper類(lèi)中增加一個(gè)屬性

public CtrlButtonType ButtonType { get; set; }

到cshtml中添加剛才那個(gè)頁(yè)面的屬性,會(huì)發(fā)現(xiàn)有提示,以及可以看到剛才枚舉中定義的.這樣通過(guò)vs感知以及通過(guò)類(lèi)型指定我們剛才按鈕的類(lèi)型是不是很方面了.

namespace Ctrl.Core.Tag.Controls.Button
{
  [HtmlTargetElement("test-button")]
  public class ButtonTagHelper:TagHelper
  {
    public CtrlButtonType ButtonType { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
      output.TagName = "button";
      output.Attributes.SetAttribute("class", "btn btn-"+ButtonType.ToString().ToLower());
      base.Process(context, output);
    }
  }
}

<test-button button-type="Success"></test-button>

總結(jié)

以上所述是小編給大家介紹的asp.net core razor自定義taghelper,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: