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

最新评论