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

 更新時間:2019年09月18日 16:08:36   作者:馮輝   我要評論
這篇文章主要介紹了asp.net core razor自定義taghelper的方法,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

又一個新的名詞(taghelper),通過taghelper是可以操作html標簽、條件輸出、更是自由添加內外元素。當然也內置了挺多的asp-開頭的taghelper。

下面文章中也簡單的帶大家實現一個taghelper;

創建自定義html元素

創建一個類ButtonTagHelper

tagName為標簽名稱,下面創建一個button標簽

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);
    }
  }
}

注冊taghelper

創建完后可沒法執行使用哦,在.cshtml通過某個標簽比如form標簽輸入asp-,下面立刻就出現了一個列表 asp-.... ,這些是怎么做到的呢?因為在_ViewImports在我們創建項目工程時,已經提前引入了taghelper默認引入的是微軟已經為我們寫好的taghelper類庫Microsoft.AspNetCore.Mvc.TagHelpers;

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

@addTagHelper *,Ctrl.Core.Tag

如果想引入特定的taghelper如下

@addTagHelper 你的TagHelper , 命名空間

然后我們測試一下是否可用了,先生成一下項目,然后找個cshtml視圖,輸入剛才的前綴test會出來剛才定義的標簽

添加上并運行項目查看剛才創建的button標簽是否存在

添加自定義屬性

上面需求是滿足不了我們日常需求的,下面我們再定義一個元素屬性

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

然后再打開頁面看效果就會看到class元素已經給加上了.

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);
    }
  }
}

通過vs感知匹配按鈕類型

上面能滿足我們自定義標簽了,但是可能使用起來有局限性,下面我給大家提供一個場景思路,后面大家可以自己進行擴展.

我創建一個枚舉類為 CtrlButtonType

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

在buttonTagHelper類中增加一個屬性

public CtrlButtonType ButtonType { get; set; }

到cshtml中添加剛才那個頁面的屬性,會發現有提示,以及可以看到剛才枚舉中定義的.這樣通過vs感知以及通過類型指定我們剛才按鈕的類型是不是很方面了.

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>

總結

以上所述是小編給大家介紹的asp.net core razor自定義taghelper,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

相關文章

  • C#中遍歷各類數據集合的方法總結

    C#中遍歷各類數據集合的方法總結

    C#中遍歷各類數據集合的方法,這里自己做下總結:枚舉類型、遍歷ArrayList(Queue、Stack)、Winform窗體中的控件、HashTable哈希表等等,具體祥看下文
    2013-05-05
  • ASP.NET Core 數據保護(Data Protection)上篇

    ASP.NET Core 數據保護(Data Protection)上篇

    這篇文章主要為大家詳細介紹了ASP.NET Core 數據保護(Data Protection),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • asp.net 臨時數據保存實現代碼

    asp.net 臨時數據保存實現代碼

    在一個程序運行的時候往往我們會回到上一個頁面,或者我們會需要當時留在這個頁面的臨時數據,例如,我們用百度搜索“腳本”之后我們會看到很多那啥我就不再說了啊!然后我們返回本來頁面在文本框內會有“腳本”的字樣,我們一下代碼段就是實現這個功能
    2012-04-04
  • 使用Lucene.NET實現站內搜索

    使用Lucene.NET實現站內搜索

    提到Lucene,想必大家都有所耳聞,已經是數年前就出現的開源技術。很多站點都是利用它搭建自己網站的站內搜索。由于最近也在做數據檢索方面的東西,也學習了下Lucene.net的使用。
    2015-06-06
  • ASP.NET中GridView和Repeater重復數據如何合并

    ASP.NET中GridView和Repeater重復數據如何合并

    這篇文章主要介紹了ASP.NET中GridView和Repeater重復數據合并的方法,感興趣的小伙伴們可以參考一下
    2016-08-08
  • SignalR中豐富多彩的消息推送方式的實現代碼

    SignalR中豐富多彩的消息推送方式的實現代碼

    這篇文章主要介紹了SignalR中豐富多彩的消息推送方式的實現代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • asp.net sql 數據庫處理函數命令

    asp.net sql 數據庫處理函數命令

    asp.net sql 數據庫處理函數命令 ,需要的朋友可以參考下。
    2009-10-10
  • asp.net 不用組件的URL重寫(適用于較大型項目)

    asp.net 不用組件的URL重寫(適用于較大型項目)

    網上很多關于url重寫的教程都推薦下載某某某組件, 我個人不喜歡這樣,即使是M$的組件也一樣,因為我們干程序員的,越貼近真相越好。那么我也寫一個關于url重寫的文章,希望對和我一樣有個性的coder們有點幫助。
    2009-04-04
  • 使用ASP.NET.4.5.1+MVC5.0 搭建一個包含 Ninject框架 項目

    使用ASP.NET.4.5.1+MVC5.0 搭建一個包含 Ninject框架 項目

    這篇文章主要介紹了使用ASP.NET.4.5.1+MVC5.0 搭建一個包含 Ninject框架 項目的方法,需要的朋友可以參考下
    2015-01-01
  • asp.net UpdatePanel的簡單用法

    asp.net UpdatePanel的簡單用法

    局部更新是ajax技術的最基本,也是最重要的用法,今天大概把asp.net ajax中的局部更新控件 updatepanel的用法記錄下,大家可以共同探討
    2008-11-11

最新評論

pc蛋蛋计划下载