jQuery:点击更改菜单项CSS

时间:2015-11-06 08:22:23

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

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

MenuModel.cs:

public string Decode(BitArray bits)
    {
        Node current = this.Root;
        string decoded = "";
        foreach (bool bit in bits)
        {
            if (bit)
            {
                if (current.Right != null)
                {
                    current = current.Right;
                }
            }
            else
            {
                if (current.Left != null)
                {
                    current = current.Left;
                }
            }
            if (IsLeaf(current))
            {
                decoded += current.Symbol;
                current = this.Root;
            }
        }
        return decoded;
    }

PartialController.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;
}

LoadMenu.cshtml :(部分视图)

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;
}

_Layout.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>

这是我的屏幕: enter image description here

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

1 个答案:

答案 0 :(得分:0)

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

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