Add classes to tag helpers html elements

Question

First time diving into tag helpers but i couldn't understand from tutorials how am i supposed to define the classes for each element?

    [HtmlTargetElement("card")]
public class CardTagHelper : TagHelper
{
    public string Title { get; set; }
    public string Icon { get; set; }
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {

        output.TagName = "CardTagHelper";
        output.TagMode = TagMode.StartTagAndEndTag;

        var sb = new StringBuilder();
        sb.AppendFormat($@"
                    <div class='card custom-card'>
                        <div class='card-header'>
                            <div class='card-title'>
                                <i class='{Icon}'></i>
                                {Title}
                            </div>
                        </div>
                        <div class='card-body'>

                        </div>
                        <div class='card-footer'>
                        </div>
                    </div>");

        output.PreContent.SetHtmlContent(sb.ToString());

        output.Attributes.SetAttribute("class", "card-body");
    }
}

none of these work, it still renders on page

EDIT

What i would like is that the content would be rendered as something like this

<card title="title" icon="icon">
 // content
</card>

I'm not sure if this is the way to do this or i have to create tag helpers for the card head body and footer

like

<card>
    <card-header>
    </card-header>
    <card-body>
    </card-body>
    <card-footer>
    </card-footer>
</card>

on view import i injected helper with

@addTagHelper *, CardTagHelper

serpent5 serpent5 · Accepted Answer · 2019-06-25T08:23:05

The problem you have is here:

@addTagHelper *, CardTagHelper

This directive attempts to register all tag-helpers found in a CardTagHelper assembly, which doesn't exist. Your tag-helper isn't being found and so isn't being run, leaving the HTML you've added to your .cshtml files completely untouched.

You need to use the name of the assembly that contains CardTagHelper:

@addTagHelper *, YourFullAssemblyName

Add classes to tag helpers html elements

1 Answers