在MVC运行时采用CSS类菜单项 [英] applying css class to menu item at run time in mvc

问题描述

我工作的MVC4应用

我有以下菜单项

<ul class="menu left">
                <li>@Html.ActionLink("Home", "Index", new { Controller = "Home" }, new { @class = "active" })</li>
                <li>@Html.ActionLink("About Us", "About", new { Controller = "Home" })</li>
                <li>@Html.ActionLink("Services", "Services", new { Controller = "Home" })</li>      
                <li>@Html.ActionLink("Post Job", "Create", new { Controller = "JobPosting" })</li>
                <li>@Html.ActionLink("Job Search", "Index", new { Controller = "JobPosting" })</li>
                <li>@Html.ActionLink("Contact Us", "Contact", new { Controller = "Home" })</li>
           </ul>

现在我想，如果我点击首页相比其他项目，它的CSS类变为主动。
基本上，我只是想改变的菜单项的颜色
我怎样才能动态地使这个？

Now I want if I click on Items other than Home, its css-class changes to active. Basically I just want to change the color of the menu-item How can I make this dynamically?

推荐答案

如果你想改变的基础上的操作或者控制器可以使用CSS

If you want to change the css based on Action or Controller you can use

@{
    var controller = ViewContext.RouteData.Values["Controller"].ToString();
    var action = ViewContext.RouteData.Values["Action"].ToString();
}

<li> 
    @if (action == "Home") { 
       @Html.ActionLink("Home", "Index", new { Controller = "Home" },new {@class="active" })
    }
    else {
       @Html.ActionLink("Home", "Index", new { Controller = "Home" })
    }
</li>
<li>
   @if (action == "About Us") { 
           @Html.ActionLink("About Us", "About", new { Controller = "Home" },new {@class="active" })
        }
        else {
           @Html.ActionLink("About Us", "About", new { Controller = "Home" })
        }
</li>

等等......

etc...

这篇关于在MVC运行时采用CSS类菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！