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

Question

我期待创建一个顶级水平菜单，并在其下面有一个二级水平菜单。点击顶级菜单会导致第二级菜单根据顶级菜单进行更改。点击第二级菜单会导致页面内容发生变化。我正在寻找所有这些在ASP.NET MVC，所以如果你有任何洞察特定于这个框架，请分享它们）。

1. 我不知道什么是应该做的二级菜单的最佳方式，所以有零页面刷新，而用户与顶级菜单播放。 （CSS菜单？JavaScript操纵页面？两者的结合？）

2. 我该如何使应用程序刷新/重定向/只加载底部窗格（页面的主要内容），而不是整个页面？默认情况下，ASP.NET MVC几乎是全页面的。我应该制作网页吗？

我是一个硬核服务器开发者在他的第一个Web应用程序的工作，所以，请温柔... :)

Answer 1

看看jQuery的快鱼插件

http://users.tpg.com.au/j_birch/plugins/superfish - 去示例和导航栏样式

这通过建立一个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，你在一篇文章中提出2个问题，这不是使用本网站的最佳方式。 :-)

我不确定双层菜单的最佳做法是什么，因此在用户使用顶层菜单进行播放时，页面刷新率为零。

在我的评论中，我已将您链接到original Suckerfish article，这已成为一种非常常见的/也许是最常见的做法。 David Liddle showed you使用jQuery更近期实现的Suckerfish;如果你已经使用jQuery，那么这是恕我直言，今天是最好的解决方案。

由于您提到的是ASP.NET MVC的角度，Syncfusion的ASP.NET MVC包含GUI widgets，而使用jQuery和社区参与的包含Telerik is building one。不知道他们中是否有菜单窗口小部件还没有...

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

Hmn，我不认为ASP.NET MVC是“整页面向”的，关于如何做AJAX有很多不同的意见。 ASP。NET MVC为您提供AJAX的优秀构建模块，而不是完整的解决方案。

首先，你确定要这样做吗？我认为你所指的是“AJAH”，异步JavaScript和HTML。从this article about AJAH：“使用真正的AJAX，调用服务器，返回格式良好的数据，客户端应用程序从xml中提取数据，并替换页面上需要替换的任何元素。使用AJAH，glob的html被返回并打入页面。“

AJAH不使用，往往今天，有以下原因：

• 你不保存比使用高速缓存到一个更传统的方法页面权重（字节）的显著量减少后续的页面权重。
• 您不会分离数据和表示，因此您的代码不够干净，而且您未构建可在以后的API或SOA方法中重用的内容。

恕我直言，最好使用AJAX的，现在，关于（可用性改进）与（开发和QA时间）要求，就是让高投资回报率的网页通过AJAX加载数据集。例如，Web应用程序的统计部分可能会作为普通页面加载（初始数据集显示用户最可能想要的图形），并允许用户通过AJAX调用来更改图形以获取新数据。

恕我直言，你还应该考虑unobtrusive Javascript。这是很难解释的，但它从一个简单的问题开始：“如果用户代理不支持Javascript？”。在我上面的图表示例中，用户会很失败，因为他不能在没有Javascript的情况下更改图形。这是一个很好的演示文稿，显示unobtrusive Javascript examples。

硬币的另一面是成熟的AJAX（如GMail），其中或多或少都是使用Javascript UI小部件构建的。这需要付出相当大的努力...

假设你想要去AJAX路线，这里是一个使用ASP.NET MVC和jQuery的short introduction to AJAX。之后，或许one of these books可能会有所帮助？