asp.net core razor自定義taghelper的方法
又一個新的名詞(taghelper),通過taghelper是可以操作html標簽、條件輸出、更是自由添加內(nèi)外元素。當然也內(nèi)置了挺多的asp-開頭的taghelper。
下面文章中也簡單的帶大家實現(xiàn)一個taghelper;
創(chuàng)建自定義html元素
創(chuàng)建一個類ButtonTagHelper
tagName為標簽名稱,下面創(chuàng)建一個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
創(chuàng)建完后可沒法執(zhí)行使用哦,在.cshtml通過某個標簽比如form標簽輸入asp-,下面立刻就出現(xiàn)了一個列表 asp-.... ,這些是怎么做到的呢？因為在_ViewImports在我們創(chuàng)建項目工程時,已經(jīng)提前引入了taghelper默認引入的是微軟已經(jīng)為我們寫好的taghelper類庫Microsoft.AspNetCore.Mvc.TagHelpers;
我們自定義的話也需要按照這個方式引入自定義的taghelper,下面我自己創(chuàng)建了一個類庫名字為"Ctrl.Core.Tag",我這個類庫下面要存放所有的taghelper 我直接引入命名空間
@addTagHelper *,Ctrl.Core.Tag
如果想引入特定的taghelper如下
@addTagHelper 你的TagHelper , 命名空間
然后我們測試一下是否可用了,先生成一下項目,然后找個cshtml視圖,輸入剛才的前綴test會出來剛才定義的標簽
添加上并運行項目查看剛才創(chuàng)建的button標簽是否存在
添加自定義屬性
上面需求是滿足不了我們?nèi)粘Ｐ枨蟮?下面我們再定義一個元素屬性
output.Attributes.SetAttribute("class", "btn btn-primary");
然后再打開頁面看效果就會看到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);
}
}
}
通過vs感知匹配按鈕類型
上面能滿足我們自定義標簽了,但是可能使用起來有局限性,下面我給大家提供一個場景思路,后面大家可以自己進行擴展.
我創(chuàng)建一個枚舉類為 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中添加剛才那個頁面的屬性,會發(fā)現(xiàn)有提示,以及可以看到剛才枚舉中定義的.這樣通過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>
總結(jié)
以上所述是小編給大家介紹的asp.net core razor自定義taghelper,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了把某個asp.net 控件替換成自定義控件的方法,需要的朋友可以參考下2014-03-03
.NET 8可以使用可空引用類型來去掉空值警告,本文主要介紹了VS .Net8 去掉空值警告的方法步驟,具有一定的參考價值,感興趣的可以了解一下2024-05-05
這篇文章主要介紹了淺談asp.net Forms身份驗證詳解 ，這種方法可以輕松的保持用戶的登錄狀態(tài)（如果用戶想這樣），便捷的用戶授權(quán)配置，增強的安全性，有興趣的可以了解一下。2016-12-12
使用VS2022在ASP.NET?Core中構(gòu)建輕量級服務(wù)
本文詳細講解了使用VS2022在ASP.NET?Core中構(gòu)建輕量級服務(wù)的方法，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
.Net Core中使用ExceptionFilter過濾器的方法
這篇文章主要介紹了.Net Core中使用ExceptionFilter過濾器的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Linux上使用Docker部署ASP.NET?Core應(yīng)用程序
這篇文章介紹了使用Docker部署ASP.NET?Core應(yīng)用程序的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
本節(jié)中的主題描述如何在 ASP.NET Web 應(yīng)用程序中創(chuàng)建 Cookie。Cookie 是一些小的文本文件，服務(wù)器和瀏覽器在收到每個頁請求時交換它們，您還可以使用這些小文本文件來存儲幫助針對每個用戶自定義您的應(yīng)用程序的信息。2009-11-11
.NET?API?接口數(shù)據(jù)傳輸加密最佳實踐記錄
這篇文章主要介紹了.NET?API?接口數(shù)據(jù)傳輸加密最佳實踐記錄,我們在做?Api?接口時，相信一定會有接觸到要給傳輸?shù)恼埱?body?的內(nèi)容進行加密傳輸。其目的就是為了防止一些敏感的內(nèi)容直接被?UI?層查看或篡改，需要的朋友可以參考下2022-10-10
ASP.NET?Core?Web?API之Token驗證的實現(xiàn)
本文主要介紹了ASP.NET?Core?Web?API之Token驗證的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01![[譯]ASP.NET Core 2.0 網(wǎng)址重定向的方法](http://img.jbzj.com/images/xgimg/bcimg9.png)
[譯]ASP.NET Core 2.0 網(wǎng)址重定向的方法
本篇文章主要介紹了[譯]ASP.NET Core 2.0 網(wǎng)址重定向的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10