Example partial view - Githubissues

Sander-Los commented 2 years ago

Hi,

I have been looking into using this meganav in one of our projects. I watched the Umbraco Coffee talk and searched around (found some examples using Umbraco 8), but could not find an example of how to create the partial view for using this in Umbraco 9.

Could you help with providing a basic example?

NR-SEPA commented 2 years ago

This is a good shout. I would like to see an example in V9 too, if possible. Thanks.

NR-SEPA commented 2 years ago

OK, since I have figured out the code for using this in Umb v.9 I have decided to add some help here as there are no good examples out there for the Umbraco V9 .Net Core version yet. Not that I could find anyway. 😄

Disclaimer - This may or not be the best way to do it, but it works for me. If you don't agree with the code - roll your own! This is merely here as a starting point for folk to use this in V9 of Umbraco. It's not a full blooded tutorial - just the code required in each view to get it working.

I have not included any styling in this example. It's just rendered as a basic unordered list to make it more readable here. I used Bootstrap menu navigation styling to get it all looking neat - this is relatively easy to do if you know css well.

YOU NEED:

Meganav package installed
Custom Datatype: MegaNav (or whatever you want to call it) using the Meganav as a property editor
Doctypes & Templates: Master, Home, SimplePage
Partial views: ExampleMegaNavigation (or whatever you want to call it)
MegaNav property on your homepage doctype using meganav datatype
A homepage and some simple pages created in content tree
Your meganav property (mainNavigation) on homepage content page populated with some pages from content tree

MASTER template:

@using Umbraco.Cms.Web.Common.PublishedModels;
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<ContentModels.Master>
@using ContentModels = Umbraco.Cms.Web.Common.PublishedModels;
@using Our.Umbraco.Meganav.Models

@{
    Layout = null;
    var home = Umbraco.ContentAtRoot().FirstOrDefault();
    var megaNavItems = (IEnumerable<IMeganavItem>)home.Value("mainNavigation")
}

<!DOCTYPE html>
<html>

<head>

...bunch of styling and references in here (I used Bootstrap and some custom styles)

</head>

<body>

...

@await Html.PartialAsync("ExampleMegaNavigation", megaNavItems)

...

</body>
</html>

NAVIGATION partial view:

@using Our.Umbraco.Meganav.Models
@model IEnumerable<IMeganavItem>

    <ul>
        @foreach(var megaNavItem in Model)
        {
            @if (megaNavItem.Children != null && megaNavItem.Children.Any())
            {
            <li>
                <a href="@megaNavItem.Url">@megaNavItem.Title</a>

                @if(megaNavItem.Children.Any())
                {
                    <ul> 
                    @{ renderChildren(megaNavItem.Children);  }
                    </ul>
                }
            </li>
            }
            else
            {
                <li><a href="@megaNavItem.Url">@megaNavItem.Title</a></li>
            }
        }
</ul>

@functions
{
    void renderChildren(IEnumerable<IMeganavItem> items)
    {
        if (items.Any())
        {
            foreach(var child in items)
            {
                <li><a href="@child.Url">@child.Title</a></li>
                if(child.Children.Any())
                {
                    <ul>
                    @{ renderChildren(child.Children); }
                    </ul>
                }
            }

        }

    }
}@*end of functions*@

Hope this helps anyone new to Umbraco V9 avoid hours of frustration. 😉

callumbwhyte / meganav

Example partial view #65