網絡應用程序中的動態2級菜單

我期待創建一個頂級水平菜單，並在其下面有一個二級水平菜單。點擊頂級菜單會導致第二級菜單根據頂級菜單進行更改。點擊第二級菜單會導致頁面內容發生變化。我正在尋找所有這些在ASP.NET MVC，所以如果你有任何洞察特定於這個框架，請分享它們）。網絡應用程序中的動態2級菜單

我不知道什麼是應該做的二級菜單的最佳方式，所以有零頁面刷新，而用戶與頂級菜單播放。（CSS菜單？JavaScript操縱頁面？兩者的結合？）
我該如何使應用程序刷新/重定向/只加載底部窗格（頁面的主要內容），而不是整個頁面？默認情況下，ASP.NET MVC幾乎是全頁面的。我應該製作網頁嗎？

我是一個硬核服務器開發者在他的第一個Web應用程序的工作，所以，請溫柔... :)

來源

2009-11-01 Shachar

如果您想要在網站中瀏覽整個頁面，則必須考慮那些想通過URL /書籤直接訪問特定頁面的用戶。搜索引擎索引也是如此。你確定要這麼做嗎？ – 2009-11-01 11:26:26

我從來沒有提到過AJAX，並且有一個很好的理由 - 我不需要這個在真正的意義上是動態的。菜單內容是靜態的，頁面是由ASP.NET MVC生成的視圖。 – Shachar 2009-11-01 12:27:59

@Shachar：關於菜單，你確定AJAX將會過度。但是由於IE6的限制，你需要使用Javascript，請參閱http://www.alistapart.com/articles/dropdowns – 2009-11-01 13:58:58

看看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> 
    ...

來源

2009-11-01 13:07:55 David

@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可能會有所幫助？

來源

2009-11-01 15:02:23

@ jesper.mortensen，我已經接受@David的答案，因爲它的準確性和正確性。然而，我想感謝您花時間撰寫這樣一個詳細而深思熟慮的答案！ – Shachar 2009-11-01 18:37:34

網絡應用程序中的動態2級菜單

回答

相關問題