ASP.NET 菜单和 CSS？答案

【问题标题】：ASP.NET menus and CSS?ASP.NET 菜单和 CSS？
【发布时间】：2010-10-08 19:25:10
【问题描述】：

我有一种感觉，在 ASP.NET 中使用 Sitemap 不利于 CSS。我在哪里格式化菜单看起来像 CSS 可以使它看起来。 mu ul 和 li's 在哪里？

...初学者，如果在我的眼皮底下，请原谅我。

【问题讨论】：

如果您想非常精细地控制生成的 HTML，最好使用中继器。我在答案中添加了示例。

标签： asp.net menu css-selectors

【解决方案1】：

为什么不直接使用带有 ul's 和 li's 的 CSS 菜单？ ASP.NET 中没有规定必须使用 Web 控件，普通的 HTML 也可以正常工作（可能更好）。

【讨论】：

我有点担心，如果我只使用 CSS，那么我会错过 SiteMap 功能的简单性——显然我不是。我想我会用 CSS 试试。
WebForm 的控件通常的问题是它们做简单的事情很简单，很难做一些不太简单的事情。做复杂的事情真是令人沮丧。

【解决方案2】：

使用站点地图显示菜单和面包屑时非常有用。

您可以阅读一些有关如何完成此操作的教程，例如 this。如果你想生成纯UL/LI建议你阅读this post

How Do I: Implement Site Navigation in ASP.NET? 上总有 ASP.NET 视频教程

试试吧，也可以使用CSS Friendly Adapters（这就是它们的用途）——还有video tutorial。

希望对你有帮助

【讨论】：

+1 用于 CSS 友好适配器 - 如果您想使用更面向 CSS 的做事方式，这些是要走的路 - 事实上，这些将成为 ASP.NET 4.0 的一部分框架，而不是单独下载。
长时间等待功能:)

【解决方案3】：

要完全控制菜单，您可以使用中继器并将其绑定到您的 Web.SiteMap。

<asp:Repeater ID="MenuRepeater" DataSourceID="SiteMapDataSource1" runat="server">
  <ItemTemplate>
    <li>
      <a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
    </li>
  </ItemTemplate>
</asp:Repeater>

如果您想要做 CSS 下拉菜单，那么只需添加一个嵌套的中继器。

<asp:Repeater ID="MenuRepeater" DataSourceID="SiteMapDataSource1" runat="server" EnableViewState="false">
  <ItemTemplate>
    <li>
      <a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
      <ul>
        <asp:Repeater ID="DropDownRepeater" DataSource='<%#Container.DataItem.ChildNodes()%>' runat="server">
          <ItemTemplate>
            <li>
              <a href='<%#Eval("url")%>'><%#Eval("Title")%></a>
            </li>
          </ItemTemplate>
        </asp:Repeater>
      </ul>
    </li>
  </ItemTemplate>
</asp:Repeater>

因此，您将获得所需的 CSS 菜单，并且仍然可以使用您的 Web.SiteMap。

【讨论】：

虽然只会给你两个级别。最好写一些递归函数。

【解决方案4】：

您可以将 SiteMapDataSource 与Repeater 结合使用，从而生成标准的<ul><li> 菜单列表。您甚至可以将自己的属性添加到 web.sitemap 文件中，例如为菜单项指定图像...

【讨论】：

【解决方案5】：

teknohippy 关于使用中继器的建议很棒！

但是，行

    <asp:Repeater ID="DropDownRepeater" DataSource='<%#Container.DataItem.ChildNodes()%>' runat="server">

不正确。应该是

    <asp:Repeater ID="Repeater1" runat="server" DataSource='<%# ((SiteMapNode) Container.DataItem).ChildNodes %>'>

为了工作。

在这个优秀的教程中提供了详细信息：

http://msdn.microsoft.com/en-us/library/aa581781.aspx

【讨论】：