This is a migrated thread and some comments may be shown as answers.

TagHelpers / id with dot

6 Answers 143 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Kakone
Top achievements
Rank 1
Kakone asked on 07 Jun 2018, 08:19 AM

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.

6 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 08 Jun 2018, 09:24 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kakone
Top achievements
Rank 1
answered on 08 Jun 2018, 09:40 AM
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.
0
Accepted
Bozhidar
Telerik team
answered on 08 Jun 2018, 09:45 AM
Hello,

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

Regards,
Bozhidar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Aaron
Top achievements
Rank 1
Veteran
answered on 30 Oct 2020, 10:22 PM

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).

0
Neli
Telerik team
answered on 04 Nov 2020, 01:01 PM

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

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/.

0
Aaron
Top achievements
Rank 1
Veteran
answered on 04 Nov 2020, 09:05 PM
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!
Tags
General Discussions
Asked by
Kakone
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Kakone
Top achievements
Rank 1
Aaron
Top achievements
Rank 1
Veteran
Neli
Telerik team
Share this question
or