[Solved] .HtmlAttributes() bizarre behaviour

[Yavor]

Hi guys,

I am currently doing some front-end development for a client and they are using ASP.NET MVC and your controls. I'm experiencing a strange issue with the Menu and its .HtmlAttributes method. Here's the code:

<% Html.Telerik().Menu()
            .Name(Model.CurrentItem.ElementId)
            .Items(menu =>
            {
                foreach (var item in Model.CurrentItem.Items)
                {
                    menu.Add()
                        .HtmlAttributes(new { @class = "no-script" })
                        .Text(item.Text)
                        .Items(i =>
                            {
                                foreach (var subitem in item.Items)
                                {
                                    i.Add().HtmlAttributes(new { @class = "submenu_item"}).Text(subitem.Text).Url(subitem.Link);
                                }
                            });
                }
            })
            .Orientation(MenuOrientation.Horizontal)
            .Render();
%>

I'm simply building a menu structure with nested lists through a loop (dropdown menu). The problem is with the method that's in bold. It throws a generic "An item with the same key has already been added." error. There are two bizarre things:
1. - When I run the project, it builds ok and displays the homepage (with the menu) with no problem at all. However, when I request another page (click on the menu or manually type in the address) it throws that error.
2. This happens only when I add a class attribute (.HtmlAttributes(new { @class = "no-script" })). If I add an ID attribute it works fine (but of course that is invalid in terms of HTML).

Any thoughts are very much appreciated. Maybe I am missing sth, although that behaviour does not seem logical. If you need more info, let me know. Thanks a bunch.

kind regards,
Yavor

P.S. I know you are Bulgarians as myself and feel a bit awkward typing in English to Bulgarians, but I see all your discussions are in English, there u go :)

[Atanas Korchev]

Hello Yavor,

I tried to reproduce the problem to no avail. I am sending you my test project. Could you try to reproduce the exception in that project?

As for the forum language - we are always using English in the forums because they are public and customers from all over the world are reading them. Still if you open a support ticket you can write in Bulgarian without any worries.

Regards,
Atanas Korchev
the Telerik team

[Yavor]

Hi, Nasko

Thanks for your prompt reply. I thought I wouldn't be able to reproduce the exception because my environment is a bit more complex (NC2 integration etc.) but funnily enough I reproduced it quite easily.
I built your solution and it ran ok. But then I simply added another page (just copied your HomeController to a PageController and created a View like yours). I also changed the URLs of the menu items to point to the local pages ("/home", and "/page"). Then when I run the project:

http://localhost:12550/ - this opens ok (which is essentially "home")
http://localhost:12550/home - throws an error
http://localhost:12550/page - throws an error

I did want to attach the solution but as far as I can see I can't do that, so I am just attaching a printscreen with the error. One thing to point out is that when I opened the solution for the first time my studio (2008) said the solution should be updated to .NET 4 (and it did it successfully). I can't tell if that matters (I imagine it doesn't). Another thing to point out is that in this case the .HtmlAttributes() method does not seem to play a role since even after removing it the solution threw the error...go figure

Anyways, it could be a peculiarity in my set-up that causes it...or a weird bug (or one of those "Microsoft moments" ;)). Either way, I have removed the .HtmlAttributes() in my clients' project and this seems to solve the issue...which means my problem is not urgent anymore, but I'll be curious to find out what causes it. cheers

Yavor

[Atanas Korchev]

Hi Yavor,

Thank you for your continuous feedback. It helped me reproduce the exception. Fortunately the fix is really easy. To patch the code open Menu.cs and locate the HighlightSelectedItem method. Then change this:

tmpItem.HtmlAttributes.Add("class", "t-highlighted");

with this:

tmpItem.HtmlAttributes.AppendInValue("class", " ", "t-highlighted");

Needless to say the hotfix will be incorporate in our next release.

I have updated your telerik points as a token of our gratitude.

Regards,
Atanas Korchev
the Telerik team

[Yavor]

Excellent! Works like a charm now. Thank you very much for your quick response and help. And I'm glad I contributed :)

Now, while we are on the subject of the Menu control, I'd like to make a general comment (and a suggestion) for the Menu from a pure front-end semantics and standards perspective. Currently the Menu spits out the following HTML structure (in simplified form):

<ul id="menu">
      <li class="t-item"><a class="t-link" href="/somewhere">Something</a></li>
      <li class="t-item">
                <a class="t-link" href="#">Something</a>
                <ul class="t-group">...</ul>
      </li>
      <li class="t-item">...</li>
</ul>

Put in words, whenever you have nested unordered lists (dropdown menu) the top level item anchor (the bolded part) is an empty anchor i.e. it only serves as a name for the nested ul. Therefore from usability and standards perspective it should not be an anchor at all. It should just be text (maybe wrapped with a <span> so it can be easily referenced). Something like this:

<ul id="menu">
      <li class="t-item"><a class="t-link" href="/somewhere">Something</a></li>
      <li class="t-item">
                <span class="t-group-title">Something</span>
                <ul class="t-group">...</ul>
      </li>
      <li class="t-item">...</li>
</ul>

Or at least you can provide the option to do it like that (in case someone needs that to be a real anchor).

This is really a minor detail and you guys can decide if it's worth to do. But I can assure you that this level of detail would really make a good impression to people that see these things (me ;))

Anyways, I drfited off-topic but I decided to share my thoughts. Thanks for your help again, Nasko, and good luck. Greetings to any AUBG-ers working over there (I'm an ex-AUBGer myself) ;)

Kind regards,
Yavor

[Alex Gyoshev]

Hello Yavor,

Your suggestion seems reasonable - we just implemented it and it will be available with the upcoming official release. I'd argue that the markup hurts the usability, though ;-) We left the CSS classes in tact in order to prevent breaking changes. You can easily target the group-titles with .t-menu span.t-link.

Thank you for the feedback!

Regards,
Alex Gyoshev
the Telerik team

[Yavor]

Hi Alex,

I'm glad you accepted my suggestion. And, as I said, it is a really minor detail and it doesn't make any difference in terms of usability when using a "regular" user agent. However, when using a screen reader for blind that makes a difference (be it a small one). Some organizations here in the UK (e.x. the BBC) are obliged by law to have their content as accessible to screen readers as possible and they can get pretty..let's say "anal" about this :))

Keep up the great work and thanks for all your help once again, guys!

Kind regards,
Yavor