Меню ASP.NET MVC Выбранный элемент

Question

OK новый для MVC. Я задал вопрос this и получил ответ, но мне интересно, есть ли более простое решение.

Скажем, у меня есть главная страница с меню, выложенным как неупорядоченный список. Как я могу настроить класс css в текущем выбранном пункте?

EDIT:

Я использую меню так же, как она идет установка из коробки, когда вы начинаете новый Mvc App

<ul id="menu">    
    <li><%: Html.ActionLink("Home", "Index", "Home")%></li> 
    <li><%: Html.ActionLink("About", "About", "Home")%></li> 
</ul> 

Answer 1

Ответ от Jakub Konecki привел меня в правильном направлении ... вот действие контроллера я закончил с:

[ChildActionOnly] 
    public ActionResult MainMenu() 
    { 
     var items = new List<MenuItem> 
     { 
      new MenuItem{ Text = "Home", Action = "Index", Controller = "Home", Selected=false }, 
      new MenuItem{ Text = "My Profile", Action = "Index", Controller = "Profile", Selected = false}, 
      new MenuItem{ Text = "About", Action = "About", Controller = "Home", Selected = false } 
     }; 

     string action = ControllerContext.ParentActionViewContext.RouteData.Values["action"].ToString(); 
     string controller = ControllerContext.ParentActionViewContext.RouteData.Values["controller"].ToString(); 

     foreach (var item in items) 
     { 
      if (item.Controller == controller && item.Action == action) 
      { 
       item.Selected = true; 
      } 
     } 

     return PartialView(items); 
    } 

Надеется, что это помогает кто то.

Answer 2

Вы должны передать всю необходимую информацию в модели. В идеале ваше меню будет отображаться как частичный вид с помощью отдельного метода контроллера. У меня есть контроллер навигации с такими действиями, как MainMenu, FooterMenu, Breadcrumbs и т. Д., Которые отображают отдельные части.

Ваша модель будет набор пунктов меню, как:

public class MenuItemModel 
    { 
     public MenuItemModel() 
     { 
      SubMenu = new List<MenuItemModel>(); 
     } 

     public string Text { get; set; } 
     public string Controller { get; set; }    
     public string Action { get; set; } 
     public bool Selected { get; set; } 

     public List<MenuItemModel> SubMenu { get; private set; } 
    } 

Ваш контроллер создаст коллекцию элементов меню и передать их в представление с соответствующим элементом, выбранным. Тогда точка зрения может быть столь же просто, как:

<ul id="menu">  
    <% foreach(var menuItem in Model.MenuItems) { %> 
     <li><%: Html.ActionLink(menuItem.Text, menuItem.Action, menuItem.Controller, null, new { @class = menuItem.Selected ? "selected" : "" })%></li> 
    <% } %> 
</ul> 

Answer 3

stephen,

вот мой вклад в партию. рекурсивная функция инлайн для заполнения <ul><li> столько глубины, как требуется (здесь весь файл ASCX):

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<GBC_Art.Controllers.MenuItemModel>>" %> 
<%@ Import Namespace="GBC_Art.Controllers" %> 
<% 
    Action<List<MenuItemModel>, int> printNodesRecursively = null; 
    printNodesRecursively = (List<MenuItemModel> nodeList, int depth) => 
    { 
     if (nodeList == null || nodeList.Count == 0) return; 
%> 
    <ul<%= depth == 0 ? " id='menu'" : ""%>> 
<% 
    foreach (var menuItem in nodeList) 
    { 
    %> 
    <li><%= Html.ActionLink(menuItem.Text, menuItem.Action, menuItem.Controller, null, new { @class = menuItem.Selected ? "selected" : "" })%> 
     <%printNodesRecursively(menuItem.SubMenu, depth + 1);%> 
    </li> 
    <% 
     } 
%> 
    </ul> 
<% 
    }; 
    List<MenuItemModel> nodes = Model; 
    printNodesRecursively(nodes, 0); 
%> 

использование -> называется как PartialView через контроллер, как в вашем примере выше.

веселит

Answer 4

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

CSS класс

ul#menu li.selected a { 
    background-color: #034af3; 
    color: #e8eef4; 
} 

HTML Helper

using System; 
using System.Collections.Generic; 
using System.Web; 
using System.Web.Mvc; 

namespace MyWebApp.WebUI.HtmlHelpers 
{ 
    public static class HtmlHelperExtensions 
    { 
    public static string ActivePage(this HtmlHelper helper, string controller, string action) 
    { 
     string classValue = ""; 

     string currentController = helper.ViewContext.Controller.ValueProvider.GetValue("controller").RawValue.ToString(); 
     string currentAction = helper.ViewContext.Controller.ValueProvider.GetValue("action").RawValue.ToString(); 

     if (currentController == controller && currentAction == action) 
     { 
     classValue = "selected"; 
     } 

     return classValue; 
    } 
    } 
} 

Меню на макете:

<nav> 
    <ul id="menu"> 
    <li class="@Html.ActivePage("Home", "Index")">@Html.ActionLink("Home", "Index", "Home")</li> 
    <li class="@Html.ActivePage("Home", "About")">@Html.ActionLink("About", "About", "Home")</li> 
    </ul> 
</nav> 

Больше информации здесь: http://bubblogging.wordpress.com/2012/02/12/mvc-add-selected-class-to-menu/

Answer 5

Просто обучения MVC, но я наткнулся на эту проблему, и я понял, гораздо более быстрый способ достижения этой цели. Он использует согласованные URL-адреса и не зависит от строк запроса.

<ul id="menu">    
    <li @(Request.Path.Equals("/") ? Html.Raw("class=\"selected\"") : Html.Raw(""))> 
    @Html.ActionLink("Home", "Index", "Home")</li> 
    <li @(Request.Path.Equals("/about") ? Html.Raw("class=\"selected\"") : Html.Raw(""))> 
    @Html.ActionLink("About", "About", "Home")%></li> 
</ul> 

Конечно, вы можете обрабатывать несколько URL-адресов, показывающие один и тот же элемент, выбранный с помощью OR логики или составления списка. Но если вы составляете список, вы, конечно, хотите этого в своей модели. Вы можете выделить опцию для всего каталога, просто проверив, что начало строки соответствует.

Как это было бы лучше всего подходит для более статического веб-сайта. Если вы включите это в LayoutPage, обслуживание будет довольно простым, так как у вас нет дополнительных классов или функций для поддержки. Очевидно, это не сократило бы его, если бы вы работали над CMS.

Answer 6

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

в макет страницы:

<body> 
<header> 
    @{Html.RenderPartial("_MenuPartial"); } 
</header> 
@RenderBody() 
</body> 

Тогда ваш частичный вид содержит:

<nav class="navMain"> 
<ul> 
    foreach (var menu in menuList) 
    { 
    <li id="@menu.Id"><a href="@menu.Url">@menu.Name</a></li> 
    } 
</ul> 
</nav> 

Для активации нажатого меню, вам нужен скрипт в частичном виде. Также «активный» класс ничем не отличается от изменения цвета фона в CSS.

<script> 
var selector = '.navMain li'; 
$(selector).on('click', function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
    var menuId = $(this).prop("id"); 
    localStorage.setItem('SelectedMenu', menuId); 
}); 

Поскольку мы устанавливаем HREF для каждой ссылки меню, мы потеряем активный класс за пост-обратно. Таким образом, вы должны прочитать выбранное меню из LocalStorage и применить его на соответствующем меню в частичном:

<script> 
$(document).ready(function() { 
    var activeMenuLocalStorage = localStorage.getItem('SelectedMenu'); 
    if (!isNaN(activeMenuLocalStorage)) { 
    { 
    $("#" + activeMenuLocalStorage).addClass('active'); 
    } 
});