web应用程序中的动态2级菜单

Question

我希望创建一个顶级的水平菜单，在它下面有一个二级水平菜单。单击顶层菜单将导致第二级菜单发生更改，基于顶层菜单。单击第二级菜单将导致页面的内容发生更改。

(顺便说一句，我希望在ASP.NET MVC中完成所有这些工作，所以如果您对这个框架有任何见解，请分享它们)。

1. 我不知道做两级菜单的最佳方法是什么，所以当用户使用顶级菜单时，页面刷新为零。(CSS菜单？javascript操作页面？两者的结合？)
2. 如何使应用程序只刷新/重定向/加载底部窗格(页面的主要内容)，而不是整个页面？默认情况下，ASP.NET MVC基本上是面向全页面的。我应该整理一下它的页面吗？

我是一个硬核服务器开发人员，正在开发他的第一个web应用程序，所以温柔点.:)

Answer 1

看看jQuery的超级鱼插件

桦树/插件/超级鱼类 -转到示例和导航栏样式

这通过构建一个html列表来工作，并使用jquery和css对其进行样式化。

<ul>
   <li><a href="">Top level item 1</a>
       <ul>
           <li><a href="">Sub item</a></li>
       </ul>
   </li>
   <li><a href="">Top level item 2</a>
       <ul>
           <li>Sub item</li>
       </ul>
   </li>
</ul>

每个项目可以/应该与控制器/动作方法相关联。然后，您必须计算出正在查看的控制器/操作，以确保为每个页面选择了正确的菜单项。

下面是我创建的menu.ascx部分视图。

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<% string menu = ViewContext.RouteData.Values["Controller"].ToString().ToLower(); %>
<% string submenu = ViewContext.RouteData.Values["Action"].ToString().ToLower(); %>

<div id="navigation">
    <ul id="menu" class="nav-menu nav-navbar">
        <% if (menu=="home") { %><li class="current"><% } else { %><li><% } %>
      <%= Html.ActionLink("Home", "Index", "Home") %>
   <ul></ul>
  </li>
  <% if (menu=="configuration") { %><li class="current"><% } else { %><li><% } %>
      <%= Html.ActionLink("Configuration", "Index", "Configuration") %>
   <ul>
       <% if (menu=="configuration" && submenu=="page") { %><li class="current"><% } else { %><li><% } %>
        <%= Html.ActionLink("Pages", "Pages", "Configuration") %>
    </li>
    <% if (menu=="configuration" && submenu=="headline") { %><li class="current"><% } else { %><li><% } %>
        <%= Html.ActionLink("Headlines", "Headlines", "Configuration") %>
    </li>
    <% if (menu=="configuration" && submenu=="file") { %><li class="current"><% } else { %><li><% } %>
        <%= Html.ActionLink("Files", "Files", "Configuration") %>
    </li>
    <% if (menu=="configuration" && submenu=="rules") { %><li class="current"><% } else { %><li><% } %>
        <%= Html.ActionLink("Application Rules", "Rules", "Configuration") %>
    </li>
   </ul>
  </li>
  ...

Answer 2

@Shachar，你在一个帖子中问了两个问题，这不是使用这个网站的最佳方式。:-)

我不知道做两级菜单的最佳方法是什么，所以当用户使用顶级菜单时，页面刷新为零。

在我的评论中，我将您与原版吸盘鱼联系起来，这已经成为一种非常常见的/可能是最常见的方法。大卫·利德尔给你看是最近使用jQuery实现的吸盘鱼；如果您已经在使用jQuery，那么这就是IMHO，当今最好的解决方案。

由于您询问的是ASP.NET MVC角度，Syncfusion有一套用于ASP.NET MVC的GUI小部件，以及使用jQuery和社区参与的Telerik正在建造一个。不确定他们中是否有人有菜单小部件..。

如何使应用程序只刷新/重定向/加载底部窗格(页面的主要内容)，而不是整个页面？默认情况下，ASP.NET MVC基本上是面向全页面的。

Hmn，我不认为ASP.NET MVC是“面向全页面的”，只是对如何做AJAX有很多不同的看法。AJAX MVC为AJAX提供了优秀的构建块，而不是完整的解决方案。

首先，你确定你想这么做吗？我认为您所指的是"AJAH“、异步JavaScript和HTML。在这篇关于AJAH的文章中：“使用真正的AJAX，对服务器进行调用，返回格式良好的数据，客户端应用程序从xml中提取数据，并替换页面上需要替换的任何元素。使用AJAH，返回一组html并将其放入页面。”

由于以下原因，AJAH今天并不经常使用：

• 与使用缓存来减少后续页面权重的更为传统的方法相比，您并没有节省大量的页面权重(字节)。
• 您没有将数据和表示分离开来，因此您的代码就不那么干净了，您也不会构建在API或SOA方法中可重用的东西。

IMHO目前的最佳使用是让高ROI页面通过AJAX加载数据集(可用性改进)和(开发和QA时间)。例如，webapp的统计部分可能作为普通页面加载(初始数据集显示用户最可能需要的图形)，并允许用户通过AJAX调用新数据来更改图形。

您还应该考虑不引人注目的Javascript。这有点难以解释，但首先是一个简单的问题：“如果用户代理不支持Javascript，怎么办？”在我上面的图表示例中，用户可能会倒霉，因为如果没有Javascript，他就无法更改图形。这里有一个很好的演示，展示了不引人注目的Javascript示例。

问题的另一面是成熟的AJAX (如GMail)，它或多或少都是使用Javascript小部件构建的。这需要很大的努力来建立..。

假设您想走AJAX路线，下面是一个使用ASP.NET MVC和jQuery的jQuery。在那之后，也许其中一本书会有所帮助？