创建新的MVC项目时，它会使用以下标记创建Site.master：
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
如果我在该页面上，我想在此处放置代码以突出显示当前链接。
如果我添加其他链接，例如：
<li><%: Html.ActionLink("Products", "Index", "Products")%></li>
如果我在Products控制器中执行任何操作，我希望Products链接处于活动状态（使用类似.active的css类）。
如果我在HomeController About操作上，那么About链接应该是活动的。如果我在HomeController的Index操作上，Home链接应该是活动的。
在MVC中执行此操作的最佳方法是什么？
答案 0 :(得分：23)
它显示了如何创建您调用的HTML扩展程序而不是通常的Html.ActionLink扩展程序然后将class="selected"附加到当前处于活动状态的列表项。
然后，您可以在CSS中放置您想要的任何格式/突出显示
修改
只需添加一些代码而不仅仅是链接。
public static class HtmlHelpers
{
public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper,
string linkText,
string actionName,
string controllerName
)
{
string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
if (actionName == currentAction && controllerName == currentController)
{
return htmlHelper.ActionLink(linkText, actionName, controllerName, null, new { @class = "selected" });
}
return htmlHelper.ActionLink(linkText, actionName, controllerName);
}
}
现在您需要在CSS中定义selected类，然后在视图中在顶部添加using语句。
@using ProjectNamespace.HtmlHelpers
并使用MenuLink代替ActionLink
@Html.MenuLink("Your Menu Item", "Action", "Controller")
答案 1 :(得分：9)
您可以通过使用“data-”属性来识别容器，然后使用链接的jQuery更改CSS类来执行此操作，如下所示：
<div class="..." data-navigation="true">
<ul class="...">
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
<script>
$(function () {
$("div[data-navigation='true']").find("li").children("a").each(function () {
if ($(this).attr("href") === window.location.pathname) {
$(this).parent().addClass("active");
}
});
});
</script>
答案 2 :(得分：5)
这是一种将其实现为MVC帮助程序的方法：
@helper NavigationLink(string linkText, string actionName, string controllerName)
{
if(ViewContext.RouteData.GetRequiredString("action").Equals(actionName, StringComparison.OrdinalIgnoreCase) &&
ViewContext.RouteData.GetRequiredString("controller").Equals(controllerName, StringComparison.OrdinalIgnoreCase))
{
<span>@linkText</span>
}
else
{
@Html.ActionLink(linkText, actionName, controllerName);
}
}
然后可以使用类似于以下内容：
@NavigationLink("Home", "index", "home")
@NavigationLink("About Us", "about", "home")
有关MVC助手的好文章可以在这里找到：http://weblogs.asp.net/scottgu/archive/2011/05/12/asp-net-mvc-3-and-the-helper-syntax-within-razor.aspx
答案 3 :(得分：0)
我用这个方法用htmlhelper解决了这个问题：
public static class HtmlHelpers
{
public static MvcHtmlString MenuLink(this HtmlHelper htmlHelper,
string linkText,
string actionName,
string controllerName
)
{
string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
if (actionName.Equals(currentAction, StringComparison.InvariantCultureIgnoreCase) && controllerName.Equals(currentController, StringComparison.InvariantCultureIgnoreCase))
{
return htmlHelper.ActionLink(linkText, actionName, controllerName, null, new { @class = "active" });
}
return htmlHelper.ActionLink(linkText, actionName, controllerName);
}
}
和视图
@Html.MenuLink"Linktext", "action", "controller")
答案 4 :(得分：0)
您可以查看我的一系列MVC导航控件，其中包括自动突出显示当前链接的功能：
答案 5 :(得分：0)
感谢@codingbadger的解决方案。
我必须在多个操作中突出显示导航链接，因此我决定添加一些包含控制器 - 操作对的参数，并且如果也访问其中任何一个组合，它将突出显示该链接。而且，就我而言，突出显示类将应用于<li>元素。
我将我的代码放在这里，希望它能在将来帮助某人：
这是辅助方法：
/// <summary>
/// The link will be highlighted when it is used to redirect and also be highlighted when any action-controller pair is used specified in the otherActions parameter.
/// </summary>
/// <param name="selectedClass">The CSS class that will be applied to the selected link</param>
/// <param name="otherActions">A list of tuples containing pairs of Action Name and Controller Name respectively</param>
public static MvcHtmlString NavLink(this HtmlHelper htmlHelper, string linkText, string actionName, string controllerName, string parentElement, string selectedClass, IEnumerable<Tuple<string, string>> otherActions)
{
string currentAction = htmlHelper.ViewContext.RouteData.GetRequiredString("action");
string currentController = htmlHelper.ViewContext.RouteData.GetRequiredString("controller");
if ((actionName == currentAction && controllerName == currentController) ||
(otherActions != null && otherActions.Any(pair => pair.Item1 == currentAction && pair.Item2 == currentController)))
{
return new MvcHtmlString($"<{parentElement} class=\"{selectedClass}\">{htmlHelper.ActionLink(linkText, actionName, controllerName)}</{parentElement}>");
}
return new MvcHtmlString($"<{parentElement}>{htmlHelper.ActionLink(linkText, actionName, controllerName)}</{parentElement}>");
}
以下是一个如何使用它的示例：
<ul>
@Html.NavLink("Check your eligibility", "CheckEligibility", "Eligibility", "li", "current-page", new Tuple<string, string>[]
{
new Tuple<string, string>("Index", "Eligibility"),
new Tuple<string, string>("RecheckEligibility", "Eligibility")
})
@Html.NavLink("Apply for my loan", "Apply", "Loan", "li", "current-page")
</ul>
答案 6 :(得分：0)
首先创建一个Helper类和HTML Helper方法
public static string IsActive(this HtmlHelper html,string control,string action)
{
var routeData = html.ViewContext.RouteData;
var routeAction = (string)routeData.Values["action"];
var routeControl = (string)routeData.Values["controller"];
// both must match
var returnActive = control == routeControl &&
action == routeAction;
return returnActive ? "active" : "";
}
在“查看”或“放置”部分中，只需使用适当的Conntroller和Action调用Helper方法即可。
@using YourNamespace.HtmlHelpermethodName
<a class="nav-link @Html.IsActive("Dashboard","Index")" href="@Url.Action("Index","Dashboard")">
这将在class属性中添加“活动”字符串，并显示为
<a class="nav-link active" href="@Url.Action("Index","Dashboard")">
答案 7 :(得分：0)
<ion-content>
<div>
<ngx-datatable
[rows]="rows"
[columns]="columns">
<ngx-datatable-column ion-col name="Name" ></ngx-datatable-column>
<ngx-datatable-column ion-col name="gender"></ngx-datatable-column>
</ngx-datatable>
</div>
</ion-content>
答案 8 :(得分：-1)
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Products", "Index", "Products")</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Archivo<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>@Html.ActionLink("Document Type", "Index", "DocumentTypes")</li>
<li>@Html.ActionLink("Employee", "Index", "Employees")</li>
<li>@Html.ActionLink("Suppliers", "Index", "Suppliers")</li>
</ul>
</li>
</ul>
@Html.Partial("_LoginPartial")
</div>