Custom Tag helper debugging

Question

I'm trying to test a new tag helper that I'm trying to create. I've stumbled into a shortcoming of the new .net core validation and cannot change the class post validation. So if I wanted to give my errors a red background, the span is always there and won't change. So, I've decided to make my own tag helper. the problem is I can't seem to get it to work or trigger. I can't even get it to hit a break point. Here is what I have for a tag helper so far.

namespace MusicianProject.TagHelpers
{
    // You may need to install the Microsoft.AspNetCore.Razor.Runtime package into your project
    [HtmlTargetElement("invalid-class",  Attributes = "validation-class")]
    public class ValidateClassTagHelper : TagHelper
    {
        public ValidateClassTagHelper(IHtmlGenerator generator) 
        {

        }
        public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {


            return base.ProcessAsync(context, output);
        }


        public override void Process(TagHelperContext context, TagHelperOutput output)
        {

            output.Attributes.Add("class", "test");
            var attr = context.AllAttributes;


        }
    }
}

and here is the usage in my register view.

<div class="container">

    <form asp-controller="Account" asp-action="Register" method="post">

        <div class="col-md-4 col-md-offset-4">

            <div class="form-group">
                <label asp-for="FirstName"></label>
                <input class="form-control" type="text" asp-for="FirstName" />
                <span asp-validation-for="FirstName" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="LastName"></label>
                <input class="form-control" asp-for="LastName" />
                <span asp-validation-for="LastName" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="Email"></label>
                <input class="form-control" type="text" asp-for="Email" />
                <span validation-class="alert alert-danger" invalid-class="test" asp-validation-for="Email" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="Password"></label>
                <input asp-for="Password" type="password" id="password" class="form-control" />
                <span asp-validation-for="Password" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="ConfirmPassword"></label>
                <input asp-for="ConfirmPassword" type="password" id="confirm-password" class="form-control" />
                <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
            </div>


            <div class="btn-group text-center">
                <button class="btn btn-default">Sign up!</button>
                <button class="btn btn-danger">Cancel</button>
            </div>
        </div>

    </form>
</div>

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

And yes I have register in my _ViewImports.cshtml file, the projects assembly name.

@using MusicianProject
@using MusicianProject.Models
@addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"
@addTagHelper "*, MusicianProject"

Now I'm not sure if placement of certain files matters, but my _ViewImports.cshtml file is located within my views folder root (src/Views/_ViewImports.cshtml), and my tag helpers have their own folder in the root (src/TagHelpers/*).

What did I miss and how can I correct it?

Answer 1

You have 2 issues

1- The HtmlTargetElement is the name of the tag where this tag helper can be used, ex: span, div, table ... 2- You didn't use the tag helper in your code, accordingly, it will never get fired. it is not applied by default to all the tags specified in the HtmlTargetElement, you should call it by adding the validate-class attribute to the span tag.

To know more about tag helpers, please check this link https://blogs.msdn.microsoft.com/msgulfcommunity/2015/06/17/developing-custom-tag-helpers-in-asp-net-5/

Answer 2

If I understood correctly your problem is that your breakpoint doesn't get hit. That problem lies here:

[HtmlTargetElement("invalid-class",  Attributes = "validation-class")]

The first parameter of HTMLTargetElement is the tag you are targeting, so in your case that would be "span". You entered a class name there.

This way at least your breakpoints will get hit and from there I'm sure you'll figure out the rest.