Try our conversational search powered by Generative AI!

Adding attributes to ContentAreaRenderer tags



I've seen the following stuff in one of our projects:

@Html.PropertyFor(x => x.Shortcuts, new
    CustomTag = "ul role='menubar'",
    ChildrenCustomTagName = "li role='none'"

The end tags looks like </li role='none'> and </ul role='menubar'>, which is quite ugly. But it's understandable, since the above usage isn't the way it's supposed to work.

I understand the purpose of the code, and it's quite relevant to be able to do these stuff, adding roles and other accessibility related stuff, without adding a custom ContentAreaRenderer.

The least I think the default implementation of ContentAreaRenderer should do, is to render the close tag properly, something like CustomTag.Split()[0] and ChildrenCustomTagName.Split()[0], no matter that the tag names isn't good, it will give the possibility to add attributes without changing interface to PropertyFor.

One other alternative — a cleaner one — would be adding the possibility to do something like:

@Html.PropertyFor(x => x.Shortcuts, new
    CustomTag = "ul",
    CustomTagAttributes = new { 
role = "menubar" },
    ChildrenCustomTagName = "li",
    ChildrenCustomTagAttributes = new { role = "none" },


Anyway, there is a need of adding attributes through PropertyFor, and in my eyes the responsibility should be in the product, the default ContentAreaRenderer.

Nov 27, 2020 16:07

Hi, you could just create a display template instead:

@Html.PropertyFor(x => x.Shortcuts, new { Tag = "Shortcuts" }

Then create a view in /views/shared/displaytemplates/shortcuts.cshtml:

@model ContentArea

@if (Model.FilteredItems != null)
    <ul role="menubar">
        @foreach (var item in Model.FilteredItems)
            <li role="none">

But not sure why you're using a ContentArea for this, PropertyLinkCollection seem like a better fit.

Nov 30, 2020 9:35

Thanks for the input @johan.petersson!

Hehe, I actually don't know the WHY, I haven't worked in that solution, only saw the code when looking over a colleagues shoulders, and it wasn't his code either. ;) 

Looking at the code now, I can even see that it's a block, with a ContentArea of only ShortcutBlock:s, which each have a IList and the ShortcutBlock seems to have a view which iterates and presents the shortcuts, so, yes, probably better to have a custom DisplayTemplate for this ContentArea-component to solve this special need.

Still, it would be a nice feature with attribute-options to avoid the need of a DisplayTemplate-solution too!? ;) 

Nov 30, 2020 9:52

I'll notice the team working on that solution that a DisplayTemplate is almost an effortless solution to overcome this ugly rendering, that no one but me had spotted yet... ;)

Nov 30, 2020 9:58
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.