(Sitecore) 带有子导航的导航

Question

我正在尝试使用下拉子导航菜单锚点构建主导航。我准备好了带有 CSS 的 HTML，但我不知道如何在子布局及其后面的代码中进行操作。

我做了很多导航，但这些都是使用 asp:repeaters 或 asp:ListViews 的一维菜单。

谁能指出我正确的方向？

Answer 1

基本上，您会希望在您希望在导航中显示的级别（或“维度”）数量上拥有嵌套的中继器。请参阅下面的示例。

<asp:Repeater runat="server" ID="TopNavRepeater" OnItemDataBound="TopNavRepeater_OnItemDataBound">
    <ItemTemplate>
        <sc:Link runat="server" ID="sclTopLink" Field="__Display Name" />
        <asp:Repeater runat="server" ID="SecondNavRepeater" OnItemDataBound="SecondNavRepeater_OnItemDataBound">
            <ItemTemplate>
                 <sc:Link runat="server" ID="sclSecondLink" Field="__Display Name" />
            </ItemTemplate>
        </asp:Repeater>
    </ItemTemplate>
</asp:Repeater>

您将希望将每个 Item 的子项绑定到顶部中继器并将其绑定到第二个中继器。通过在 OnItemDataBound 事件上设置项目和字段，使用 Sitecore 链接控件呈现页面链接。

下面是一个粗略的例子

protected void Page_Load(object sender, EventArgs e)
{
    TopNavRepeater.DataSource = YourHomeItem.Children();
    TopNavRepeater.DataBind();
}

protected void TopNavRepeater_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        var item = e.Item.DataItem as Item;
        if (item == null)
            return;

        var sclTopLink = e.Item.FindControl("sclTopLink") as Link;
        var SecondNavRepeater = e.Item.FindControl("SecondNavRepeater") as Repeater;

        if (sclTopLink != null)
        {
            sclTopLink.Item = item;
        }

        if (SecondNavRepeater != null)
        {
            SecondNavRepeater.DataSource = item.Children;
            SecondNavRepeater.DataBind();
        }
    }
}