利用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。

public static class BootstrapMenuExtensions
{
    public static MvcHtmlString RenderBootstrapMenu(this HtmlHelper helper, string siteMapProviderName = "")
    {
        SiteMapProvider siteMapProvider = !string.IsNullOrEmpty(siteMapProviderName) ?
            SiteMap.Providers[siteMapProviderName] :
            SiteMap.Provider ?? SiteMap.Providers.Cast<SiteMapProvider>().First();
        return new MvcHtmlString( RenderMenu(siteMapProvider.RootNode.ChildNodes));
    }

    private static string RenderMenu(SiteMapNodeCollection siteMapNodes)
    {
        TagBuilder ul = new TagBuilder("ul");
        ul.AddCssClass("nav");
        ul.AddCssClass("nav-pills");

        foreach (SiteMapNode node in siteMapNodes)
        {
            ul.InnerHtml += GetMenuItemHtml(node);
        }
        return ul.ToString();
    }

    private static string GetMenuItemHtml(SiteMapNode siteMapNode)
    {
        TagBuilder li = new TagBuilder("li");
        li.AddCssClass("dropdown");

        TagBuilder link = new TagBuilder("a");
        link.Attributes.Add("href", siteMapNode.Url);
        link.Attributes.Add("title", siteMapNode.Description);
        link.SetInnerText(siteMapNode.Title);

        if (!siteMapNode.HasChildNodes)
        {
            li.InnerHtml += link.ToString();
            return li.ToString();
        }

        link.AddCssClass("dropdown-toggle");
        link.Attributes.Add("data-toggle", "dropdown");
        TagBuilder caret = new TagBuilder("b");
        caret.AddCssClass("caret");
        link.InnerHtml += caret.ToString();

        TagBuilder ul = new TagBuilder("ul");
        ul.AddCssClass("dropdown-menu");
        foreach (SiteMapNode node in siteMapNode.ChildNodes)
        {
            ul.InnerHtml += GetSubItemHtml(node);
        }
        li.InnerHtml += link.ToString();
        li.InnerHtml += ul.ToString();
        return li.ToString();
    }

    private static string GetSubItemHtml(SiteMapNode siteMapNode)
    {
        TagBuilder li = new TagBuilder("li");

        TagBuilder link = new TagBuilder("a");
        link.Attributes.Add("href", siteMapNode.Url);
        link.Attributes.Add("title", siteMapNode.Description);
        link.SetInnerText(siteMapNode.Title);
        li.InnerHtml += link.ToString();

        if (siteMapNode.HasChildNodes)
        {
            link.AddCssClass("dropdown-toggle");
            link.Attributes.Add("data-toggle", "dropdown");

            li.AddCssClass("dropdown-submenu");
            TagBuilder ul = new TagBuilder("ul");
            ul.AddCssClass("dropdown-menu");
            foreach (SiteMapNode node in siteMapNode.ChildNodes)
            {
                ul.InnerHtml += GetSubItemHtml(node);
            }
            li.InnerHtml += ul.ToString();
        }
        return li.ToString();
    }
}

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

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="Root" title="Root"  description="">
    <siteMapNode url="A1" title="A1"  description="1st Level 1" />
    <siteMapNode url="A2" title="A2"  description="1st Level 2" />
    <siteMapNode url="A3" title="A3"  description="1st Level 3">
      <siteMapNode url="B1" title="B1"  description="2nd Level 1" />
      <siteMapNode url="B2" title="B2"  description="2nd Level 2" />
      <siteMapNode url="B3" title="B3"  description="2nd Level 3">
        <siteMapNode url="C1" title="C1"  description="3rd Level 1" />
        <siteMapNode url="C2" title="C2"  description="3rd Level 2" />
        <siteMapNode url="C3" title="C3"  description="3rd Level 3" />
      </siteMapNode>
    </siteMapNode>
  </siteMapNode>
</siteMap>

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

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Menu</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <div>
        @Html.RenderBootstrapMenu()
    </div>
</body>
</html>

最终呈现的效果如下所示：

菜单对应的HTML为：

<ul class="nav-pills nav">
    <li class="dropdown"><a href="/A1" title="1st Level 1">A1</a></li>
    <li class="dropdown"><a href="/A2" title="1st Level 2">A2</a></li>
    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="/A3" title="1st Level 3">A3<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="/B1" title="2nd Level 1">B1</a></li>
            <li><a href="/B2" title="2nd Level 2">B2</a></li>
            <li class="dropdown-submenu"><a href="/B3" title="2nd Level 3">B3</a>
                  <ul class="dropdown-menu">
                       <li><a href="/C1" title="3rd Level 1">C1</a></li>
                       <li><a href="/C2" title="3rd Level 2">C2</a></li>
                       <li><a href="/C3" title="3rd Level 3">C3</a></li>
                  </ul>
            </li>
        </ul>
    </li>
</ul>