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

发布时间：2020-12-16 09:05:52 所属栏目：asp.Net 来源：网络整理

导读：Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。本文提供了一个解决方案利用ASP.NET SiteMap生成与Bootstrap“兼容”的菜单。具体的原理很简单，就是利用SiteMap读取

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。

   1: public static class BootstrapMenuExtensions

   3:     static MvcHtmlString RenderBootstrapMenu(this HtmlHelper helper,string siteMapProviderName = "")

   5:         SiteMapProvider siteMapProvider = !string.IsNullOrEmpty(siteMapProviderName) ?

   7:             SiteMap.Provider ?? SiteMap.Providers.Cast<SiteMapProvider>().First();

   9:     }

  11:     private string RenderMenu(SiteMapNodeCollection siteMapNodes)

  13:         TagBuilder ul = new TagBuilder("ul");

  15:         ul.AddCssClass("nav-pills");

  17:         foreach (SiteMapNode node in siteMapNodes)

  19:             ul.InnerHtml += GetMenuItemHtml(node);

  21:         return ul.ToString();

  23:?

  25:     {

  27:         li.AddCssClass("dropdown");

  29:         TagBuilder link = "a");

  31:         link.Attributes.Add("title",siteMapNode.Description);

  33:?

  35:         {

  37:             return li.ToString();

  39:?

  41:         link.Attributes.Add("data-toggle",1)" id="lnum42">  42:         TagBuilder caret = "b");

  44:         link.InnerHtml += caret.ToString();

  46:         TagBuilder ul = "ul");

  48:         in siteMapNode.ChildNodes)

  50:             ul.InnerHtml += GetSubItemHtml(node);

  52:         li.InnerHtml += link.ToString();

  54:         return li.ToString();

  56:?

  58:     {

  60:?

  65:         li.InnerHtml += link.ToString();

  67:         if (siteMapNode.HasChildNodes)

  69:             link.AddCssClass("dropdown-toggle");

  71:?

  73:             TagBuilder ul =   74:             ul.AddCssClass("dropdown-menu");

  76:             {

  78:             }

  80:         }

  83: }

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

   2: <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

   5:     ="A2" ="A2"  ="1st Level 2" />

<!DOCTYPE html<   3: head>Bootstrap Menu</link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />

   9:     script type="text/javascript" src="bootstrap/js/bootstrap.js">script  10:     div  11:         @Html.RenderBootstrapMenu()

ul class="nav-pills nav"   2:     li ="dropdown"><a href="/A1" ="1st Level 1">A1a></li="/A2" ="1st Level 2">A2="dropdown-toggle" data-toggle="dropdown" ="/A3" >A3b ="caret"b   5:         ="dropdown-menu"   6:             ="/B1" ="2nd Level 1">B1   7:             ="/B2" ="2nd Level 2">B2   8:             ="dropdown-submenu"="/B3" >B3   9:                     10:??????????????????????? ="/C1" ="3rd Level 1">C1  11:                        ="/C2" ="3rd Level 2">C2  12:                        ="/C3" ="3rd Level 3">C3  13:                   ul  14:               15:           16:       17: >

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

利用ASP.NET SiteMap生成与Bootstrap&#34;兼容&#34;菜单

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