温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何在asp.net core中taghelper

发布时间:2021-05-24 16:54:36 来源:亿速云 阅读:182 作者:Leah 栏目:开发技术

这篇文章给大家介绍如何在asp.net core中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 是什么

ASP.NET 是开源,跨平台,高性能,轻量级的 Web 应用构建框架,常用于通过 HTML、CSS、JavaScript 以及服务器脚本来构建网页和网站。

关于如何在asp.net core中taghelper就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI