jQuery：单击时更改菜单项 CSS答案

【问题标题】：jQuery : Change Menu Item CSS on clickjQuery：单击时更改菜单项 CSS
【发布时间】：2016-02-07 08:05:37
【问题描述】：

我正在使用 ASP.NET-MVC 4 开发应用程序。在这里，我在布局页面中动态加载菜单。我创建了一个局部视图来动态加载菜单并将其包含在布局页面中，如下所示：

MenuModel.cs：

public class MenuModel
{
    public List<MainMenu> MainMenuModel { get; set; }        
}

public class MainMenu
{
    public int MainMenuID;
    public string MainMenuName;
    public string MainMenuController;
    public string MainMenuAction;
}

PartialController.cs：

using Insights.Models;

[ChildActionOnly]
public ActionResult LoadMenu()
{
    MenuModel ObjMenuModel = new MenuModel();
    ObjMenuModel.MainMenuModel = new List<MainMenu>();
    ObjMenuModel.MainMenuModel = GetMainMenu();
    return PartialView(ObjMenuModel);
}

public List<MainMenu> GetMainMenu()
{
    List<MainMenu> ObjMainMenu = new List<MainMenu>();
    var context = new InsightsEntities();
    ObjMainMenu = context.Insights_mMenu.Where(m => m.parentMenuUID == 0).Select(x => new MainMenu()
        {
            MainMenuID = x.menuUID,
            MainMenuName = x.menuName,
            MainMenuController = x.menuURLController,
            MainMenuAction = x.menuURLAction
        }).ToList();

        return ObjMainMenu;
}

LoadMenu.cshtml：（部分视图）

@model Insights.Models.MenuModel

<link rel="stylesheet" href="~/MADMIN_files/style(2).css" />
<ul class="sidebar-menu on-click" id="main-menu">
<li class="active">
    <div class="sidebar-menu-item-wrapper">
        <a href="#">
            <i class="icon-home"></i>
            <span>Home</span>
        </a>
    </div>
</li>
@{
    foreach (var MenuItem in Model.MainMenuModel)
    {

    <li class="active">
        <div class="sidebar-menu-item-wrapper">
            <a href='@Url.Action(@MenuItem.MainMenuAction, @MenuItem.MainMenuController)'><span>@MenuItem.MainMenuName</span></a>
        </div>
    </li>

     }
  }
</ul>

_Layout.cshtml：

<div id="sidebar">
     @{ Html.RenderAction("LoadMenu", "Partial"); }
</div>

这是我的屏幕：

屏幕显示属于菜单“报告”的页面。在这里，我想通过将其 css 更改为“活动”来突出显示单击的菜单。有两个类“活跃”和“不活跃”。当我们动态加载菜单时如何实现这一点？

【问题讨论】：

标签： jquery css asp.net asp.net-mvc asp.net-mvc-4

【解决方案1】：

然后，您可以使用类似的方法从子操作中确定“父”操作和控制器名称。这可以与每个菜单项的值进行比较，以查看它是否确实是活动菜单项，如果是，您可以在菜单项上设置 IsActive 属性。然后只需使用 IsActive 属性来决定是否在渲染菜单时添加 css 类。

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

【讨论】：