Боковое меню в ASP.NET Core Razor Pages с веб-API

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"));