前段时间在做了一个项目,在设计时使用了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>
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;
}
}
}
{
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;
}
}
}
如果学过数据绑定控件应可以看懂的。
说明:这段代码只是实现二级导航,好多管理系统的后台都有类似的导航。