Sign in Register
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 296 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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies