How to create dynamic menus in MVC partial view?

Hi,

I was wonder how to create dynamic views in MVC partial view.

1. Create your table with name Menu

MenuId int
MenuName varchar(150)
MenuLink varchar(250)
ParentId int

Create a procedure

-- =============================================
-- Author:        <Ritesh Tandon>
-- Create date: <Create Date,,>
-- Description:    <Description,,>
-- =============================================

Create PROCEDURE [dbo].[pGetUserMenus]
    -- Add the parameters for the stored procedure here
    @RoleId int=3
AS
BEGIN
    -- SET NOCOUNT ON added to prevent extra result sets from
    -- interfering with SELECT statements.
    SET NOCOUNT ON;

    WITH Tree_CTE(MenuId, MenuName,MenuLink, ParentId,ParentName,IsActive,EntryBy,level)
AS
(
    SELECT MenuId,MenuName,MenuLink,ParentId,
    (select MenuName from MenuMaster where MenuId=MenuMaster.ParentId) as ParentName
    ,IsActive,EntryBy,rank() over (partition by ParentId order by MenuId)+1 as level
    FROM MenuMaster WHERE ParentID is null
    UNION ALL
    SELECT ChildNode.MenuId,ChildNode.MenuName,ChildNode.MenuLink,ChildNode.ParentId,
    (select MenuName from MenuMaster where MenuId=ChildNode.ParentId) as ParentName
    ,ChildNode.IsActive,ChildNode.EntryBy,Tree_CTE.level
    FROM MenuMaster AS ChildNode
    INNER JOIN Tree_CTE
    ON ChildNode.ParentID = Tree_CTE.MenuId
)
SELECT MenuId,MenuName,MenuLink,ParentId,ParentName,IsActive,EntryBy,level
FROM Tree_CTE
where MenuId in (select MenuId from RolesMenu where RoleId=@RoleId)
    and Isactive=1
order by level,ParentId


END
2. In your controller

public ActionResult _MainMenu()
        {
            return PartialView("_Menu", db.pGetUserMenus(0));
        }


3. In your partial view

@model IEnumerable<Menu>
<div class="hor-menu  ">
    <ul class="nav navbar-nav">
        @{
        int temp_pid=-1;   
               
        foreach (var item in Model)
        {
                if(item.ParentId == 0)
                {
                    @((item.ParentId==0)?Html.Raw("</li>"):Html.Raw(""))
                    @((item.ParentId==0 && temp_pid>0)?Html.Raw("</ul>"):Html.Raw(""))
           
                    @((item.ParentId==0)?Html.Raw("<li class='menu-dropdown classic-menu-dropdown '>"):Html.Raw(""))
                    <a href="javascript:;">
                        <i class="icon-note"></i>@item.MenuName
                    </a>
                }

                if (item.ParentId != 0)
                {
                   
                    @((temp_pid!=0 && temp_pid!=-1 && item.ParentId==0)?Html.Raw("</ul>"):Html.Raw(""))
                    @((temp_pid==0 && temp_pid!=-1 && item.ParentId!=0)?Html.Raw("<ul class='dropdown-menu pull-left'>"):Html.Raw(""))
                   
                        <li class=" ">
                            <a href="@item.MenuLink" class="nav-link">@item.MenuName</a>
                        </li>
                }
               
                temp_pid = item.ParentId;
        }
        }
    </ul>

Enjoy!!