我想在我的ASP.NET MVC应用程序中创建一个ul/li菜单。该菜单应该有4到5个顶部菜单项,每个顶部菜单项都应该有一个悬停/下拉菜单和一些子菜单项。完成后的菜单结构应像常规的ul/li菜单带有下拉选项:
<ul>
<li class="active">
<a>Topmenu 1</a>
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li class="inactive">
<a>Topmenu 2</a>
<ul>
<li>Submenu4</li>
<li>Submenu5</li>
<li>Submenu6</li>
</ul>
</li>
And so on...
</ul>
顶部菜单项应该具有“active”和“inactive”类。我通过创建自定义的HtmlHelper来解决了这个问题,以生成顶部菜单项。代码如下:
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("tab active");
}
else {
li.AddCssClass("tab inactive");
}
li.InnerHtml = htmlHelper.ActionLink(text, action, controller).ToHtmlString();
return MvcHtmlString.Create(li.ToString());
}
I call the function like this:
@Html.MenuItem("Katalog", "Index", "Katalog")
这个函数很好用。不幸的是,整个顶部菜单的
<li>
项目都会被生成。所以我无法在顶部菜单的<li>
标签中放置子菜单项的<ul>
。有没有人有什么想法可以制作这样的菜单?或者有什么办法可以让我的
<ul>
进入顶部菜单的<li>
标签中?
<ul>
和<li>
,让你得到一个漂亮的菜单。我没有看到任何与SEO相关的问题。 - Leniel Maccaferri<ul>
和<li>
正确生成,这对于动态菜单将起作用。 - Leniel Maccaferri