如何在 MVC ASP.NET 将"active"类添加到 Html.ActionLink

Question

我有这样的_layout.cshtml

<ul class="sidebar-menu tree" data-widget="tree">
<li class="header" style="color:white;font-weight:bold;">Test Menu</li>
<li>
<a href="@Url.Action("Index","Monney")">
<i class="fa fa-dashboard"></i> <span>Monney</span>
</a>
</li>
<li>
<a href="@Url.Action("Index","Bank")">
<i class="fa fa-dashboard"></i> <span>Bank</span>
</a>
</li>
<li>
<a href="@Url.Action("Index","User")">
<i class="fa fa-dashboard"></i> <span>User</span>
</a>
</li>
</ul>

我正在尝试在 MVC 中的sidebar-menu中激活时向li添加一个"active"class。

我该怎么做？

Answer 1

首先，如果您单击特定链接，您的页面将被刷新，并且如果您使用 jQuery，活动类将被删除。 所以你需要使用Viewbag来管理它。

您需要在每个操作中定义控制器中的值。

// let say you have User controller
public ActionResult Index()
{
ViewBag.data = "user";
return View();
}

在您的布局中，您需要检查该 Viewbag 的值

<ul class="sidebar-menu tree" data-widget="tree">
<li class="header" style="color:white;font-weight:bold;">Test Menu</li>
<li id="money">
<a href="@Url.Action("Index","Monney")">
<i class="fa fa-dashboard"></i> <span>Monney</span>
</a>
</li>
<li id="bank">
<a href="@Url.Action("Index","Bank")">
<i class="fa fa-dashboard"></i> <span>Bank</span>
</a>
</li>
<li id="user">
<a href="@Url.Action("Index","User")">
<i class="fa fa-dashboard"></i> <span>User</span>
</a>
</li>
</ul>
<script>
$(document).ready(function () {
if ('@ViewBag.data' != null)
{
$('#' + '@ViewBag.data').addClass('active');
}
});
</script>

Answer 2

您可以使用另一种方式并动态处理。

创建一个帮助程序类，在里面添加以下方法

public static  class HtmlExtension
{
public static string IsActive(this IHtmlHelper html, string controller = null, string action = null, string cssClass = null)
{
if (String.IsNullOrEmpty(cssClass))
cssClass = "active";
string currentAction = (string)html.ViewContext.RouteData.Values["action"];
string currentController = (string)html.ViewContext.RouteData.Values["controller"];
if (String.IsNullOrEmpty(controller))
controller = currentController;
if (String.IsNullOrEmpty(action))
action = currentAction;
return controller.ToLower().Split(',').Contains(currentController.ToLower()) && action.ToLower().Split(',').Contains(currentAction.ToLower()) ?
cssClass : String.Empty;
}
}

在 cshtml 中，您需要更改

<ul class="sidebar-menu tree" data-widget="tree">
<ul id="nav" class="sf-menu">
<li class="@Html.IsActive("GameVideos", "Index")"><a href="@Url.Action("Index", "GameVideos")">videogame</a></li>                                
<li class="@Html.IsActive("SystemRequirements", "Index")"><a href="@Url.Action("Index", "SystemRequirements")">systemReq</a></li>
<li class="@Html.IsActive("Games", "UpcommingGames,Details”)”><a href="@Url.Action("UpcommingGames”, "Games")">upcomming game</a></li>
</ul>
</nav>

在 web.config 中注册帮助程序以进行全局访问。

<system.web.webPages.razor>
<host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="YourNameSpace"/> // here you need to add your htmlextension namespace
</namespaces>
</pages>
</system.web.webPages.razor>

如果需要，您可以访问特定的CSBhtml页面

@using YourNameSpace // here you need to add your HTML extension namespace