CODEWITHSUNDEEP
asp.netrazororchardcms
lolski
lolski

Reputation: 17491

Orchard CMS: Modifying a menu item alternate and iterating over the items

Let's say I created a menu titled "Main Menu" from the admin panel and I need to customize the default markup, e.g. let's say I want to modify/replace the <ul>, <li> as well as the surrounding <article> and <nav> tags.

I assume that I have to come up with something like this in my Parts.MenuWidget.cshtml alternate template.

<ul class="a b c">
    for each item in menuItems:
        display("<li>" + item + "</li>")
    end
</ul>

How do I do that in Orchard?

Upvotes: 1

Views: 763

Answers (1)

Xceno
Xceno

Reputation: 913

That's quite simple.

You could first create an alternate for you MenuWidget like so:

Parts.MenuWidget-MyZoneName.cshtml

<nav>
    <div class="logo">
        @Html.Partial("_Logo")
    </div>
    <ul>
        @*Display all the stuff added in the admin*@
        @DisplayChildren(Model.Menu)

        @*Add additional stuff. Of course you could also add it as MenuItem to the Menu-Model*@
        @if ( Request.IsAuthenticated )
        {
            if ( Authorizer.Authorize(StandardPermissions.AccessAdminPanel) )
            {
                <li>
                    <a href="/Admin">
                        Admin
                    </a>
                </li>
            }
            <li>
                <a href="~/Example1">
                    Extra1
                </a>
            </li>
        }
        else
        {
            <li>
                <a href="~/Example2">
                    Extra2
                </a>
            </li>
        }
    </ul>
</nav>

And then go on and do something similar for your MenuItems. For example:

MenuItemLink.cshtml

<a href="@Model.Href" class="my-super-cool-custom-link">@Model.Text</a>

Another thing that's worth mentioning is that you can either only provide an alternate for a specific shape like the MenuItemLink above or just provide an alternate for the base MenuItem shape which will then be used for every MenuItem type that exists.

(Maybe those are not the best examples, but I guess they'll do the job ;) )

Update: In order to remove/modify the tags you can create an alternate for MenuItem.cshtml and look at this part:

if (HasText(renderedMenuItemLink)) 
{
    var tag = Tag(Model, "li");
    @tag.StartElement
    @renderedMenuItemLink

    if (items.Any()) 
    {
        <ul>
            @DisplayChildren(Model)
        </ul>
    }

    @tag.EndElement
}

Upvotes: 3

Related Questions