asp.net mvc和css：菜單選項卡保持高亮選擇

Question

有沒有更好的方法來做到這一點？

我有一個HTML助手擴展方法，用於檢查當前選項卡菜單是否爲選定的選項，然後選擇.selected css類或不是。我把每個L1的html.IsSelected的環節

<li class="<%=Html.IsSelected(string a, string b)%>" > 

其中a是標籤名稱和b是ViewData的分配。

這是乾淨的還是有更好的方法？

Answer 1

如果您可以使用javascript解決方案，請查看jQuery UI Accordion插件如何處理此問題。基本上，您可以通過在加載頁面時檢查請求URL來選擇基於控制器的高亮選項卡。

或者，您可以爲與選項卡的類值對應的每個選項卡設置ViewBag項目。將當前選項卡的值設置爲活動的CSS類，其他值爲空（或其默認值）。然後您可以使用：

<li id="HomeTab" class="<%= ViewBag.HomeTabClass %>" /> 
<li id="OtherTab" class="<%= (string)ViewBag.OtherTabClass %>" /> 

在您的控制器中，您將爲ViewData變量設置適當的值。

ViewBag.HomeTabClass = "tab activeTab"; 
ViewBag.OtherTabClass = "tab"; 

Answer 2

你也可以看看以前的建議：

An easy way to set the active tab using controllers and a user control in ASP.NET MVC?

Answer 3

這種方法我用我的項目之一，是相當不錯的。我在每個控制器中分配了ViewData [「Home」] =「activeTab」類，並在視圖中使用空字符串的默認值，如下所示。如果該viewData字典的值被採用，這將使選項卡激活。很簡單，很乾淨。

您的家庭控制器看起來就像這樣：

 ViewData["Home"] = "activeTab"; 

     return View("Index"); 
    } 

的觀點看起來就像這樣：

<li class="<%= ((string)ViewData["Home"] ?? "") %>"><%= Html.ActionLink("Home", "Index", "Home")%></li> 
<li class="<%= ((string)ViewData["About"] ?? "") %>"><%= Html.ActionLink("About", "About", "Home")%></li> 

Answer 4

我試圖得到這個沒有運氣的工作。

你的CSS看起來像什麼？礦在下面。

.activeTab { background：#FFFFFF; color：＃000000; }

我用這與主頁面，而不是主視圖，不知道如果這是影響它。