带有 Web API 的 ASP.NET Core Razor 页面中的侧边菜单

Question

谁能给我一个在 ASP.net Core 中做侧边菜单的例子？ 下面我有一个例子，但是我不知道怎么用。

[
  {
    "MenuName": "Hirer HP Transactions",
    "MenuList": [
      {
        "MenuName": "HP Application Master",
        "MenuList": []
      },
      {
        "MenuName": "HP Hirer Master",
        "MenuList": []
      },
      {
        "MenuName": "HP Collection",
        "MenuList": []
      },
      {
        "MenuName": "Post Dated Cheque",
        "MenuList": []
      },
      {
        "MenuName": "Operation Reports",
        "MenuList": []
      }
    ]
  },
  {
    "MenuName": "Vehicle Trading Transactions",
    "MenuList": [
      {
        "MenuName": "Purchase Agreement",
        "MenuList": [
          {
            "MenuName": "Open Vehicle Module",
            "MenuList": []
          },
          {
            "MenuName": "Open / Unsold Vehicles",
            "MenuList": []
          },
          {
            "MenuName": "Import Vehicle Delivery Monitoring",
            "MenuList": []
          }
        ]
      },
      {
        "MenuName": "Sales Order",
        "MenuList": []
      },
      {
        "MenuName": "Sales Agreement",
        "MenuList": []
      },
      {
        "MenuName": "Stock Master",
        "MenuList": []
      },
      {
        "MenuName": "Operation Reports",
        "MenuList": []
      }
    ]
  }
]

Answer 1

简答：

1. 查询您的数据库并获取菜单数据
2. 将菜单呈现为 html 。

既然你已经有了菜单数据，我将向你展示如何用大约 40 行 JavaScript 代码来呈现它：

首先，创建一个Sidebar.lib.js，它有助于将您的菜单呈现为 html：

function SideBar(menus=[],onclick){
    this.menus=menus;
    this.onclick= onclick;
}

SideBar.prototype.render = function(){
    return `<ul class="nav bd-sidenav">${this.menus.map(m=> this._renderListItem(m)).join("")}</ul>`;
}

SideBar.prototype.attach=function(elementContainer = new HTMLElement()){
    var innerHtml = this.render();
    elementContainer.innerHTML= innerHtml;
    elementContainer.onclick = (e)=>{
        e.preventDefault();
        e.stopPropagation();
        if(e.srcElement.tagName.toLowerCase()=="a"){
            if(this.onclick != null) this.onclick(e.target);
        }
        return false;
    };
}

SideBar.prototype._renderListItem = function(li){
    if(Array.isArray(li.MenuList) && li.MenuList.length >0 ){
        return `<li>
            <a href="#${li.MenuName}">${li.MenuName}</a>
            <ul> ${li.MenuList.map(item=> this._renderListItem(item)).join(" ")} </ul>
        </li>`;
    }
    return `<li><a href="#${li.MenuName}" >${li.MenuName}</a></li>`;
}

现在您可以动态创建侧边栏了：

var x = new SideBar(menus);
// add your own onclick as you like 
x.onclick = t=>{
    console.log(`clicked!`,t);
};
x.attach(document.querySelector("nav.collapse"));