Question

我的MVC应用程序中的共享_layout.cshtm文件（母版页）中有几个列表项。

类似的东西：

<ul>
    <li>Home</li>
    <li>about</li>
    <li>contact</li>
    <li>blog</li>
</ul>

当用户在主页中时，我希望归属li项目具有类selected，如下所示：

<li class="selected">Home</li>

等等。这样做的最佳方式是什么？

在常规的asp.net网站上，我曾经在母版页中有一个方法并从子页面调用该方法，但在MVC中我不知道该怎么做。

感谢。

Answer 1

您可以编写自定义帮助程序方法：

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("selected");
    }
    li.SetInnerText(text);
    return MvcHtmlString.Create(li.ToString());
}

然后：

<ul>
    @Html.MenuItem("Home", "home", "home")
    @Html.MenuItem("About", "about", "home")
    @Html.MenuItem("Contact", "contact", "home")
    @Html.MenuItem("Blog", "blog", "home")
</ul>

帮助程序检查当前操作和控制器，如果它们与作为参数传递给助手的那个匹配，它会将selected CSS类附加到li。

Answer 2

只想分享我的所作所为：

我创建文件夹App_Code并添加CustomHelpers.cshtml。在其中我创建了这样的东西：

@helper MainMenu(string SelectedItem) {
    <ul class="MainMenu">
        <li><a href="/home" @if (SelectedItem == "Home") { <text>class="Active"</text> }>Home</a></li>
        <li><a href="/about" @if (SelectedItem == "About") { <text>class="Active"</text> }>About</a></li>
        <li><a href="/foo" @if (SelectedItem == "Foo") { <text>class="Active"</text> }>Foo</a></li>
    </ul>
}

比我的MasterPage（_Layout.cshtml）中我添加了这个我希望我的菜单出现的地方：

@CustomHelpers.MainMenu(ViewBag.SelectedMenu)

而且在我看来，就像我改变我的页面标题一样，我改变了我选择的菜单：

@{
    ViewBag.Title = "Welcome to my homepage";
    ViewBag.SelectedMenu = "Home";
}

从本教程中了解了我的想法：www.asp.net/mvc/videos/mvc-3/mvc-3-razor-helpers

从子页面选择MVC中母版页上的右侧菜单

2 个答案: