Display dynamic Navigation menu in asp.net core mvc layout page - asp.net-core

Question

I want to display dynamic menu in asp.net core mvc layout page. in my database table has menuid and parentid from that i want to display nested menus. if anyone have solution please help me and if any other method for this give an example.
Model is given below:
public class Menu
{
public int Id { get; set; }
public string MenuText { get; set; }
public string Url { get; set; }
public int? ParentId { get; set; }
public bool Active { get; set; }
public List<Menu> List { get; set; }
}
I want to use this in my layout class .How can i use this?
db_class Connstring = new db_class();
public void ProcessRequest(HttpContext context)
{
var user_id = Convert.ToString(context.Request["Id"]);
var str_company = Convert.ToString(context.Request["str_company"]);
List<Menu> listMenu = new List<Menu>();
string query = #"SELECT TOP (100) PERCENT dbo.Privilege.Name AS MenuText, dbo.[Right].[Add], dbo.[Right].Edit, dbo.[Right].[Delete], dbo.[Right].[view], dbo.[Right].Status AS Active, dbo.Privilege.URL AS url,
dbo.Privilege.ParentID AS ParentId, dbo.[Right].PrivilegeID AS menu_id, dbo.[Right].UserID, dbo.Company.Code, dbo.Company.Name, dbo.Privilege.ID
FROM dbo.Privilege INNER JOIN
dbo.[Right] ON dbo.Privilege.ID = dbo.[Right].PrivilegeID INNER JOIN
dbo.Module ON dbo.Privilege.ModuleID = dbo.Module.ID INNER JOIN
dbo.Department ON dbo.Module.DepartmentID = dbo.Department.ID INNER JOIN
dbo.Company ON dbo.Department.CompanyID = dbo.Company.ID
WHERE (dbo.[Right].Status = 1) AND (dbo.[Right].UserID = '" + user_id.Trim() + "') AND (dbo.Company.Code = '" + str_company.Trim() + "') AND (dbo.Privilege.Platform = 'Web') AND (dbo.Module.Platform = 'Web') OR (dbo.[Right].Status = 1) AND(dbo.[Right].UserID = '" + user_id.Trim() + "') AND(dbo.Privilege.ParentID IS NULL) ORDER BY dbo.Privilege.Priority, dbo.Privilege.ID";
using (SqlConnection con = Connstring.getcon)
{
SqlCommand cmd = new SqlCommand(query);
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
Menu menu = new Menu();
menu.Id = Convert.ToInt32(rdr["menu_id"]);
menu.MenuText = rdr["MenuText"].ToString();
menu.ParentId = rdr["ParentId"] != DBNull.Value
? Convert.ToInt32(rdr["ParentId"]) : (int?)null;
menu.Url = rdr["url"].ToString();
menu.Active = Convert.ToBoolean(rdr["Active"]);
listMenu.Add(menu);
}
}
List<Menu> menuTree = GetMenuTree(listMenu, null);
JavaScriptSerializer js = new JavaScriptSerializer();
context.Response.Write(js.Serialize(menuTree));
}
public List<Menu> GetMenuTree(List<Menu> list, int? parent)
{
return list.Where(x => x.ParentId == parent).Select(x => new Menu
{
Id = x.Id,
MenuText = x.MenuText,
ParentId = x.ParentId,
Url = x.Url,
Active = x.Active,
List = GetMenuTree(list, x.Id)
}).ToList();
}
public bool IsReusable
{
get
{
return false;
}
}
Here is the javascript code :
var sl = 0;
function buildMenu(parent, items) {
$.each(items, function () {
//alert(this.MenuText);
//var icon = this.icon;
//if (icon == "") {
var icon = 'fa fa-circle-o';
//}
//------------------------------------//
if (this.List && this.List.length > 0) {
var pull_right = '</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>';
icon = "glyphicon glyphicon-plus-sign";
}
else
pull_right = '';
//------------------------------------//
sl = sl + 1;
span_id = '';
if (this.Url != "") {
span_id = 'id="active_span_m' + sl + '"';
}
else {
span_id = '';
}
//-----------------------------------//
var li = $('<li id="m' + sl + '" onclick="set_menu_active(\'m' + sl + '\')" alt="' + this.Id + '" class="treeview"><i class="' + icon + '"></i><span ' + span_id + '>' + this.MenuText + pull_right + '</li>');
li.appendTo(parent);
if (this.List && this.List.length > 0) {
var ul = $('<ul class="treeview-menu menu-open"></ul>');
ul.appendTo(li);
buildMenu(ul, this.List);
}
});
//---------------Set Session---------------//
var str = $("<div />").append($("#menu").clone()).html();
sessionStorage.setItem("str_menu", str);
}
And Ajax:
$.ajax({
url: '../../../../../CDB/System/Common/Layout/Master/Permission.ashx',
method: 'get',
dataType: 'json',
data: { 'Id': u_s_id, 'str_company': str_company },
success: function (data) {
//alert(data);
buildMenu($('#menu'), data);
$('#menu').menu();
},
error: function (err) {
}
});
Output Image like as
Output image
Now i want to know process of use of this code in asp.net core mvc layout to get dynamic navigation menu