使菜单项基于 url 和查询字符串处于活动状态

Question

我的应用程序中有一些菜单项，如下所示：

1. 统计学
2. 税
3. 技能

现在，当用户单击任何菜单项时，我想使其处于活动状态，

就像用户单击统计信息时一样，我想使其处于活动状态，这就是我目前的做法，并且工作正常。

_Layout.cshtml：

<div class="Menu @Html.IsSelected(actions: "Index", controllers: "Statistics", class: "active")" ><a href="/Statistics/Index">Stats</a></div>
<div class="Menu @Html.IsSelected(actions: "Index", controllers: "Tax", class: "active")"><a href="/Tax/Index">Tax</a></div>
<div class="Menu @Html.IsSelected(actions: "Index", controllers: "Skills", class: "active")"><a href="/Skills/Index">Skills</a></div>

public static string IsSelected(this HtmlHelper html, string controllers = "", string actions = "", string cssClass = null)
        {
            ViewContext viewContext = html.ViewContext;
            bool isChildAction = viewContext.Controller.ControllerContext.IsChildAction;
            if (isChildAction)
                viewContext = html.ViewContext.ParentActionViewContext;
            RouteValueDictionary routeValues = viewContext.RouteData.Values;
            string currentAction = routeValues["action"].ToString();
            string currentController = routeValues["controller"].ToString();

            if (String.IsNullOrEmpty(actions))
                actions = currentAction;
            if (String.IsNullOrEmpty(controllers))
                controllers = currentController;
            //for passing multiple comma seperated Action.
            //For Eg:class="@Html.IsSelected(actions: "List,Detail", controllers: "Default")"
            string[] acceptedActions = actions.Trim().Split(',').Distinct().Select(t=>t.ToLower().ToString()).ToArray();
            string[] acceptedControllers = controllers.Trim().Split(',').Distinct().Select(t=>t.ToLower().ToString()).ToArray();
            return acceptedActions.Contains(currentAction.ToLower()) && acceptedControllers.Contains(currentController.ToLower()) ?
                cssClass : String.Empty;
        }

但是现在我有一个可以从统计和税务页面访问的公共页面：

排

当用户从统计转到此页面时的URL：

http://localhost:1231/Rank/Index?type=stats&Id=21

当用户从统计转到此页面时的URL：

http://localhost:1231/Rank/Index?type=Tax&Id=48

因此，我想在用户从统计页面进入排名页面时激活"统计"菜单

，并在用户从"税务"页面进入排名页面时使"税收"菜单项处于活动状态。

Answer 1

你把这种方式弄得太复杂了。试试这个：

@{ string url = null; }
@{ url = Url.Action("Index", "Statistics"); }
<div class="Menu @(url == Request.Url.AbsolutePath ? "active" : null)">
    <a href="@url">Stats</a>
</div>
@{ url = Url.Action("Index", "Tax"); }
<div class="Menu @(url == Request.Url.AbsolutePath ? "active" : null)">
    <a href="@url">Tax</a>
</div>
@{ url = Url.Action("Index", "Skills"); }
<div class="Menu @(url == Request.Url.AbsolutePath ? "active" : null)">
    <a href="@url">Skills</a>
</div>

换句话说，您只需要一个简单的三元来比较链接的 URL 和当前 URL。 使用Request.Url.AbsolutePath，以便忽略查询字符串。设置url变量只是防止多次调用Url.Action，保持干燥。

Answer 2

它很简单，就像一个把戏

1. 创建Active css并设置要显示活动状态的任何颜色。
2. 选择其中任何一个时，从所有类中删除类，获取单击的项目。 将名为 Active 的类仅添加到该元素。