当我希望特定的菜单链接在给定页面上处于活动状态时,我在 Razor 中使用此方法:
在主布局上我有这些检查:
var active = ViewBag.Active;
const string ACTIVE_CLASS = "current";
if (active == "home")
{
ViewBag.ActiveHome = ACTIVE_CLASS;
}
if (active == "products")
{
ViewBag.ActiveProducts = ACTIVE_CLASS;
}
etc.
主布局上的 html 菜单:
<ul>
<li class="@ViewBag.ActiveHome"><a href="/">Home</a></li>
<li class="@ViewBag.ActiveProducts"><a href="@Url.Action("index", "products")">Products</a></li>
</ul>
指定在不同视图上使用哪个布局页面时:
@{
ViewBag.Active = "home";
Layout = "~/Views/Shared/_Layout.cshtml";
}
有没有比我当前使用的方法更好的方法来指定活动链接?
更好的方法是使用 HTML 帮助器:
using System.Web.Mvc;
using System.Web.Mvc.Html;
public static class MenuExtensions
{
public static MvcHtmlString MenuItem(
this HtmlHelper htmlHelper,
string text,
string action,
string controller
)
{
var li = new TagBuilder("li");
var routeData = htmlHelper.ViewContext.RouteData;
var currentAction = routeData.GetRequiredString("action");
var currentController = routeData.GetRequiredString("controller");
if (string.Equals(currentAction, action, StringComparison.OrdinalIgnoreCase) &&
string.Equals(currentController, controller, StringComparison.OrdinalIgnoreCase))
{
li.AddCssClass("active");
}
li.InnerHtml = htmlHelper.ActionLink(text, action, controller).ToHtmlString();
return MvcHtmlString.Create(li.ToString());
}
}
进而:
<ul>
@Html.MenuItem("Home", "Home", "Home")
@Html.MenuItem("Products", "Index", "Products")
</ul>
要使上述工作正常进行,您需要视图来识别您的扩展:在 Views 文件夹中的 Web.config 中,添加<add namespace="yourNamespacehere.Helpers" />
在命名空间标签内。然后构建您的项目并关闭并重新打开您要添加到的视图。
然后根据当前的操作和控制器,助手将添加或不添加active
生成锚点时的类。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)