Мне нужно выделить активную ссылку в меню. Кстати, мое меню находится на главной странице. Ищу как лучше это реализовать? Любые идеи?
Asp.Net Mvc выделяет метод ссылки на текущую страницу?
Ответы (6)
Лучший способ справиться с этим - написать помощник HTML. Вы можете использовать RouteData.Values["action"]
, чтобы получить текущее выполняемое действие и сравнить его с именем меню, и, если они совпадают, применить класс CSS, который выделит его.
public static MvcHtmlString MenuItem(
this HtmlHelper htmlHelper,
string action,
string text
)
{
var menu = new TagBuilder("div");
var currentAction = (string)htmlHelper.ViewContext.RouteData.Values["action"];
if (string.Equals(
currentAction,
action,
StringComparison.CurrentCultureIgnoreCase)
)
{
menu.AddCssClass("highlight");
}
menu.SetInnerText(text);
return MvcHtmlString.Create(menu.ToString());
}
А затем используйте этот помощник для рендеринга пунктов меню:
<%: Html.MenuItem("about", "About us") %>
<%: Html.MenuItem("contact", "Contact us") %>
...
Я всегда использую это решение Html Part
<ul>
@Html.ListItemAction("Home Page","Index","Home")
@Html.ListItemAction("Manage","Index","Home")
</ul>
Вспомогательная часть
public static class ActiveLinkHelper
{
public static MvcHtmlString ListItemAction(this HtmlHelper helper, string name, string actionName, string controllerName)
{
var currentControllerName = (string)helper.ViewContext.RouteData.Values["controller"];
var currentActionName = (string)helper.ViewContext.RouteData.Values["action"];
var sb = new StringBuilder();
sb.AppendFormat("<li{0}", (currentControllerName.Equals(controllerName, StringComparison.CurrentCultureIgnoreCase) &&
currentActionName.Equals(actionName, StringComparison.CurrentCultureIgnoreCase)
? " class=\"active\">" : ">"));
var url = new UrlHelper(HttpContext.Current.Request.RequestContext);
sb.AppendFormat("<a href=\"{0}\">{1}</a>", url.Action(actionName, controllerName), name);
sb.Append("</li>");
return new MvcHtmlString(sb.ToString());
}
}
Я использую это решение:
Во-первых, добавьте атрибут data-menuPageId к ссылкам в меню.
<ul class="menu">
<li data-menuPageId="home">
@(Html.Link<HomeController>(x => x.Index(), "Home"))
</li>
<li data-menuPageId="products">
@(Html.Link<ProductsController>(x => x.Index(), "Products"))
</li>
</li>
Далее - добавить скрытое поле для идентификатора текущей страницы в Layout.cshtml
<input type="hidden" id="currentPageId" value="@(ViewBag.Page ?? "home")" />
Добавьте инициализацию ViewBag.Page на свои страницы, такие как Home или Products
@{
ViewBag.Page = "products";
}
И последнее, что вы должны ссылаться на этот javascipt из своего Layout.cshtml
$(function() {
var pageIdAttr = "data-menuPageId";
var currentPage = $("#currentPageId").attr("value");
var menu = $(".menu");
$("a[" + pageIdAttr + "]").removeClass("selected");
$("a[" + pageIdAttr + "=\"" + currentPage + "\"]", menu).addClass("selected");
});
Самое простое решение:
1) Подключите jQuery к @RenderBody ()
2) На макете
...
<li class="nav-item">
<a class="nav-link text-dark" id="navItemPortfolio" asp-area="" asp-controller="Home" asp-action="Portfolio">Portfolio</a>
</li>
...
3) Напишите что-нибудь подобное на своей странице (Просмотр)
<script>
$(function () {
$("#navItemPortfolio").addClass("active");
});
</script>
Я почти уверен, что вы можете сделать это с помощью чистого CSS. Он включает в себя селекторы классов и треп с тегом body. Я бы использовал вспомогательный метод каждый день недели.
В макете попробуйте следующее:
@{
string url = Request.RawUrl;
}
@switch (url)
{
case "/home/":
@Html.ActionLink("Home", "../home/", null, new { @style = "background:#00bff3;" })
@Html.ActionLink("Members", "../home/MembersList/")
break;
case "/home/MembersList/":
@Html.ActionLink("Home", "../home/")
@Html.ActionLink("Members", "../home/MembersList/", null, new { @style = "background:#00bff3;" })
break;
default:
@Html.ActionLink("Home", "../home/")
@Html.ActionLink("Members", "../home/MembersList/")
break;
}