将多个站点地图文件与 jQuery Superfish菜单插入

分享于 

5分钟阅读

Web开发

  繁體

DynamicFishMenu

介绍

在Web表单开发中,许多开发人员几乎总是遇到动态生成的菜单问题。 在你的网络项目中实现成员身份API的一个示例场景是,每个角色必须有自己的菜单。 有很多供应商提供菜单来解决这个问题,但是为什么购买一个的套件仅仅是为了一个菜单?

背景

众所周知,微软已经在 vs 2008中支持 jQuery,而在中发布的博客,vs 将与这个库一起传送。 jQuery Plug-Ins,其中有一个是 Superfish菜单, Joel。 我使用了 Doug在 ASP.NET 2.0中使用多站点地图文件的想法,并决定使用Sitemap文件来描述菜单结构。 要加载JavaScript脚本,我使用了 Al ZabirHttpCombiner 处理程序: 用于合并多个文件的 HTTP处理程序。

使用代码

我已经使用以下标记创建了一个自定义控件:

<%@ControlLanguage="C#"AutoEventWireup="true"CodeBehind="XmlMenu.ascx.cs"Inherits="DynamicFishMenu.controls.XmlMenu"%><div><ulclass="sf-menu"><asp:RepeaterID="menuRepeater"runat="server"OnItemDataBound="menuRepeater_ItemDataBound"><ItemTemplate><li><%# getMenuNode(DataBinder.Eval(Container.DataItem, "url"),
 DataBinder.Eval(Container.DataItem, "title")) %><asp:RepeaterID="subMenuRepeater"runat="server"OnItemDataBound="menuRepeater_ItemDataBound"><ItemTemplate><%# getChildNode(DataBinder.Eval(Container.DataItem, "url"),
 DataBinder.Eval(Container.DataItem, "title"),
 DataBinder.Eval(Container.DataItem, "description"))%><asp:RepeaterID="subSubMenuRepeater"runat="server"><ItemTemplate><%# getSubChildNode(
 DataBinder.Eval(Container.DataItem, "url"),
 DataBinder.Eval(Container.DataItem, "title"),
 DataBinder.Eval(Container.DataItem, "description"))%></ItemTemplate></asp:Repeater></ItemTemplate></asp:Repeater></li></ItemTemplate></asp:Repeater></ul></div>

指出 <ul> 标记及其 class 属性值 sf-menu 是很重要的。

Important value in control

我在 XmlDataSource 控件中使用嵌套 Repeter 控件来绑定数据和填充菜单项。 和后面的代码:

publicvoid InitMenuDataSource(SiteMapMenus menu)
{
 XmlDataSource menuData = new XmlDataSource();
 menuData.EnableCaching = false;
 menuData.XPath = "siteMap/siteMapNode";
 menuData.DataFile = GetMapPath(menu);
 menuData.DataBind();
 menuRepeater.DataSource = menuData;
 menuRepeater.DataBind();
}
....string GetMapPath(SiteMapMenus menu)
{
 string serverMapPath = Server.MapPath("~");
 string path = String.Empty;
 switch (menu)
 {
 case SiteMapMenus.MenuAdmin:
 path = serverMapPath + @"mapsMenuAdmin.sitemap";
 break;
 case SiteMapMenus.MenuAcc:
 path = serverMapPath + @"mapsMenuAcc.sitemap";
 break;
 case SiteMapMenus.MenuSimple:
 path = serverMapPath + @"mapsMenuSimple.sitemap";
 break;
 default:
 break;
 }
 return path;
}

生成子菜单项有一个技巧。 对于其他信息,我使用 siteMapNodedescription-value 属性来标记开始和结束子菜单的位置。

protectedstring getSubChildNode(object url, object title, object desc)
{
 string resolvedUrl = Page.ResolveUrl(url.ToString());
 string numNode = desc.ToString();
 string link = String.Concat("<li><a href="", resolvedUrl, 
 "">", title.ToString(), "</a></li>");
 if (numNode.Equals("begin"))
 {
 returnString.Concat("<ul>", link);
 }
 elseif (numNode.Equals("end"))
 {
 returnString.Concat(link, "</ul></li>");
 }
 else {
 return link;
 }
}

下面是我们在 MainPage.Master 中的控件的标记定义。

Imarkup definition of our control in MainPage

你可以触发菜单的位置是:

protectedvoid mainMenu_PreRender(object sender, EventArgs e)
{
 mainMenu.InitMenuDataSource(SiteMapMenus.MenuAdmin);
 // comment 上面 line and uncomment below to switch menus//mainMenu.InitMenuDataSource(SiteMapMenus.MenuAcc);}

结束语

作为一个 final 结果,我们有一个灵活的导航网站和一个整洁的Superfish菜单 !

开心编码!

历史记录

  • 13 2009年月 - 第一个帖子。

文件  files  SUP  Using  菜单  Super