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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • asp.net core新特性之TagHelper标签助手

    今天开始,我就来说说asp.net core的新特性,今天就说说TagHelper标签助手.虽然学习.net,最有帮助的就是microsoft的官方说明文档了,里面把一些使用说明都写的非常清楚,但奈何.net core放入文档微软还没来得及翻译,对于英文不好的人来说简直就是看的艰辛.所以今天就来学习学习这标签助手,和博客园大佬分享分享经验. 想看Microsoft官方文档和Git项目的可以直接点击以下传送门~~ asp.net core 官方文档 asp.net core github项目 说起

  • ASP.NET Core 2.0中Razor页面禁用防伪令牌验证

    在这篇短文中,我将向您介绍如何ASP.NET Core Razor页面中禁用防伪令牌验证. Razor页面是ASP.NET Core 2.0中增加的一个页面控制器框架,用于构建动态的.数据驱动的网站:支持跨平台开发,可以部署到Windows,Unix和Mac操作系统. 跨站点请求伪造(也称为XSRF或CSRF)是对Web托管应用程序的攻击,因为恶意网站可能会影响客户端浏览器和浏览器信任网站之间的交互.这种攻击是完全有可能的,因为Web浏览器会自动在每一个请求中发送某些身份验证令牌到请求网站.这种

  • ASP.NET Core Razor 页面路由详解

    在服务器端 Web 应用程序框架中,其中非常重要的设计是开发人员如何将URL与服务器上的资源进行匹配,以便正确的处理请求.最简单的方法是将 URL 映射到磁盘上的物理文件,在 Razor 页面框架中,ASP.NET团队就是这样实现的. 关于 Razor 页面框架如何将 URL 与文件相匹配,有一些规则您必须了解,以及如何根据需要自定义规则改变输出的结果.如果您将 Razor 页面与 Web Form 框架进行比较,您还需要了解取代的 Ur l参数以及在URL中传递数据的机制. 规则一,Razor

  • asp.net core标签助手的高级用法TagHelper+Form

    上一篇博客我讲解了TagHelper的基本用法和自定义标签的生成,那么我就趁热打铁,和大家分享一下TagHelper的高级用法~~,大家也可以在我的博客下随意留言. 对于初步接触asp.net core的骚年可以看看我对TagHelper的了解和看法: <asp.net core新特性(1):TagHelper> 之后,我也会继续撰写博文,继续分享asp.net core的一些新特性,比如DI,ViewComponent以及bower等asp.net mvc中没有的新东西. ok,咱们就开始吧

  • Visual Studio 2017下ASP.NET CORE的TagHelper智能提示解决办法

    之前在VS2017RC中就发现该问题,安装了依赖,但是前段一直点不出来asp-for,后来查了发行说明, 才知道在VS2017rc中暂时无法解决,所以一直等到VS2017正式版的发布,急冲冲的装好, 建了一个demo项目,还是无法出现TagHelper的智能提示. 不死心,我又去扒拉了一下VS2017的发行说明,找了一下已知问题: 发现有这一行: 然后我根据提示,进入到Github页面,果然找到了TagHelper为何不能使用的描述: 同样,页面给出来了解决办法,安装一个Razor服务的扩展:

  • 如何ASP.NET Core Razor中处理Ajax请求

    在ASP.NET Core Razor(以下简称Razor)刚出来的时候,看了一下官方的文档,一直没怎么用过. 今天闲来无事,准备用Rozor做个项目熟练下,结果写第一个页面就卡住了..折腾半天才搞好,下面给大家分享下解决方案.先来给大家简单介绍下Razor Razor Pages是ASP.NET Core的一项新功能,可以使编页面的编程方案更简单,更高效.Razor页面使用处理程序方法来处理传入的HTTP请求(GET / POST / PUT / Delete).这些类似于ASP.NET MV

  • 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

  • ASP.NET Core MVC自定义Tag Helpers用法介绍

    介绍 在之前的内容中,我们谈到了Tag Helpers,我们还谈到了 caching Tag Helpers和form Tag Helpers. 通过创建自定义Tag Helpers,我们可以扩展现有元素或创建我们自己的元素. Tag Helper是实现ITagHelper接口类的统称.MVC为我们提供了该接口的抽象类TagHelper,它位于 Microsoft.AspNetCore.Razor.Runtime 程序集中.因此,我们可以直接从TagHelper类继承,我们主要需要实现以下方法:

  • ASP.NET Core Razor页面用法介绍

    简介 随着ASP.NET Core 2 即将来临,最热门的新事物是Razor页面.在之前的一篇文章中,我们简要介绍了ASP.NET Core Razor 页面. Razor页面是ASP.NET Core的一个新功能,可以使基于页面的编程方式更容易,更高效. 大众的初步印象是对于那些只专注于页面的小型应用来说,Razor页面更容易.更快地取代MVC.然而,事实证明,它可能比这更强大.使用ASP.NET Core 2在创建新的应用程序时,Razor页面(空,Razor页面,Web API,MVC)是

  • 在ASP.NET Core 中发送邮件的实现方法(必看篇)

    前言 我们知道目前 .NET Core 还不支持 SMTP 协议,当我么在使用到发送邮件功能的时候,需要借助于一些第三方组件来达到目的,今天给大家介绍两款开源的邮件发送组件,它们分别是 MailKit 和 FluentEmail , 下面我对它们分别进行介绍. MailKit 在 ASP.NET Core 中,可以使用 MailKit 来发送邮件,它支持跨平台,并且支持 IMAP, POP3, SMTP 等协议. 你可以使用下面的方式安装: Install-Package MailKit 下面是

  • ASP.NET Core使用自定义验证属性控制访问权限详解

    前言 大家都知道在应用中,有时我们需要对访问的客户端进行有效性验证,只有提供有效凭证(AccessToken)的终端应用能访问我们的受控站点(如WebAPI站点),此时我们可以通过验证属性的方法来解决. 本文将详细介绍ASP.NET Core使用自定义验证属性控制访问权限的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下 一.public class Startup的配置: //启用跨域访问(不同端口也是跨域) services.AddCors(options

  • ASP.NET Core AutoWrapper 自定义响应输出实现

    前言 AutoWrapper是一个简单可自定义全局异常处理程序和ASP.NET Core API响应的包装.他使用ASP.NET Core middleware拦截传入的HTTP请求,并将最后的结果使用统一的格式来自动包装起来.目的主要是让我们更多的关注业务特定的代码要求,并让包装器自动处理HTTP响应.这可以在构建API时加快开发时间,同时为HTTP响应试试我们统一的标准. 安装 AutoWrapper.Core从NuGet或通过CLI下载并安装 PM> Install-Package Aut

  • 如何在ASP.Net Core中使用 IHostedService的方法

    在我们应用程序中常常会有一些执行后台任务和任务调度的需求,那如何在 ASP.Net Core 中实现呢? 可以利用 Azure WebJobs 或者其他一些第三方任务调度框架,如:Quartz 和 Hangfire. 在 ASP.Net Core 中,也可以将 后台任务 作为托管服务的模式,所谓的 托管服务 只需要实现框架中的 IHostedService 接口并囊括进你需要的业务逻辑作为后台任务,这篇文章将会讨论如何在 ASP.Net Core 中构建托管服务. 创建托管服务 要想创建托管服务

  • ASP.NET Core使用自定义日志中间件

    这个日志框架使用的是ASP.NET Core的NLog,用来记录每次请求信息和返回信息. 1.首先创建一个Web应用项目,我选择的是MVC模板: 2.使用NuGet添加Microsoft.Extensions.Logging和NLog.Extensions.Logging 3.修改Configure方法: public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFac

  • Hangfire在ASP.NET CORE中的简单实现方法

    hangfire是执行后台任务的利器,具体请看官网介绍:https://www.hangfire.io/ 新建一个asp.net core mvc 项目 引入nuget包 Hangfire.AspNetCore hangfire的任务需要数据库持久化,我们在Startup类中修改ConfigureServices 然后在Configure方法中启用hangfire中间件 现在我们运行一下项目,可以看到,数据库里自动生成了很多表,这些表就是用来持久化任务的 我们打开如下地址,可以看到hangfir

随机推荐