Try our conversational search powered by Generative AI!

eGandalf
Oct 11, 2016
  3917
(2 votes)

Rendering a ContentFolder as a Block to List Assets

Update: I'm an idiot. Fixed it up.

For content-heavy clients, we get the occasional request for listing file assets on the site for download. From what I can tell, there are a couple of options that require a bit of author effort, but I really wanted to provide something that is more suited to the best authoring experience offered by Episerver - drag and drop within Content Areas.

Knowing I can drag and drop most content types into a ContentArea and expect something to happen, I decided to give it a try using one of the asset panel ContentFolders. So I hover my mouse over a folder, casually hold down the mouse button, and drag the folder into an open area of the page. The field highlights! The folder drops in! It works!

Almost.

According to Episerver's documentation, "a content folder is used to structure content and has no visual appearance on the site." Meaning that the ContentFolder type has no Controller and no View.

Great. I can fix that. Code below.

Here's the part where I was an idiot. I was using the wrong parameter name in my Index method and therefore thought that the system was always returning null. Key lesson: make sure you're aligning with convention. So I deleted where I was explaining my workaround that I didn't need and am just including the final code below. This isn't production, but feel free to point out my other mistakes.

Controller:

using EPiServer.Core;
using EPiServer.Web.Mvc;
using System;
using System.Linq;
using System.Web.Mvc;
using System.Web.Routing;
using EPiServer;
using EPiServer.ServiceLocation;
using Alloy.Models.ViewModels;
using Alloy.Models.Media;
using Alloy.Business;

namespace Alloy.Controllers
{
    public class ContentFolderController : PartialContentController
    {
        private IContentRepository contentRepository => ServiceLocator.Current.GetInstance();
        // GET: ContentFolder
        public override ActionResult Index(ContentFolder currentContent)
        {
            if(currentContent != null)
            {
                var model = new ContentFolderViewModel();
                model.Name = currentContent.Name;

                var documents = contentRepository.GetChildren(currentContent.ContentLink);

                model.Documents = documents.Select(d => new DocumentViewModel() {
                    Name = d.Name,
                    Description = d.Description,
                    Url = d.GetUrl(),
                    FileSize = d.BinaryData.GetSize(),
                    EveryoneHasAccess = d.IsAvailableToEveryone()
                });

                return PartialView(model);
            }
            return PartialView();
        }
    }
}

View:

@model Alloy.Models.ViewModels.ContentFolderViewModel

<h3>@Model.Name</h3>
<ul>
@foreach (var doc in Model.Documents)
{
    <li>
        <a href="@doc.Url">@doc.Name</a>
        @if (!string.IsNullOrWhiteSpace(doc.Description))
        { <div>@Html.Raw(doc.Description)</div> }
        <div style="font-style: italic; color: #777">File size: @doc.FileSize</div>
    </li>
}
</ul>

ViewModels:

using System.Collections.Generic;

namespace Alloy.Models.ViewModels
{
    public class ContentFolderViewModel
    {
        public string Name { get; set; }
        public IEnumerable<DocumentViewModel> Documents { get; set; }
    }
}
namespace Alloy.Models.ViewModels
{
    public class DocumentViewModel
    {
        public string Name { get; set; }
        public string FileSize { get; set; }
        public string Url { get; set; }
        public string Description { get; set; }
        public bool EveryoneHasAccess { get; set; }
    }
}

Extensions:

using EPiServer.Core;
using EPiServer.Security;
using EPiServer.ServiceLocation;
using EPiServer.Web.Routing;
using System;
using System.Security.Principal;

namespace Alloy.Business
{
    public static class MediaExtensions
    {
        private static UrlResolver urlResolver => ServiceLocator.Current.GetInstance<UrlResolver>();
        private static PermissionService permissionService => ServiceLocator.Current.GetInstance<PermissionService>();

