Мне нужно выделить активную ссылку в меню. Кстати, мое меню находится на главной странице. Я ищу лучший способ реализовать это? Есть идеи?
Asp.Net Mvc выделяет текущую технику ссылки на страницу?
Ответ 1
Лучший способ справиться с этим - написать 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") %>
...
Ответ 2
Я всегда использую это решение Часть HTML
<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());
}
}
Ответ 3
Я уверен, что вы можете сделать это с помощью чистого CSS. Он включает в себя селектор классов и faffing around с тегом тела. Я бы пошел со вспомогательным методом каждый день недели.
Ответ 4
Я использую это решение:
Сначала добавьте атрибут 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>
Далее - добавьте скрытое поле для текущей страницы Id в Layout.cshtml
<input type="hidden" id="currentPageId" value="@(ViewBag.Page ?? "home")" />
Добавить инициализацию ViewBag.Page на ваших страницах, например Home или Products
@{
ViewBag.Page = "products";
}
И последнее, что вы должны ссылаться на этот javascipt от yor 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");
});
Ответ 5
В макете попробуйте следующее:
@{
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;
}
Ответ 6
Если вы хотите также добавить информацию о контроллере, пожалуйста, ознакомьтесь с этой ссылкой.
Ответ 7
Самое простое решение:
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>