TagHelpers / id with dot

[Kakone]

Hello,

The generation of the identifier in TagHelpers is different from HtmlHelpers. The dot is not replaced by underscore :

<input asp-for="SubModel.Name" /> generates SubModel_Name
@Html.Kendo().AutoCompleteFor(m => m.SubModel.Name) generates SubModel_Name
<kendo-autocomplete for="SubModel.Name"></kendo-autocomplete> generates SubModel.Name

 

Is there an option to replace dot with underscore in TagHelpers ?

Cordially,
Stephane.

[Bozhidar]

Hi,

Thank you for reporting this. We will look into the taghelpers implementation, to see where the difference lies.

An important note to make here is that this only applies to the generated id. The name attribute is generated the same, and it's the property used in Model binding. So even though the id's are different, both versions work the same.

Could you share if this manifests in some error on your end, or is it simply an observation of the difference?

Regards,
Bozhidar
Progress Telerik

[Kakone]

There is no error but my Javascript code didn't work anymore when I replaced an HtmlHelper with the corresponding TagHelper in the .cshtml file. It's a surprising behaviour. As l'm using the $"#SubModel_Name" jQuery selector in my Javascript file, it didn't return any object anymore.

[Bozhidar]

Hello,

As a workaround until the issue is fixed, you can use the $("#Submodel\\.Name") selector. 

Regards,
Bozhidar
Progress Telerik

[Aaron]

Any update on this? It's been two years and I just had the pleasure of troubleshooting a problem that was not mine.

 

Here's some sample code to reproduce the issue from my testing:

<kendo-listbox name="ComplexModelProperty.ListBoxTagHelper" bind-to="new List<string>()"></kendo-listbox>
@(Html.Kendo().ListBox()
  .Name("ComplexModelProperty.ListBoxHtmlHelper")
  .BindTo(new List<string>())
)
<kendo-button name="ComplexModelProperty.ButtonTagHelper">Image icon</kendo-button>
@(Html.Kendo().Button()
      .Name("ComplexModelProperty.ButtonHtmlHelper")
      .HtmlAttributes(new { type = "button" })
      .Content("Image icon"))

 

Setting the Name is also what assigns the ID. With the HTML Helpers above, both result in names containing periods and ID's containing underscores (as they should). With the Tag Helpers, on the other hand, both the names and IDs contain periods (which results in an invalid HTML id per the specs).

Looking at some of the code, it looks like the problem might be in TagHelperBase.cs's GenerateId() method. This is calling GetFullHtmlFieldName() to retrieve the name, then it directly assigns Id to the same value (without sanitizing it by calling something like GenerateIdFromName).

[Neli]

Hello Aaron,

Could you please test the behavior with the latest UI for ASP.NET Core version? Below you will find a link to the bug issue in our official GitHub repo. As you could see, the bug fix was released with the 2020 R3 release (2020.3.915 version).

- https://github.com/telerik/kendo-ui-core/issues/5883

- Release history

Starting with the mentioned version the id with both TagHelpers and HtmlHelpers should be rendered with a lower dash. 

I have tested the provided snippet in a sample Ui for ASP.NET Core application. You could see the rendered elements in the screencast here. I also added a standard Html Textbox helper, just as a comparison. With the latest UI for the ASP.NET Core version, the behavior of the standard Html helpers, the Kendo Html Helpers, and tag helpers is consistent, and the id will be rendered with a lower dash.

I hope the provided information will be helpful.

Regards,
Neli
Progress Telerik

[Aaron]

Thanks for providing the detailed update! I came across this forum post when I was about to submit a bug report, but I didn't see anything for that GitHub issue. I checked and confirmed, sure enough we're on 2020.2.617. Crazy timing how we happened to install this a couple months before a two+ year old bug happened to get fixed, and I ran into the bug. Oh well, thanks again!