利用AjaxControlToolkit:Accordion做导航栏

         前段时间在做了一个项目,在设计时使用了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;
            }

        }

    }

如果学过数据绑定控件应可以看懂的。
说明:这段代码只是实现二级导航,好多管理系统的后台都有类似的导航。

你可能感兴趣的:(accordion)