当前位置: 首页>Bootstrap>利用ASP.NET SiteMap生成与Bootstrap兼容菜单

利用ASP.NET SiteMap生成与Bootstrap兼容菜单

时间:2015-07-08 18:44 来源:网络整理 作者:KKWL 点击:
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。本文提供了一个解决方案利用ASP.NET SiteMap生成与Bootstrap兼

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。本文提供了一个解决方案利用ASP.NET SiteMap生成与Bootstrap“兼容”的菜单。具体的原理很简单,就是利用SiteMap读取预先定义的网站结构,按照Bootstrap的标准生成相应的HTML。[源代码从这里下载]

我们将基于菜单的呈现定义在HtmlHelper的扩展方法中。如下面的代码片断,扩展方法RenderBootstrapMenu具有一个缺省的参数siteMapProviderName ,表示读取SiteMap结构采用的SiteMapProvider的配置名称。在该方法中,我们通过指定的SiteMapProvider(如果没有指定,则采用默认配置的SiteMapProvider)得到代表整个SiteMap根节点的SiteMapNode对象,并将其子节点(以及子节点的子节点,…)转换成相应的HTML。

BootstrapMenuExtensions 2: { MvcHtmlString RenderBootstrapMenu(this HtmlHelper helper, string siteMapProviderName = "") 4: { 5: SiteMapProvider siteMapProvider = !string.IsNullOrEmpty(siteMapProviderName) ? 6: SiteMap.Providers[siteMapProviderName] : 7: SiteMap.Provider ?? SiteMap.Providers.Cast<SiteMapProvider>().First(); MvcHtmlString( RenderMenu(siteMapProvider.RootNode.ChildNodes)); 9: } 10:  RenderMenu(SiteMapNodeCollection siteMapNodes) 12: { 13: TagBuilder ul = new TagBuilder("ul"); 14: ul.AddCssClass("nav"); 15: ul.AddCssClass("nav-pills"); 16:  17: foreach (SiteMapNode node in siteMapNodes) 18: { 19: ul.InnerHtml += GetMenuItemHtml(node); 20: } 21: return ul.ToString(); 22: } 23:  GetMenuItemHtml(SiteMapNode siteMapNode) 25: { 26: TagBuilder li = new TagBuilder("li"); 27: li.AddCssClass("dropdown"); 28:  29: TagBuilder link = new TagBuilder("a"); 30: link.Attributes.Add("href", siteMapNode.Url); 31: link.Attributes.Add("title", siteMapNode.Description); 32: link.SetInnerText(siteMapNode.Title); 33:  34: if (!siteMapNode.HasChildNodes) 35: { 36: li.InnerHtml += link.ToString(); 37: return li.ToString(); 38: } 39:  40: link.AddCssClass("dropdown-toggle"); 41: link.Attributes.Add("data-toggle", "dropdown"); 42: TagBuilder caret = new TagBuilder("b"); 43: caret.AddCssClass("caret"); 44: link.InnerHtml += caret.ToString(); 45:  46: TagBuilder ul = new TagBuilder("ul"); 47: ul.AddCssClass("dropdown-menu"); 48: foreach (SiteMapNode node in siteMapNode.ChildNodes) 49: { 50: ul.InnerHtml += GetSubItemHtml(node); 51: } 52: li.InnerHtml += link.ToString(); 53: li.InnerHtml += ul.ToString(); 54: return li.ToString(); 55: } 56:  GetSubItemHtml(SiteMapNode siteMapNode) 58: { 59: TagBuilder li = new TagBuilder("li"); 60:  61: TagBuilder link = new TagBuilder("a"); 62: link.Attributes.Add("href", siteMapNode.Url); 63: link.Attributes.Add("title", siteMapNode.Description); 64: link.SetInnerText(siteMapNode.Title); 65: li.InnerHtml += link.ToString(); 66:  67: if (siteMapNode.HasChildNodes) 68: { 69: link.AddCssClass("dropdown-toggle"); 70: link.Attributes.Add("data-toggle", "dropdown"); 71:  72: li.AddCssClass("dropdown-submenu"); 73: TagBuilder ul = new TagBuilder("ul"); 74: ul.AddCssClass("dropdown-menu"); 75: foreach (SiteMapNode node in siteMapNode.ChildNodes) 76: { 77: ul.InnerHtml += GetSubItemHtml(node); 78: } 79: li.InnerHtml += ul.ToString(); 80: } 81: return li.ToString(); 82: } 83: }

假设我们采用XmlSiteMapProvider,SiteMap结构通过如下的XML来定义,整个结构具有三个层次。

?>

在如下一个View中,我们调用扩展方法RenderBootstrapMenu将由上面这个XML定义的菜单节点呈现出来。

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------