Completed
Last Updated: 09 Nov 2020 12:44 by ADMIN
Aaron
Created on: 02 Nov 2020 19:06
Category: UI for ASP.NET Core
Type: Bug Report
1
Tag Helpers Generate Invalid ID Values with Periods

When assigning the Name of a Telerik UI control, the value specified is used for both the name and id attributes of HTML elements. If the value specified contains a period (ex. a property of a complex model property, ex. Model.Address.Line1) then the "name" attribute will still contain the period (ex. "Address.Line1") but because periods are invalid for the "id" attribute, the periods should get replaced with an underscore by default (ex. "Address_Line1"). Using HTML helpers, this appears to be happening correctly. Using Tag Helpers, on the other hand, does not appear to be sanitizing the id values and instead leaves the period, causing an invalid value to be used and inconsistent results when compared to the HTML Helpers.

 

Example using the ListBox component:

// Tag Helper, generates this: <select id="ComplexModelProperty.ListBoxTagHelper" name="ComplexModelProperty.ListBoxTagHelper">
<kendo-listbox name="ComplexModelProperty.ListBoxTagHelper" bind-to="new List<string>()"></kendo-listbox>

// HTML Helper, generates this: <select id="ComplexModelProperty_ListBoxHtmlHelper" name="ComplexModelProperty.ListBoxHtmlHelper">
@(Html.Kendo().ListBox()
  .Name("ComplexModelProperty.ListBoxHtmlHelper")
  .BindTo(new List<string>())
)

Example using the Button component:

// Tag Helper, generates this: <button id="ComplexModelProperty.ButtonTagHelper" name="ComplexModelProperty.ButtonTagHelper" type="button">
<kendo-button name="ComplexModelProperty.ButtonTagHelper">Image icon</kendo-button>

// HTML Helper, generates this: <button id="ComplexModelProperty_ButtonHtmlHelper" name="ComplexModelProperty.ButtonHtmlHelper" type="button">
@(Html.Kendo().Button()
      .Name("ComplexModelProperty.ButtonHtmlHelper")
      .HtmlAttributes(new { type = "button" })
      .Content("Image icon"))

I only tested with these two components to verify this wasn't an issue specific to the ListBox component, but I'm assuming this is a problem with any component when using Tag Helpers. After looking at some of the relevant code, I'm guessing this could be corrected by updating the GenerateId() method in the TagHelperBase class (ex. by calling something like GenerateIdFromName() that would handle sanitizing the value).

I also found this forum post from over two years ago reporting what appears to be this same issue. There was a reply that acknowledged the issue and offered a workaround "until this issue is fixed", however after two years I would think something like this would have already been fixed (a bug that applies to all Tag Helpers, results in invalid HTML being generated, and can be fixed by using a built-in .NET method that was created specifically for this purpose).

1 comment
ADMIN
Ivan Danchev
Posted on: 09 Nov 2020 12:44

Hello Aaron,

I see that my colleague Neli has replied in the forum thread you linked, and has provided information about the state of the issue. It has been fixed in R3 2020.

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.