        public static string GetSize(this EPiServer.Framework.Blobs.Blob blob)
        {
            using (var blobReader = blob.OpenRead())
            {
                var l = blobReader.Length;
                if(l < 1000)
                {
                    return $"{l} bytes";
                }
                if(l < 1000000)
                {
                    return $"{l / 1024} KB";
                }
                return $"{l / 1056478} MB";
            }
        }

        public static Boolean IsAvailableToEveryone<T>(this T content) where T : IContent
        {
            return content.RoleHasAccess(new[] { "Everyone" }, AccessLevel.Read);
        }

        public static Boolean RoleHasAccess<T>(this T content, string[] roles, AccessLevel accessLevel) where T : IContent
        {
            var securedContent = content as ISecurable;
            var descriptor = securedContent.GetSecurityDescriptor();
            var identity = new GenericIdentity("doesn't matter");
            var principal = new GenericPrincipal(identity, roles);
            return descriptor.HasAccess(principal, accessLevel);
        }

        public static string GetUrl<T>(this T content) where T : IContent
        {
            return urlResolver.GetUrl(content.ContentLink);
        }
    }
}
Oct 11, 2016

Comments

Per Magne Skuseth
Per Magne Skuseth Oct 11, 2016 06:52 PM

Hi! The reason "folder" is always null is because of the parameter name.
For Episerver controllers, the model binder will check and see if the name of the parameter is currentPage/currentBlock/currentContent. If it is, it will get the current content from the routeData.
So, changing the name from "folder" to "currentContent" will get you get current ContentFolder.

eGandalf
eGandalf Oct 11, 2016 08:05 PM

Thanks - I'm an idiot. While it should be obvious to anyone with more Epi experience, I'm leaving the code for more novice searchers (like myself).

Oct 12, 2016 12:39 PM

Maybe worth adding a Log.Info in Episerver if a controller is missing a matching parameter to aid in finding that error? I think most developers have dont that at least once.

At least I have.. :)

It can take a few hours to find if you have never seen it before...

valdis
valdis Oct 12, 2016 01:30 PM

Adding my 2 cents :)

I would move Length calculation at the moment when media is saved, not when it's rendered.

And rendering the description property in the template could be also wrapped into some generic `ifnotempty` helper method.

Aaaaand :) If extension is defined for IContent, should it be located in MediaExtensions class? ;)

Cheers!

eGandalf
eGandalf Oct 12, 2016 03:02 PM

Hey Valdis,

I completely agree with every point!

This is just a PoC I put together for a project, nowhere near production code, so I'm willing to live with some shortcuts in favor of that. I'm changing the extension a bit to add some validation (see comments in other post). When I'm satisfied with it, I'll update this as well.

Please login to comment.
Latest blogs
Optimizely and the never-ending story of the missing globe!

I've worked with Optimizely CMS for 14 years, and there are two things I'm obsessed with: Link validation and the globe that keeps disappearing on...

Tomas Hensrud Gulla | Apr 18, 2024 | Syndicated blog

Visitor Groups Usage Report For Optimizely CMS 12

This add-on offers detailed information on how visitor groups are used and how effective they are within Optimizely CMS. Editors can monitor and...

Adnan Zameer | Apr 18, 2024 | Syndicated blog

Azure AI Language – Abstractive Summarisation in Optimizely CMS

In this article, I show how the abstraction summarisation feature provided by the Azure AI Language platform, can be used within Optimizely CMS to...

Anil Patel | Apr 18, 2024 | Syndicated blog

Fix your Search & Navigation (Find) indexing job, please

Once upon a time, a colleague asked me to look into a customer database with weird spikes in database log usage. (You might start to wonder why I a...

Quan Mai | Apr 17, 2024 | Syndicated blog

The A/A Test: What You Need to Know

Sure, we all know what an A/B test can do. But what is an A/A test? How is it different? With an A/B test, we know that we can take a webpage (our...

Lindsey Rogers | Apr 15, 2024

.Net Core Timezone ID's Windows vs Linux

Hey all, First post here and I would like to talk about Timezone ID's and How Windows and Linux systems use different IDs. We currently run a .NET...

sheider | Apr 15, 2024