выберите правильное меню на главной странице в MVC с дочерней страницы

Question

У меня есть пара элементов списка в общем _layout.cshtm файле (главной странице) в моем приложении MVC.

что-то вроде:

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

, когда пользователь находится вдомашняя страница, я хочу, чтобы элемент home 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>

Помощник проверяет текущее действие и контроллер и, если они соответствуют тому, который был передан в качестве аргументов помощнику, добавляет класс CSS selected к 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