MVC 5 Razor Navigation Active CLass

TheDizzle 发表于 Dev

眩光

我正在尝试让活动班级显示在我的导航上。我写了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>

当我在上述页面上时，导航不会激活。

拉斯·卡姆

我可以推荐以下几点：

您正在将结果@Html.IsActive()作为属性输出到<li>元素上。我认为您想将其分配给元素的类属性。
我将使用不变文化来比较控制器字符串和动作字符串，并忽略大小写，以涵盖您要成功匹配的可能字符串。
null如果控制器和操作字符串与当前控制器和操作不匹配，我将从方法中返回。如果null返回并分配给<li>元素的class属性，则class属性将不会在标记中完全输出。差异不大，但可能比类属性为空更干净。
我将方法签名中控制器和动作的顺序与它们在框架方法中出现的顺序进行匹配。从长远来看，这将使其他人更直观地使用并且不会造成混淆。

因此，应用以上所有内容

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如果您打算使用区域，则可能还需要包含一个字符串。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。