1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How do I add Menu control (dynamic built using Controller method with database EF) to _layout.

How do I add Menu control (dynamic built using Controller method with database EF) to _layout.

I am new to Sync Fusion. 

I am trying to achieve the dynamic Menu by using @html. partial in _layout.

the Controller CS for Base Controller requires the Index () method only as the page default is Index. HTML.

How can I pass the Menu rendering controller name and method name? similar to HTML. Action.

_layout Code

   <div class="navbar navbar-expand-lg navbar-light bg-light">

       <div class="collapse navbar-collapse" id="navbarSupportedContent">

           @model List<XXXXAPI.XXXXDb.XXX_Menu>

           @Html.Partial("DyMenu")

           <form class="form-inline my-2 my-lg-0">

               <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">

               <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

           </form>

       </div>


DyMenu.chtml

@Html.EJS().Menu("DyMenu").EnablePersistence(true).EnableScrolling(true).Items(ViewBag.menuItems).Fields(ViewBag.menuFields).Render()

BaseClass Method

    public ActionResult Index()   ###### Issue is here ... this is too generic name required as Index is common ins most of pages.

    {


        using (xxxxxEntities EDE = new xxxxEntities())

        {


            List<XXX_Menu> menuItems = new List<XXX_Menu>();

            var data = EDE.XXX_Menu.OrderBy(a => a.DisplayOrder);

            menuItems = data.ToList();

            MenuFieldSettings menuFields = new MenuFieldSettings()

            {

                ItemId = "MenuId",

                Text = "Title",

                ParentId = "ParentMenuId"

            };


            ViewBag.menuItems = menuItems;

            ViewBag.menuFields = menuFields;


            return View();

        }



3 Replies 1 reply marked as answer
LD LeoLavanya Dhanaraj Syncfusion Team May 16, 2025 03:24 AM UTC

Hi Nirav,


Greetings from Syncfusion support.


With the shared details, we understand that you want to render a dynamic Syncfusion Menu in your _Layout.cshtml using a controller method that loads data from Entity Framework. To meet this need, you should not use @Html.Partial() alone because partial views do not invoke a controller method directly. Instead, you should use @Html.Action() (in ASP.NET MVC) or switch to using View Components in ASP.NET Core.


Refer the below mentioned code snippets and sample for reference.


[_Layout.cshtml]

<body>

    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">

        <div class="container">

            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

            <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" title="Toggle navigation" aria-controls="navbarSupportedContent"

                    aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>

            <div class="collapse navbar-collapse d-sm-inline-flex justify-content-between">

                <ul class="navbar-nav flex-grow-1">

                    <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { @class = "nav-link" })</li>

                    <li>@Html.ActionLink("About", "About", "Home", new { area = "" }, new { @class = "nav-link" })</li>

                    <li>@Html.ActionLink("Contact", "Contact", "Home", new { area = "" }, new { @class = "nav-link" })</li>

                    <li>  @Html.Action("RenderMenu", "Menu")</li>

                </ul>

            </div>

        </div>

    </nav>

 …

</body>

 

[Views/Menu/_DyMenu.chtml]

@Html.EJS().Menu("DyMenu").Items(ViewBag.menuItems).Fields(ViewBag.menuFields).Render()

<style>

    .e-menu-wrapper .e-menu, .e-menu-container .e-menu {

        background: white;

    }

</style>

 

[MenuController.cs]

namespace WebApplication1.Controllers

{

    public class MenuController : Controller

    {

        // GET: Menu

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult RenderMenu()

        {

            List<object> menuItems = new List<object>()

            {

                new { id = "parent1", text = "Events" },

                new { id = "parent2", text = "Movies" },

                new { id = "parent3", text = "Directory" },

               …

            };

 

            // For MenuFieldSettings type, include Syncfusion.EJ2.Navigations in the using directive section.

            MenuFieldSettings menuFields = new MenuFieldSettings()

            {

                ItemId = "id",

                Text = "text",

                ParentId = "parentId"

            };

 

            ViewBag.menuItems = menuItems;

            ViewBag.menuFields = menuFields;

            return PartialView("_DyMenu");

        }

    }

}


Output screenshot:


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/MVCMenu


Refer the shared details and get back to us if you need any further assistance.


Regards,

Leo Lavanya Dhanaraj


Marked as answer
NS NIRAV SHAH replied to LeoLavanya Dhanaraj June 16, 2025 08:19 PM UTC

Thank you for your help and sample. much appreciated.


LD LeoLavanya Dhanaraj Syncfusion Team June 17, 2025 06:02 AM UTC

Thanks for the update. Please get back to us if you need any further assistance in future.


Loader.
Up arrow icon