callumbwhyte / meganav

A flexible, draggable link picker for constructing site navigation menus in Umbraco
MIT License
35 stars 34 forks source link

Ability to get property alias name of menu #20

Closed blachawk closed 6 years ago

blachawk commented 6 years ago

How do we get the property alias name of the given Meganav menu in Razor? So that we can set that as a CSS name of the menu when the page is rendered in the DOM.

So that the rendered menu may look something like this...

<ul class="my-property-alias-name">
<li>item 1</li>
<li>item 2</li>
<li>item 3 </li>
</ul>

or

<section class="my-property-alias-name">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3 </li>
</ul>

Or is this not possible with current version of Meganav?

The only thing I know how to do with this package is the following...

<section>
  @Html.Partial("ExampleNavigation", Model.Content.GetPropertyValue<IEnumerable<MeganavItem>>("my-property-alias-name"))
</section>
callumbwhyte commented 6 years ago

Hello, thanks for raising this question!

I would recommend that you duplicate the "ExampleNavigation" partial that ships with the package and use this as a template. This way you can pass in the property value relevant to it's use and use different HTML for each navigation.

If you're looking for a solution with less duplication (but inherently more complexity) you could create a razor helper that takes a string parameter of "cssClass" and render the navigation that way.

@helper RenderNavigation(IEnumerable<MeganavItem> items, string cssClass = "")
{
    if (items.Any())
    {
        <ul class="@(!string.IsNullOrWhitespace(cssClass) ? cssClass : null)">
            @foreach (var item in items)
            {
                <li>
                    <a href="@item.Url" target="@item.Target">
                        @item.Title (Level: @item.Level)
                    </a>

                    @RenderNavigation(item.Children)
                </li>
            }
        </ul>
    }
}

For the above example I have duplicated the "RenderNavigation" helper from the "ExampleNavigation" Razor partial that ships with the package but added an optional parameter of "cssClass".

You could call it like this in your Razor View:

@RenderNavigation(Model.Content.GetPropertyValue<IEnumerable<MeganavItem>>("my-property-alias-name"), "my-custom-css-class")

If you want to reuse the above Razor helper in multiple Razor Views across your project you can create a file for it within the "App_Code" folder.

Hope this helps!

blachawk commented 6 years ago

Awesome. This was actually leading me to my second question and the "bigger" picture. With mega nav, I would really like to reference my mega nav menu on to other sibling templates. Under my master template, I will have 7 child templates (not just home template). With your examples above, does the razor helper code also allow me to reference my original mega nav menu onto other templates? If not, how can I do that?

blachawk commented 6 years ago

I looked over the documenation on Implementing Razor, and tried the following...

@{

    foreach (var item in Model.GetPropertyValue<IEnumerable<MegaNavItem>>("fFatopNav"))
    {
        <p>do stuff</p>
    }
}

But Visual Studio is complaining and saying:

The type of namespace name 'MegaNavItem' could not be found

What should I look over to correct this issue?

Thanks

callumbwhyte commented 6 years ago

In regards to your first message, you can definitely achieve that by using the Razor helpers! Though if you want the navigation to appear on all templates I'm unsure why you wouldn't simply reference the navigation partial in your Master template. Maybe I misunderstood...

The recent issue you have reported could be a number of things. Firstly, the model that Meganav returns is called "MeganavItem" whereas in your code you have "MegaNavItem" (note the difference in capital N). Alternatively it is because you don't have "@using Cogworks.Meganav.Models" in the references at the top of your Razor Partial.

Hope this helps!

blachawk commented 6 years ago

In regards to the recent issue, it was my fault - I forgot the using statement at the top of my master template.

In regards to my first message, yes! I simply want to reference my menu onto the master template :) And with your guidance I believe I have learned a lot today and now have something that works!



Thanks for all the help!
callumbwhyte commented 6 years ago

Glad you sorted your issue!

I'm not quite sure what you're trying to do with the 2nd part though... Could you clarify and I'll try to help!

blachawk commented 6 years ago

When you say second part, what do you mean...

What I said earlier:

Awesome. This was actually leading me to my second question and the "bigger" picture. With mega nav, I would really like to reference my mega nav menu on to other sibling templates. Under my master template, I will have 7 child templates (not just home template). With your examples above, does the razor helper code also allow me to reference my original mega nav menu onto other templates? If not, how can I do that?

Through talking things out earlier, I now see that I can simply station my mega nav on my master template, and do not need to physically place it on other templates. Hopefully that clears it up.

callumbwhyte commented 6 years ago

Ahh really sorry, I must have replied while you were editing your original post as I didn't see the code sample you've provided above.

Really glad I could help you out, and thanks again for using the package! :-) #h5yr

itunc1980 commented 6 years ago

Hello, when I wrote for in the children items .Where(x => x.Content.IsVisible()) I get an error message.

Server Error in '/' Application. Object reference not set to an instance of an object. Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. Exception Details: System.NullReferenceException: Object reference not set to an instance of an object. Source Error: Line 23: { Line 24: