MVC 5 Razor活动导航选项卡 [英] MVC 5 Razor Active Navigation Tab

问题描述

我一直在尝试突出显示项目中的活动导航"选项卡.我的任务是在不更改引导程序的情况下更新较旧的网站(这是我的经验所在).我找到了一个满足我大部分需求的示例.现在，唯一具有选定类"的选项卡是主页"选项卡.当我单击另一个选项卡时，主页"选项卡不再突出显示，而当前选项卡则不突出显示.当我检查元素时，主页"选项卡仍然具有选定的类别"属性.不知道该怎么办.

I have been trying to highlight the Active navigation tab on my project. I was tasked on updating an older website without changing to bootstrap(which is where my experience is). I found an example that had most of what I needed. Right now the only Tab that has the "selected class" is the Home tab. When I click on another tab the Home tab is no longer highlighted but the current tab is not. When I inspect the element the Home tab still has the "selected class" attribute. Not sure what to do.

_Layout

        <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类

HtmlHelper Class

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;
}

推荐答案

您的辅助方法正在查看当前控制器和操作是否与您要传递的值匹配，但是您要同时将操作名称作为两个参数传递.从您的代码片段来看，您的所有操作似乎都在HomeController上，因此请尝试使用以下方法替换视图:

Your helper method is looking to see if the current controller and action match the values you're passing in, but you're passing the action's name as both arguments. From your code snippet it looks like all your actions are on your HomeController, so try replacing your view with this:

    <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>

这篇关于MVC 5 Razor活动导航选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！