Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create custom tag helpers for razor?

I'm trying to create a custom tag helper in MVC 6 but can't make it work.

Here is my demo tag helper class defined in the web app project.

namespace Microsoft.AspNet.Mvc.TagHelpers
{
    [TargetElement("demo", Attributes = CustomAttributeName)]
    public class DemoTagHelper : TagHelper
    {
        private const string CustomAttributeName = "asp-custom";

        [HtmlAttributeName(CustomAttributeName)]
        public string Custom { get; set; }

        public string Value { get; set; }


        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "div";
            output.Attributes["foo"] = "bar";
        }
    }
}

This is how I use it in my views:

<demo asp-custom="hello world!">
    Please work this time :)
</demo>

I tried many things. Removed TargetElement attribute or changed the namespace. Nothing changes... The result is still same.

By the way my Microsoft.AspNet.Mvc.TagHelpers version is 6.0.0-beta4.

Maybe I have to register my tag helper somewhere? I looked into MVC source codes and they haven't referenced their own tag helpers anywhere. So I think there is no registration needed.

Where is the problem here?

like image 985
Yves Avatar asked May 20 '15 11:05

Yves


People also ask

How do I make my own tag helper?

To create custom tag helper, the first step is to create a class that inherits from "TagHelper" class. This class has a virtual method to generate HTML tags. It contains both synchronous (Process) and asynchronous (ProcessAsync) implementation of the virtual method.

What is the difference between HTML helpers and tag helpers?

Tag Helpers are attached to HTML elements inside your Razor views and can help you write markup that is both cleaner and easier to read than the traditional HTML Helpers. HTML Helpers, on the other hand, are invoked as methods that are mixed with HTML inside your Razor views.

What are tag helpers in C#?

Tag Helpers are authored in C#, and they target HTML elements based on element name, attribute name, or parent tag. For example, the built-in LabelTagHelper can target the HTML <label> element when the LabelTagHelper attributes are applied.

What is custom tag helper in ASP.NET Core?

Asp.net core tutorial: Custom tag helper in asp.net core is used to create your own logic that you can use on your cshtml (view) file. Custom tag helpers in asp.net core are inherited from TagHelper class that provide couple of methods to work with.


2 Answers

You can enable the TagHelper processing for the custom tags by adding an addTagHelper directive to the _ViewImports.cshtml file found in the Views directory:

@addTagHelper "*, YourMvcAssembly"

Update

@yilmaz also needed to add a reference to Microsoft.AspNet.Tooling.Razor as detailed below in the comments.

like image 80
hutchonoid Avatar answered Sep 27 '22 21:09

hutchonoid


This is what I have for a custom tag helper currently and it works. I changed it to target a demo element. Try it out:

namespace TestingTagHelpers.TagHelpers
{
    using Microsoft.AspNet.Razor.Runtime.TagHelpers;
    using System;

    /// <summary>
    /// <see cref="ITagHelper"/> implementation targeting &lt;demo&gt; elements.
    /// </summary>
    //[TargetElement("demo")]
    public class DemoTagHelper : TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            var childContent = context.GetChildContentAsync().Result;
            string demoContent = childContent.GetContent();
            string demo = context.AllAttributes["asp-custom"].ToString();

            output.TagName = "div";
            output.Attributes.Clear();
            output.Attributes["data-custom"] = demo;
            output.Content.SetContent(demoContent);
        }
    }
}
like image 21
Konstantin Dinev Avatar answered Sep 27 '22 21:09

Konstantin Dinev