c# - 如何在页面上创建 localNav 样式的选项卡式布局

Question

我想要一个有两个选项卡的页面，我可以看到如何使用 LocalNav() 在 AdminMenu.cs 中执行此操作，但我需要在第三级项目上执行此操作。

我的页面结构是

管理菜单

• 我的模块
  • 内容项目 1
    • 选项卡 1
    • 选项卡 2
  • 内容项目 2
    • 选项卡 1
    • 选项卡 2

我无法让这些出现，因为它似乎只支持在“我的模块”链接中设置标签，而不是较低级别的链接。

还有其他方法可以在我的“内容项 1”和“内容项 2”页面上显示选项卡式界面吗？

Answer 1

我不相信有办法单独使用 Orchard 的导航提供程序来做到这一点。我做过类似的事情，但我必须单独处理第三级，并从我自己的控制器自己实现菜单 UI。

您仍然需要在模块的导航提供程序中添加第三级，因为这将正确标记 LHS 菜单和选项卡选择。类似于以下内容：

namespace Company.MyModule {
    public class TileSortAdminMenu : INavigationProvider {

        private Localizer T { get; set; }

        public string MenuName { get { return "admin"; } }

        public void GetNavigation(NavigationBuilder builder) {

            builder
                .AddImageSet("mymodule")
                .Add(T("My Module"), "5", menu => menu
                    .LinkToFirstChild(true)
                    .Add(T("Content Item 1"), "1", item => item
                        .LocalNav()
                        .LinkToFirstChild(true)
                        .Add(T("Tab 1"), "1", tab => tab
                            .LocalNav()
                            .Action("Index", "MyModuleAdmin", new { area = "Company.MyModule"})
                        )
                        .Add(T("Tab 2"), "2", tab => tab
                            .LocalNav()
                            .Action("Tab2", "MyModuleAdmin", new { area = "Company.MyModule"})
                        )
                    )
                    .Add(T("Content Item 2"), "2", item => item
                        .LocalNav()
                        .LinkToFirstChild(true)
                        .Add(T("Tab 1"), "1", tab => tab
                            .LocalNav()
                            .Action("ContentItem2Tab1", "MyModuleAdmin", new { area = "Company.MyModule"})
                        )
                        .Add(T("Tab 2"), "2", tab => tab
                            .LocalNav()
                            .Action("ContentItem2Tab2", "MyModuleAdmin", new { area = "Company.MyModule"})
                        )
                    )
                );
        }
    }
}

在您的视图中，您可以通过以下方式维护 Orchard 的样式：

<ul class="localmenu localmenu-submenu">
    <li class="selected"><a href="@Url.Action("Index", "MyModuleAdmin", new { area = "Company.MyModule"})">Tab 1</a<</li>
    <li><a href="@Url.Action("Tab2", "MyModuleAdmin", new { area = "Company.MyModule"})">Tab 2</a></li>
</ul>

类localmenu-submenu是您自己的样式调整的样式挂钩，您可以将类添加selected到您正在查看的任何选项卡。

或者，根据您要实现的目标，您可以只实现 jQuery UI 的选项卡（可通过 Orchard.jQuery 资源清单获得），然后将样式更新为看起来像 Orchard-y。