利用AjaxControlToolkit:Accordion做導覽列

來源:互聯網
上載者:User

         前段時間在做了一個項目,在設計時使用了SiteMap作為整個項目的導航,在做介面設計時利用第三方控制項ComponentArt來實現,這東西用起來很方便,但就是不免費,由於沒錢只能找破解的,但在使用過程中,經常出問題,被上頭批評了好幾回,也怪自己懶,不想用JS來寫,後來想起了AjaxControlToolkit有個Accordion可以收縮的,和ComponentArt的導航效果一個樣,實現也不難,現在和大家分享一下自己的這段代碼:

這是aspx代碼

<ajaxToolkit:Accordion ID="acd1" runat="server" OnItemDataBound="acd1_ItemDataBound"
    CssClass="navBar" HeaderCssClass="navHeader" AutoSize="Fill" Height="400" SelectedIndex="-1">
    <HeaderTemplate>
        <%#Eval("Title") %>
    </HeaderTemplate>
    <ContentTemplate>
        <asp:Repeater ID="rpt" runat="server" OnItemDataBound="rpt_ItemDataBound">
            <ItemTemplate>
                <div class="divlnk">
                    <asp:HyperLink ID="hlnk" CssClass="hlnk" runat="server" Text='<%#Eval("Title")%>' NavigateUrl='<%#Eval("url") %>' />
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </ContentTemplate>
</ajaxToolkit:Accordion>

這是cs代碼:protected void Page_Load(object sender, EventArgs e)
    {
        SiteMapNode node = SiteMap.RootNode;
        this.acd1.DataSource = node.ChildNodes;
        acd1.DataBind();
        int i = 0;
        foreach (SiteMapNode no in node.ChildNodes)
        {
            if (SiteMap.CurrentNode != null && SiteMap.CurrentNode.ParentNode != null && SiteMap.CurrentNode.ParentNode == no)
            {
                acd1.SelectedIndex = i;
                break;
            }
            i++;
        }
    }
    protected void acd1_ItemDataBound(object sender, AjaxControlToolkit.AccordionItemEventArgs e)
    {
        Repeater rpt = e.AccordionItem.FindControl("rpt") as Repeater;
        if (rpt != null)
        {
            SiteMapNode node = e.Item as SiteMapNode;
            if (node != null && node.ChildNodes.Count > 0)
            {
                rpt.DataSource = node.ChildNodes;
                rpt.DataBind();
            }
        }
    }
    protected void rpt_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        Image img = e.Item.FindControl("img") as Image;
        SiteMapNode node = e.Item.DataItem as SiteMapNode;
        if (node != null)
        {
            string imgUrl = node["img"]; //這在SiteMap自己加的屬性
            if (node != null && imgUrl != null)
            {
                img.ImageUrl = imgUrl;
            }
        }
    }

如果學過資料繫結控制項應可以看懂的。
說明:這段代碼只是實現二級導航,好多管理系統的後台都有類似的導航。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.