MVC 5 Razor 活动导航选项卡答案

【问题标题】：MVC 5 Razor Active Navigation TabMVC 5 Razor 活动导航选项卡
【发布时间】：2014-07-25 04:27:46
【问题描述】：

我一直在尝试突出显示我的项目中的活动导航选项卡。我的任务是在不更改引导程序的情况下更新旧网站（这是我的经验所在）。我找到了一个包含我需要的大部分内容的示例。现在唯一具有“选定类”的选项卡是主页选项卡。当我单击另一个选项卡时，主页选项卡不再突出显示，但当前选项卡不是。当我检查元素时，主页选项卡仍然具有“选定的类”属性。不知道该怎么办。

_布局

        <ul id="navigation">
            <li class="@Html.ActivePage("Home", "Index")">@Html.ActionLink("Home", "Index", "Home")</li>
            <li class="@Html.ActivePage("About", "About")">@Html.ActionLink("About", "About", "Home")</li>
            <li class="@Html.ActivePage("Products", "Products")">@Html.ActionLink("Products", "Products", "Home")</li>
            <li class="@Html.ActivePage("Services", "Services")">@Html.ActionLink("Services", "Services", "Home")</li>
            <li class="@Html.ActivePage("Contact", "Contact")">@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>

HtmlHelper 类

public static class HtmlHelperExtensions
{
    public static string ActivePage(this HtmlHelper helper, string controller, string action)
    {
        string classValue = "";

        string currentController = helper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString();
        string currentAction = helper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString();

        if (currentController == controller && currentAction == action)
        {
            classValue = "selected";
        }

        return classValue;
    }
}

CSS

ul#navigation li {
    list-style: none;
    float: left;
    position: relative;
    background: url(../images/mi-standby.gif) no-repeat left top;
    padding-left: 3px;
    margin-left: 6px;
}

ul#navigation a {
    float: left;
    display: block;
    background: url(../images/mi-standby.gif) no-repeat right top;
    padding: 10px 29px 6px 26px;
    text-decoration: none;
    font-weight: bold;
    font-size: .8em;
    color: #a6a6a6;
}

ul#navigation li.selected a {
    background: url(../images/mi-active.gif) no-repeat right top;
    color: #FFF;
}

ul#navigation li.selected {
    background: url(../images/mi-active.gif) no-repeat left top;
    color: #FFF;
}

ul#navigation li a:active {
    background-color: #ff0000;
    text-decoration: none;
    color: #ffffff;
}

【问题讨论】：

标签： c# css asp.net-mvc razor

【解决方案1】：

您的辅助方法正在查看当前控制器和操作是否与您传入的值匹配，但您将操作的名称作为两个参数传递。从您的代码 sn-p 看来，您的所有操作都在 HomeController 上，因此请尝试将您的视图替换为：

    <ul id="navigation">
        <li class="@Html.ActivePage("Home", "Index")">@Html.ActionLink("Home", "Index", "Home")</li>
        <li class="@Html.ActivePage("Home", "About")">@Html.ActionLink("About", "About", "Home")</li>
        <li class="@Html.ActivePage("Home", "Products")">@Html.ActionLink("Products", "Products", "Home")</li>
        <li class="@Html.ActivePage("Home", "Services")">@Html.ActionLink("Services", "Services", "Home")</li>
        <li class="@Html.ActivePage("Home", "Contact")">@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>

【讨论】：