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

Короткий ответ :

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.info(`clicked!`,t);
};
x.attach(document.querySelector("nav.collapse"));