How bind the menu from myslq db in _Layout.cshtml with eg code ?

Hello Karthik,
I think you have SQM table ready so sharing only MVC code example here,

Step 1: Create model for you table to map data

public class Menu
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Url { get; set; }
    public int? ParentId { get; set; }
    public int SortOrder { get; set; }
    public List Children { get; set; } = new();
}

Step-2 : Create service to Fetch data from database

using MySql.Data.MySqlClient;

public class MenuService
{
    private readonly IConfiguration _config;

    public MenuService(IConfiguration config)
    {
        _config = config;
    }

    public async Task> GetMenu()
    {
        var menuList = new List();

        using var conn = new MySqlConnection(_config.GetConnectionString("DefaultConnection"));
        await conn.OpenAsync();

        var cmd = new MySqlCommand("SELECT * FROM Menu ORDER BY SortOrder", conn);
        var reader = await cmd.ExecuteReaderAsync();

        while (await reader.ReadAsync())
        {
            menuList.Add(new Menu
            {
                Id = reader.GetInt32("Id"),
                Title = reader.GetString("Title"),
                Url = reader.GetString("Url"),
                ParentId = reader.IsDBNull("ParentId") ? null : reader.GetInt32("ParentId"),
                SortOrder = reader.GetInt32("SortOrder")
            });
        }

        // Build hierarchy
        var lookup = menuList.ToLookup(x => x.ParentId);
        foreach (var menu in menuList)
        {
            menu.Children = lookup[menu.Id].ToList();
        }

        return lookup[null].ToList();
    }
}

Step-3: Register service in program file.

builder.Services.AddScoped();

step-4 : Create viewComponent

using Microsoft.AspNetCore.Mvc;

public class MenuViewComponent : ViewComponent
{
    private readonly MenuService _menuService;

    public MenuViewComponent(MenuService service)
    {
        _menuService = service;
    }

    public async Task InvokeAsync()
    {
        var menu = await _menuService.GetMenu();
        return View(menu);
    }
}

STEP 5 Create View for the Component

@model List


    @foreach (var item in Model)
    {
        

            @item.Title

            @if (item.Children.Any())
            {
                

                    @foreach (var child in item.Children)
                    {
                        
@child.Title
                    }
                
            }
        
    }

STEP 6 Call Component Inside _Layout.cshtml

@await Component.InvokeAsync("Menu")

Hi Karthik,

Here's a practical approach to bind menu data from MySQL in your _Layout.cshtml using ASP.NET Core with Entity Framework:

Step 1: Create a ViewComponent

First, create a ViewComponent to fetch the menu data:

public class MenuViewComponent : ViewComponent
{
    private readonly IYourDbContext _context;

    public MenuViewComponent(IYourDbContext context)
    {
        _context = context;
    }

    public async Task InvokeAsync()
    {
        var menuItems = await _context.MenuItems
            .Where(m => m.IsActive)
            .OrderBy(m => m.DisplayOrder)
            .ToListAsync();
        
        return View(menuItems);
    }
}

Step 2: Create the ViewComponent View

Create Views/Shared/Components/Menu/Default.cshtml:

@model IEnumerable

Step 3: Invoke in _Layout.cshtml

    @await Component.InvokeAsync("Menu")
    
    @RenderBody()

This approach keeps your layout clean and separates concerns. The ViewComponent handles the database logic, and the view renders the menu.

Let me know if you need clarification on any part!