在不使用 Treeview 控件的情况下创建分层导航

• 下载源代码 - 1.82 KB

引言

ASP.NET TreeView 控件是微软提供的分层网站导航解决方案，但不幸的是，它不太适合公共网站。因此，我们避免在公共网站中使用 ASP.NET TreeView。它依赖于过多的表格布局，需要一个表单 runat=server，并且还需要大量的ViewState。虽然这些问题都可以解决，但在本文中，我将介绍一种更简洁、更优雅的解决方案，用于您的分层网站导航。

使用代码

web.sitemap 是存储网站地图信息的理想位置。此解决方案假定您使用 web.sitemap，但可以轻松地适应其他网站地图提供程序。

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
  <siteMapNode url="default.aspx" title="Home"  description="Home Page">
      <siteMapNode url="/about/default.aspx" title="About" >
          <!--sitemap for work-->
          <siteMapNode url="/about/history/default.aspx" title="History" >
            <siteMapNode url ="/about/history/earlyyears.aspx" title ="The Early Years" />
            <siteMapNode url ="/about/history/modernday.aspx" title ="Modern Day"  />
          </siteMapNode>
          <siteMapNode url="/about/management/default.aspx" title="Management" />
          <siteMapNode url="/about/mission/default.aspx" title="Mission Statement" />
          <siteMapNode url="/about/locations/default.aspx" title="Locations" />
          <siteMapNode url="/products/default.aspx" title="Product Line"   >
            <siteMapNode url ="/products/widgetX2000.aspx" title ="Widget 2000" />
            <siteMapNode url ="/products/widgetX2005.aspx" title ="Widget 2005" />
            <siteMapNode url ="/products/widgetX5000.aspx" title ="Widget 5000 *New*" />
          </siteMapNode>
     </siteMapNode>
  </siteMapNode>
</siteMap>

为了输出您的分层导航，我建议使用 ul 和 li 标签。通过附加样式表和 JavaScript 库，为您的无序列表添加样式和行为。我建议查看 Matt Krause 的 mktree 库，它提供了一个易于实现的解决方案。这可能比拖放一些微软控件的工作量更大，但好处是您的 ASP.NET 页面将为网站访问者生成更简洁、更轻量级的代码。这就是为什么这对于公共网站来说是一个很好的解决方案。

绑定到 web.sitemap 的代码非常基础，它仅仅依赖于嵌套的 Repeater 来绑定到 XML。

<asp:XmlDataSource runat="server" DataFile="~/web.sitemap" 
     id="dsXMLSitemap"  XPath="/siteMap/siteMapNode/siteMapNode[@title='About']" />
<div id="divLeftMenu">
      <ul    id="ulLeftMenu" class="mktree">
      
        <asp:repeater DataSourceID="dsXMLSitemap" ID="dlXMLSitemap" Runat="server">
           
          <ItemTemplate>
           <li><a href="<%# XPath("@url")%>">

使用输出缓存进行优化

为了优化此代码，我建议将输出缓存添加到您的导航用户控件中。虽然渲染导航的工作量并不大，但仍然需要 I/O 和处理。此外，如果您的 web.sitemap 文件很大，将其加载到内存中以处理每次点击可能会占用大量资源。

需要进行一些小的清理

查看上面的代码，您可能会注意到标题模板和页脚模板始终输出开头和结尾的 ul 标签。因此，即使没有找到任何节点，您也会得到一个空的标签集。修复此问题的代码如下所示

public void cleanUpHeader(object source, EventArgs args)
{
    Repeater rpt = (Repeater)source;
    if (rpt.Items.Count == 0)
    {
        rpt.Visible = false;
    }
}

现在，只需在您的 Repeater 上添加一个事件处理程序。

<asp:repeater ID="Repeater1" DataSource='<%# XPathSelect("siteMapNode") %>' 
              Runat="server" OnPreRender="cleanUpHeader">

历史

• 1.0 - 发布初始文章。