2016-08-03 48 views
3

我有menu items on master page,如果用戶點擊那個菜單項我想顯示它活躍。我想追加活動到現有的類,使其活躍。如何將活動類追加到已點擊菜單項上的現有類?

_Layout.cshtml:

<div class="menu-items-navigation"> 
    <div class="Classy-item" class="@Html.IsSelected(actions: "Index", controllers: "Classy")"> 
     <a href="@Url.Action("Index", "Classy")" > 
      <div style="padding-top: 50px;">Classy Items</div> 
     </a> 
    </div> 
    <div class="Regular-stuff"> 
     <a href="@Url.Action("Index", "RegularStuff")"> 
      <div style="padding-top: 50px;">Regular Stuff</div> 
     </a> 
    </div> 

    <div class="Popular-Vessels"> 
     <a href="@Url.Action("Index", "PopularVessels")"> 
      <div style="padding-top: 50px;">Popular Vessels</div> 
     </a> 
    </div> 
</div> 

現在,如果我想這個菜單項是Active我已經1類稱爲活動中,我想給這個div如果用戶點擊任何這3菜單項。

例如,如果我想讓它Regular Stuff as Active when user clicks那麼這將是這樣的:

<div class="Regular-stuff Active"> 

如果優等項目,然後用戶點擊:從這裏Reference採取

<div class="Classy-item Active"> 

代碼:

public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = "Active") 
     { 
      ViewContext viewContext = html.ViewContext; 
      bool isChildAction = viewContext.Controller.ControllerContext.IsChildAction; 

      if (isChildAction) 
       viewContext = html.ViewContext.ParentActionViewContext; 

      RouteValueDictionary routeValues = viewContext.RouteData.Values; 
      string currentAction = routeValues["action"].ToString(); 
      string currentController = routeValues["controller"].ToString(); 

      if (String.IsNullOrEmpty(actions)) 
       actions = currentAction; 

      if (String.IsNullOrEmpty(controllers)) 
       controllers = currentController; 

      string[] acceptedActions = actions.Trim().Split(',').Distinct().ToArray(); 
      string[] acceptedControllers = controllers.Trim().Split(',').Distinct().ToArray(); 

      return acceptedActions.Contains(currentAction) && acceptedControllers.Contains(currentController) ? 
       cssClass : String.Empty; 
     } 

但我很困惑,在這裏,如何上課這個Isselected方法當特定的菜單項將被點擊,因爲我不能在div上使用class屬性2次。

回答

3

你說得對,你不能聲明class屬性的兩倍,但你可以像這樣將它們組合起來:

<div class="Classy-item @Html.IsSelected(actions: "Index", controllers: "Classy")"> 

。如果不選擇這會使:

<div class="Classy-item "> 

或呈現此如果選擇:

<div class="Classy-item Active"> 
+0

它的工作原理。非常感謝你,想到這一點。 –

相關問題