How to create custom tag helpers for razor?

Question

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?

Breaux

See docs.asp.net/projects/mvc/en/latest/views/tag-helpers/… on how to create custom tag helpers. – Humes

Answer 1

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.

Electrolyse

Now I managed to make it work. I needed to add two things and this was one of them. And the other one was a reference to Microsoft.AspNet.Tooling.Razor assembly. So maybe you can add this one too to your answer to make it more complete for the future uses. – Breaux

@Yilmaz Nice one, I've added that to the answer too. Thanks. :) – Electrolyse

Answer 2

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);
        }
    }
}

Audreaaudres