Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Umbraco Beginner 10 posts 110 karma points
    Jul 22, 2019 @ 19:48
    Umbraco Beginner
    0

    Folder based nested tree menu

    Hello Umbraco experts,

    I have a requirement where I need to publish files where end users could download the files. Users would upload files in an organized folder structure in a media.

    I would like to create a tree menu from the media folder structure. When a user clicks the item (folder) in a menu, I would like to present files in that selected folder. I would like to accomplish this without creating a nested content structure but only with the nested folder structure in a media menu

    Can somebody help me!

    Copy Link
  • Erik-Jan Westendorp 29 posts 295 karma points MVP 5x c-trib
    Aug 01, 2019 @ 09:46
    Erik-Jan Westendorp
    100

    Hi Umbraco Beginner,

    You can find documentation here.

    To create the menu structure you can do something like this:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Master.cshtml";
    var mediaFolders = Umbraco.TypedMediaAtRoot().Where(x => x.DocumentTypeAlias == Folder.ModelTypeAlias).ToList();
}

<ul>
    @foreach (var mediaFolder in mediaFolders)
    {
        <li>
            <a href="/">@mediaFolder.Name</a>
            @if (mediaFolder.Children.Any(t => t.DocumentTypeAlias == Folder.ModelTypeAlias))
            {
                @List(mediaFolder)
            }
        </li>
    }


    @helper List(IPublishedContent mediaFolder)
{
    <ul>
        @foreach (var folder in mediaFolder.Children.Where(x => x.DocumentTypeAlias == Folder.ModelTypeAlias))
        {
            <li>
                <a href="">@folder.Name</a>
            </li>
            if (folder.Children.Any(x => x.DocumentTypeAlias == Folder.ModelTypeAlias))
            {
                @List(folder)
            }

        }
    </ul>
}

    The result will be like this:

    enter image description here

    If you don't use ModelsBuilder your code should look something like this. 

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "Master.cshtml";
    var mediaFolders = Umbraco.TypedMediaAtRoot().Where(x => x.DocumentTypeAlias == Folder.ModelTypeAlias).ToList();
}

<ul>
    @foreach (var mediaFolder in mediaFolders)
    {
        <li>
            <a href="/">@mediaFolder.Name</a>
            @if (mediaFolder.Children.Any(t => t.DocumentTypeAlias == "Folder"))
            {
                @List(mediaFolder)
            }
        </li>
    }
</ul>


@helper List(IPublishedContent mediaFolder)
{
    <ul>
        @foreach (var folder in mediaFolder.Children.Where(x => x.DocumentTypeAlias == "Folder"))
        {
            <li>
                <a href="">@folder.Name</a>
            </li>
            if (folder.Children.Any(x => x.DocumentTypeAlias == "Folder"))
            {
                @List(folder)
            }

        }
    </ul>
}
    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft