выбранный элемент списка в MVC 2.0

Question

Я унаследовал меню, основанное на списках, которые использовались до того, как я начал, и которые нужно перейти в MVC.

В списке должны отображаться белое поле для выбранного элемента и стандартное серое поле для остальных. до сих пор все, что показано, - это серая коробка для всех. Мы искали решение для этого, но нам не удалось докопаться до этого. Список будет расширен с течением времени

            <ul id="headerBarMenu" class="horizontalMenu">
                <li class="fontstyle01a" >
                    <%: Html.ActionLink("Manage Payment Run", "ManagePaymentRun", "Home")%></li>
                <li class="fontstyle01a" >
                    <%: Html.ActionLink("About", "About", "Home")%></li>
            </ul>

ul.horizontalMenu li
{
    list-style: none;
    padding: 0;
    float: left;    
    border-top: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-bottom: 0px;
    border-left: 1px solid #bbb;
    margin: 0;
}

ul.horizontalMenu a
{
    padding: .6em 1.5em 1em 1.5em;
    display: block;
    background: #cccccc;
}

ul.horizontalMenu a.selected
{
    position: relative;
    top: 1px;
    background: white;
    color: black;
    font-weight: bold;
}

.fontstyle01a /*bold_dark*/
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 7pt;
    font-style: normal;
    font-weight: bold;
    color:#666666;
    text-decoration: none;
    margin: 0;
    padding: 0;
    width: 140px;
}

.fontstyle01a a, a:link, a:visited 
{
    color:#666666;
    text-decoration: none;
}

.fontstyle01a a:activea:hover
{
    color:#9f117a;
}

Я искал следующее, чтобы попытаться изменить его это , но я еще не нашел решение.

Спасибо за время

Answer 1

Проверьте этот ответ на один из моих вопросов.Это HtmlHelper, который возвращает имя класса на основе контроллера и / или действия.

Answer 2

Вот вспомогательный метод HTML, который вы можете попробовать.Он устанавливает имя класса на основе текущего действия:

public class Link
{
    public string Text { get; set; }
    public string Action { get; set; }
    public string Controller { get; set; }
    public object RouteValues { get; set; }
    public object HtmlAttributes { get; set; }
}

public static class HtmlExtensions
{
    public static MvcHtmlString Menu(this HtmlHelper htmlHelper, IEnumerable<Link> links)
    {
        var currentAction = (string)htmlHelper.ViewContext.RouteData.Values["action"];
        var currentController = (string)htmlHelper.ViewContext.RouteData.Values["controller"];

        var ul = new TagBuilder("ul");
        ul.GenerateId("headerBarMenu");
        ul.AddCssClass("horizontalMenu");
        links = links ?? Enumerable.Empty<Link>();
        var sb = new StringBuilder();
        foreach (var link in links)
        {
            var li = new TagBuilder("li");
            if (string.Equals(currentAction, link.Action, StringComparison.OrdinalIgnoreCase) &&
                string.Equals(currentController, link.Controller, StringComparison.OrdinalIgnoreCase))
            {
                li.AddCssClass("white");
            }
            else
            {
                li.AddCssClass("grey");
            }
            li.InnerHtml = htmlHelper.ActionLink(link.Text, link.Action, link.Controller, link.RouteValues, link.HtmlAttributes).ToHtmlString();
            sb.Append(li.ToString());
        }
        ul.InnerHtml = sb.ToString();
        return MvcHtmlString.Create(ul.ToString());
    }
}

И затем применяет меню в ваших представлениях:

<%= Html.Menu(new[] {
    new Link { Text = "Manage Payment Run", Action = "ManagePaymentRun", Controller = "Home" },
    new Link { Text = "About", Action = "About", Controller = "Home" },
}) %>

Теперь, если вы перейдете к /home/ManagePaymentRun первое liполучит класс white, и если вы перейдете к /home/about, второй li получит этот класс.

Все, что осталось сейчас, - это стилизовать эти правила:

.white {
    /** TODO **/
}
.grey {
    /** TODO **/
}