DEV Community

Cover image for An implementation for Umbraco BlockList
Gareth Wright
Gareth Wright

Posted on • Updated on

An implementation for Umbraco BlockList

Just a quick article to describe my implementation on how to use the Umbraco CMS blocklist editor to output components with typed models. I've used HTML actions to add functionality to components and CachedPartial to add a layer of caching.

I've updated the base Umbraco CMS blocklist component to allow for specific models and actions.

@foreach (var block in Model.Where(x => x?.ContentUdi != null))
{
    switch (block.Content)
    {
        case Map map:
            @Html.Action("Map", "MapSurface", new { backgroundImage = map.Image?.Id, mapImage = map.MapImage?.Id });
            break;
        case SiteMapTree _:
            @Html.Action("SitemapTree", "SitemapTreeSurface");
            break;
        default:
            if (block.Content.ContentType.Alias == Form.ModelTypeAlias)
            {
                @Html.Partial("BlockList/Components/" + block.Content.ContentType.Alias, block.Content)
            }
            else   
            {
                @Html.CachedPartial("BlockList/Components/" + block.Content.ContentType.Alias, block.Content, 3600, true,
                    contextualKeyBuilder: (model, viewData) => (model as IPublishedElement)?.Key.ToString());
            }
            break;
    }
}

Enter fullscreen mode Exit fullscreen mode

We need to ensure caching isn't used for any component that uses a form, as this can cause errors on the website.

HTML actions allows me to use surface controllers to perform complicated logic on components.

Any improvements or suggestions let me know!

Discussion (0)