Adding the target parameter to the Custom Link MenuItem in Orchard CMS

Question

I have created my navigation menus in Orchard using a mix of Content Item and Custom Link Elements (parts of the website are outside the scope of the CMS). Now there are a couple of links that I need to open in a new window/tab, basically the target="_blank" behaviour.

SInce the original Custom Link does not have any parameters I tried to create an extended version of it. In the admin backend I went to "Content definition" looked up Custom Link and tried to create a copy of it, then add a target field that I could check for and use in my theme's Menu.cshtml file.

However I can't even get the basic carbon copy of the Custom Link item working. It has the same stereotype, same Parts, same Forms (none) as the original Custom Link, and it does appear in the list of items on the admin -> navigation window. However the item does not have a field for the URL/link. It only has the field for Menu Text, nothing else.

So my question is 2-tiered:

1. How can I get a carbon copy of the Custom Link item type working in my Orchard backend navigation?
2. When I have my copy of the Custom Link working and add a text field named target, how can I access its value in the Menu.cshtml view?

(I tried simply adding a URL field to my copy, that would then show up in the navigation editor, however the navigation itself would ignore it in the output and create a link to the content item id instead).

Any help is greatly appreciated!

Edit: Here are some screenshots to better illustrate the problem, maybe they can help pin down the problem.

Answer 1

1. Seems like you've done everything right. Please double check if MenuItemPart is there. This part is responsible for holding the URL information and displaying an editor for it. Not sure if this part is attachable though - if it's not, then make it so in the Content Definition\Parts pane.

2. Instead of hardwiring things inside Menu.cshtml, you should create a file named MenuItemLink-[YourTypeName].cshtml. This shape file will be used to display your custom menu items. Then you can access any fields via Model.Content object, eg. Model.Content.YourTypeName.FieldWithTargetName.Value.

Answer 2

You need to use the MenuItemPart because it has a few important functions integrated into Orchard.Core.

This works fine:

AdvancedMenuItemPartRecord:

public class AdvancedMenuItemPartRecord : ContentPartRecord
{
    public virtual string Target { get; set; }
    public virtual string Classes { get; set; }
}

AdvancedMenuItemPart:

public class AdvancedMenuItemPart : ContentPart<AdvancedMenuItemPartRecord>
{
    public string Target
    {
        get { return Retrieve(x => x.Target); }
        set { Store(x => x.Target, value); }
    }
    public string Classes
    {
        get { return Retrieve(x => x.Classes); }
        set { Store(x => x.Classes, value); }
    }
}

AdvancedMenuItemPartDriver:

public class AdvancedMenuItemPartDriver : ContentPartDriver<AdvancedMenuItemPart>
{
    protected override string Prefix
    {
        get { return "AdvancedMenuItem"; }
    }

    protected override DriverResult Editor(AdvancedMenuItemPart part, dynamic shapeHelper)
    {
        return ContentShape("Parts_AdvancedMenuItem_Edit", () => shapeHelper.EditorTemplate(TemplateName: "Parts/AdvancedMenuItem", Model: part, Prefix: Prefix));
    }

    protected override DriverResult Editor(AdvancedMenuItemPart part, IUpdateModel updater, dynamic shapeHelper)
    {
        updater.TryUpdateModel(part, Prefix, null, null);
        return Editor(part, shapeHelper);
    }
}

AdvancedMenuItemPartHandler (ActivatingFilter add MenuItemPart to your AdvancedMenuItem dynamicaly):

public class AdvancedMenuItemPartHandler : ContentHandler
{
    public AdvancedMenuItemPartHandler(IRepository<AdvancedMenuItemPartRecord> repository)
    {
        Filters.Add(StorageFilter.For(repository));
        Filters.Add(new ActivatingFilter<MenuItemPart>("AdvancedMenuItem"));
    }
}

Placement.info:

<Place Parts_AdvancedMenuItem_Edit="Content:11"/>

Migrations:

public int UpdateFrom2()
    {
        SchemaBuilder.CreateTable("AdvancedMenuItemPartRecord",
            table => table
                .ContentPartRecord()
                .Column<string>("Target")
                .Column<string>("Classes")
            );
        ContentDefinitionManager.AlterPartDefinition("AdvancedMenuItemPart", part => part
            .WithDescription(""));

        ContentDefinitionManager.AlterTypeDefinition("AdvancedMenuItem", cfg => cfg
                       .WithPart("AdvancedMenuItemPart")
                       .WithPart("MenuPart")
                       .WithPart("CommonPart")
                       .WithIdentity()
                       .DisplayedAs("Custom Link Advanced")
                       .WithSetting("Description", "Custom Link with target and classes fields")
                       .WithSetting("Stereotype", "MenuItem")
            // We don't want our menu items to be draftable
            .Draftable(false)

            // We don't want the user to be able to create new ActionLink items outside of the context of a menu
            .Creatable(false)
        );

        return 3;
    }

MenuItemLink-AdvancedMenuItem.cshtml:

@{
   var advancedPart = Model.Content.AdvancedMenuItemPart;

   var tag = new TagBuilder("a");
   tag.InnerHtml = WebUtility.HtmlDecode(Model.Text.Text);
   tag.MergeAttribute("href", Model.Href);

   if (!string.IsNullOrWhiteSpace(advancedPart.Target)) {
       tag.MergeAttribute("target", advancedPart.Target);
   }
   if (!string.IsNullOrWhiteSpace(advancedPart.Classes))
   {
       tag.AddCssClass(advancedPart.Classes);
   }

} @Html.Raw(tag.ToString(TagRenderMode.Normal))