在ASP.NET MVC中更改選定選項卡的圖像的最簡單方法是什麼？

Question

我見過這個問題，An easy way to set the active tab，但我不確定這是一個最佳解決方案。

我正在查看其他人如何處理ASP.NET MVC中的視圖/控制器中的選項卡選擇。

在ASP.NET MVC中實現可選標籤的最簡單方法是什麼？我想避免使用javascript方法來允許非啓用js的瀏覽器仍然可以看到選定的選項卡。

Answer 1

編輯：從頭開始，那不是我所做的，那是我使用的兩種方法的非工作組合。

我不得不在一個頁面上的兩個不同的地方處理狀態。第一種方式，我只是將CSS添加到視圖中，將選項卡更改爲正確的樣式。我必須做的第二件事是使用ViewData給我一個變量，我將其傳遞給我寫的幫助器，以便在視圖的頭部輸出CSS，以指示頁面特定的狀態（如果這樣做有道理，有點像一個類別將在產品頁面上突出顯示）。

所以，在我看來，我有這些twho行：

<% var onState = ViewData["OnState"].ToString(); %> 
<%= Html.OutputOnState(onState) %> 

這實現了我後，我很好。由於這是一個小型站點，因此CSS被硬編碼到幫助程序中，所以我確信有更好的方法來做到這一點。

Answer 2

我做類似的東西在下面簡化例子;-)

控制器：

public ActionResult Index() 
{ 
    ViewData["MainMenuOn"] = "Home"; 
    return View(); 
} 

public ActionResult About() 
{ 
    ViewData["MainMenuOn"] = "About"; 
    return View(); 
} 

public ActionResult Contact() 
{ 
    ViewData["MainMenuOn"] = "Contact"; 
    return View(); 
} 

查看：

<ul id="main-menu"> 
    <li class="<%= Html.MainMenuOn("Home") %>">... action link for home action ...</li> 
    <li class="<%= Html.MainMenuOn("About") %>">... action link for about action ...</li> 
    <li class="<%= Html.MainMenuOn("Contact") %>">... action link for contact action ...</li> 
</ul> 

助手擴展：

public static string MainMenuOn(this HtmlHelper html, string menuItem) 
{ 
    if ((html.ViewData["MainMenuOn"] != null) && (html.ViewData["MainMenuOn"] == menuItem)) 
     return "on"; 

    return ""; 
} 

然後你的CSS應該是很簡單的

ul#main-menu li 
{ 
    background: green; 
} 

ul#main-menu li.on 
{ 
    background: blue; 
} 

有很多方法根據您的需要，我將開始尋找實現的HtmlHelper擴展不同的方法對皮膚這隻貓...。

HTHs， Charles