jQuery：单击更改菜单项CSS

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

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

公共类菜单模型
{
公共列表MainMenuModel{get；set；}
}
公共类主菜单
{
公共int MainMenuID；
公共字符串MainMenuame；
公共字符串主控器；
公共字符串维护；
}

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

使用Insights.Models；
[仅限儿童]
公共操作结果加载菜单（）
{
MenuModel ObjMenuModel=新的MenuModel（）；
ObjMenuModel.MainMenuModel=新列表（）；
ObjMenuModel.MainMenuModel=GetMainMenu（）；
返回PartialView（ObjMenuModel）；
}
公共列表GetMainMenu（）
{
List ObjMainMenu=新建列表（）；
var context=newinsightsenties（）；
ObjMainMenu=context.Insights\u mMenu.Where（m=>m.parentMenuUID==0）。选择（x=>new MainMenu（）
{
MainMenuID=x.menuUID，
mainmenuame=x.menuName，
MainMenuController=x.menuURLController，
MainMenuAction=x.MenuUrAction
}).ToList（）；
返回ObjMainMenu；
}

LoadMenu.cshtml：（局部视图）

@model Insights.Models.MenuModel
单击“id=”主菜单“>


@{
foreach（Model.MainMenuModel中的var MenuItem）
{


}
}

_Layout.cshtml：

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

@{Html.RenderAction（“加载菜单”、“部分”）；}

这是我的屏幕：

---

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

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

string actionName=this.ControllerContext.ParentActionViewContext.RouteData.Values[“action”].ToString（）；
string controllerName=this.ControllerContext.ParentActionViewContext.RoutedData.Values[“controller”].ToString（）；

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

string actionName=this.ControllerContext.ParentActionViewContext.RouteData.Values[“action”].ToString（）；
string controllerName=this.ControllerContext.ParentActionViewContext.RoutedData.Values[“controller”].ToString（）；

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