Adding attributes to ContentAreaRenderer tags

Jonas Carlbaum

Vote:

Hi!

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.

#231440

Nov 27, 2020 16:07

Johan Petersson

Vote:

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">
                ...
            </li>
        }
    </ul>
}

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

#231525

Nov 30, 2020 9:35

Jonas Carlbaum

Vote:

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!? ;)

#231526

Nov 30, 2020 9:52

Jonas Carlbaum

Vote:

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

#231528

Nov 30, 2020 9:58