Display Annotation Custom Editor Grid Popup TagHelper Not Working

[Cynthia]

I feel like this should be simple but I can't figure this out.  I use the  [Display(Name = "Code")] annotation in my view model. I have a simple custom editor popup on my grid.  I use taghelpers because I just do.  I am trying to get my labels to show the display name in my popup.  I have seen older posts where validation is also not working but I think this has been fixed.  Either way I feel like this should work.

Model

 public class ChargeViewModel

 {
     [ScaffoldColumn(false)]
     public int ChargesID { get; set; }

     [Required]
     [UIHint("EditChargePopup")]
     [Display(Name = "Code")]
     public string ChargesCodeID { get; set; }

Custom Editor

<div class="col-4">
    <label for="ChargesCodeID" />
    <kendo-textbox for="ChargesCodeID" />
</div>
<div class="col-4">
    <label for="Charges_Name" />
    <kendo-textbox for="Charges_Name" />
</div>
<div class="col-4">
    <label for="Charges_Fee" />
    <kendo-numerictextbox for="Charges_Fee" format="c2" decimals="2" />
</div>

Results

 

[Nikolay]

Hello Cynthia,

The `for` attribute is not using the ASP.NET Core Label Tag Helper.

<label for="ChargesCodeID" />

To fix this, use the `asp-for`, not `for`.

<div class="col-4">
    <label asp-for="ChargesCodeID" class="form-label"></label>
    <kendo-textbox for="ChargesCodeID"></kendo-textbox>
    <span asp-validation-for="ChargesCodeID" class="text-danger"></span>
</div>

<div class="col-4">
    <label asp-for="Charges_Name" class="form-label"></label>
    <kendo-textbox for="Charges_Name"></kendo-textbox>
    <span asp-validation-for="Charges_Name" class="text-danger"></span>
</div>

<div class="col-4">
    <label asp-for="Charges_Fee" class="form-label"></label>
    <kendo-numerictextbox for="Charges_Fee" format="c2" decimals="2"></kendo-numerictextbox>
    <span asp-validation-for="Charges_Fee" class="text-danger"></span>
</div>

Make sure you have Tag Helpers enabled in the view (usually via _ViewImports.cshtml):

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Ensure your model properties also have [Display(Name="...")] where needed:

public class ChargeViewModel
{
    [ScaffoldColumn(false)]
    public int ChargesID { get; set; }

    [Required]
    [UIHint("EditChargePopup")]
    [Display(Name = "Code")]
    public string ChargesCodeID { get; set; }

    [Display(Name = "Name")]
    public string Charges_Name { get; set; }

    [Display(Name = "Fee")]
    public decimal? Charges_Fee { get; set; }
}

Regards,
Nikolay
Progress Telerik

[Cynthia]

Sorry for my delay in responding.  I had tried the asp-for in the label.  I inadvertently copied the wrong code.

I am still having the issue.  It seems that the issue stems from me trying to use the kendo-textbox and tag helpers.  For an experiment I replaced the kendo-textbox with an input and left another row with the kendo-textbox.

    <div class="row form-group">
        @Html.HiddenFor(m => m.ChargesID)
        <div class="col-4">
                <label asp-for="ChargesCodeID" class="control-label"></label>
                <input asp-for="ChargesCodeID" class="form-control" />
        </div>
       <div class="col-4">
                <label id="lblChargeName" asp-for="Charges_Name" class="control-label" />
                <kendo-textbox id="Charges_Name" for="Charges_Name" class="form-control" />
        </div>
</div>

 

As you can see the input works fine.  The kendo-textbox shows incorrectly and doesn't show the label.  In the console I am getting an error for the incorrect use of a Form Element.  It is suggesting that it can't find the matching id.  Even though I deliberately put it in there.

When I click on the violating node it takes me to the label shown in the second image below.

 

[Cynthia]

Never mind :(

I can't believe what it was...

<label asp-for="ChargesCodeID" class="control-label" />

Apparently you cannot end a label with a />

It has to be </label>.

How embarrassing.  I don't want to think about all the time that was spent on this ...

[Nikolay]

Hi Cynthia,

Thank you for the update. I am happy to her you managed to resolve the situation.

You are correct that the <label /> self-closing syntax is invalid in HTML, and using <label asp-for="..."></label> is required for proper rendering and association with form elements. This is especially important for Tag Helpers, which rely on valid markup to generate correct HTML and accessibility features.

Regards,

Nikolay