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

 更新时间:2020-01-15 16:00:26   作者:佚名   我要评论(0)

又一个新的名词(taghelper),通过taghelper是可以操作html标签、条件输出、更是自由添加内外元素。当然也内置了挺多的asp-开头的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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

  • ASP.NET Core 2.0中Razor页面禁用防伪令牌验证
  • 如何ASP.NET Core Razor中处理Ajax请求
  • ASP.NET Core Razor 页面路由详解
  • asp.net core标签助手的高级用法TagHelper+Form
  • asp.net core新特性之TagHelper标签助手
  • Visual Studio 2017下ASP.NET CORE的TagHelper智能提示解决办法

相关文章

  • asp.net core razor自定义taghelper的方法

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

    又一个新的名词(taghelper),通过taghelper是可以操作html标签、条件输出、更是自由添加内外元素。当然也内置了挺多的asp-开头的taghelper。 下面文章中也简单的带大
    2020-01-15
  • NET Core 3.0 AutoFac内置DI替换的新姿势分享

    NET Core 3.0 AutoFac内置DI替换的新姿势分享

    .NET Core 3.0 和 以往版本不同,替换AutoFac服务的方式有了一定的变化,在尝试着升级项目的时候出现了一些问题。 原来在NET Core 2.1时候,AutoFac返回一个 IServi
    2020-01-15
  • .Net中MoongoDB的简单调用图文教程

    .Net中MoongoDB的简单调用图文教程

    前言 本文主要给大家介绍了关于.Net中MoongoDB调用的方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下: 1、安装.Net 驱动:Install
    2020-01-15
  • VS2019下opencv4.1.2配置图文教程(永久配置)

    VS2019下opencv4.1.2配置图文教程(永久配置)

    关于VS2019的安装可参考:VS2019以及MFC的安装详细教程 一、使用VS2019创建控制台工程(举例,其他同理),并打开视图中的属性管理器,如图。 二、在属性管理器下,
    2020-01-15
  • ASP.NET Core 过滤器中使用依赖注入知识点总结

    ASP.NET Core 过滤器中使用依赖注入知识点总结

    如何给过滤器ActionFilterAttribute也用上构造函数注入呢? 一般自定义的过滤器直接用特性方式标识就能使用 [ContentFilter] 因为构造函数在使用的时候要求传参,
    2020-01-15
  • .Net Core中ObjectPool的使用与源码解析

    .Net Core中ObjectPool的使用与源码解析

    一、对象池   运用对象池化技术可以显著地提升性能,尤其是当对象的初始化过程代价较大或者频率较高。下面是ObjectPool源码中涉及的几个类。当你看过.Net Core
    2020-01-15
  • asp.net实现存储和读取数据库图片

    asp.net实现存储和读取数据库图片

    本文实例为大家分享了asp.net存储和读取数据库图片的具体代码,供大家参考,具体内容如下 1. 创建asp.net web窗体项目 代码如下: <body> <form id="form1" run
    2020-01-15
  • asp.net core 3.0中使用swagger的方法与问题

    asp.net core 3.0中使用swagger的方法与问题

    Intro# 上次更新了 asp.net core 3.0 简单的记录了一下 swagger 的使用,那个项目的 api 比较简单,都是匿名接口不涉及到认证以及 api 版本控制,最近把另外一个
    2020-01-15
  • PHP框架实现WebSocket在线聊天通讯系统

    PHP框架实现WebSocket在线聊天通讯系统

    ThinkPHP使用Swoole需要安装 think-swoole Composer包,前提系统已经安装好了Swoole PECL 拓展 tp5的项目根目录下执行composer命令安装think-swoole: composer req
    2020-01-15
  • DataGridView右键菜单自定义显示及隐藏列功能

    DataGridView右键菜单自定义显示及隐藏列功能

    WinForm程序中表单的列可自定义显示及隐藏,是一种常见的功能,对于用户体验来说是非常好的。笔者经过一段时间的摸索,终于实现了自己想要的功能及效果,现记录一下
    2020-01-15

最新评论