MVC 5 Razor Navigation Active CLass

Question

我想让我的导航显示活动课程.我写了htmlhelper:

public static string IsActive(this HtmlHelper htmlHelper, string controller, string action)
    {
        var routeData = htmlHelper.ViewContext.RouteData;

        var routeAction = routeData.Values["action"].ToString();
        var routeController = routeData.Values["controller"].ToString();

        var returnActive = (controller == routeController && action == routeAction);

        return returnActive ? "active" : "";
    }

这是我的导航:

<li @Html.IsActive("MemberDashboard", "Index")><a href="@Url.Action("Index", "MemberDashboard")"><span class="fa fa-list-alt fa-lg fa-fw"></span> Accounts</a></li>
 <li @Html.IsActive("Transfer", "Index")><a href="@Url.Action("Index", "Transfer")"><span class="fa fa-retweet fa-lg fa-fw"></span> Transfers</a></li>

当我在页面上时,导航不会激活.

Answer 1

这里有一些我可以推荐的东西:

1. 您正在输出元素@Html.IsActive()的属性结果<li>.我想你想把它分配给元素的类属性.

2. 我会使用不变文化比较控制器和操作字符串,并忽略大小写以覆盖您想要成功匹配的可能字符串.

3. null如果控制器和操作字符串与当前控制器和操作不匹配,我将从方法返回.如果null返回并分配给<li>元素的class属性,那么标记中根本不会输出class属性.差别很小,但可能比空类属性更清晰.

4. 我会将方法签名中的控制器和操作的顺序与它们在框架方法中出现的顺序相匹配.对于其他人来说,这将更直观,从长远来看也不会让人感到困惑.

所以,应用以上所有内容

public static string IsActive(this HtmlHelper htmlHelper, string action, string controller)
{
    var routeData = htmlHelper.ViewContext.RouteData;

    var routeAction = (string)routeData.Values["action"];
    var routeController = (string)routeData.Values["controller"];

    var isActive = string.Equals(controller, routeController, StringComparison.InvariantCultureIgnoreCase)
                   && string.Equals(action, routeAction, StringComparison.InvariantCultureIgnoreCase);

    return isActive ? "active" : null;
} 

和用法

<li class="@(Html.IsActive("Index", "MemberDashboard"))">
    <a href="@Url.Action("Index", "MemberDashboard")">
        <span class="fa fa-list-alt fa-lg fa-fw"></span> Accounts
    </a>
</li>
<li class="@(Html.IsActive("Index", "Transfer"))">
    <a href="@Url.Action("Index", "Transfer")">
        <span class="fa fa-retweet fa-lg fa-fw"></span> Transfers
    </a>
</li>

area如果您计划使用区域,也可能还需要包含字符串.