Click here to Skip to main content
Rate this: bad
Please Sign up or sign in to vote.
See more: jQuery MVC4
Hi all i am working on Mvc4( webApi)actually I Need to create menus and submenus.i am new for mvc4 i don't have any idea to how to create database for menus and submenus could you please give me idea how create database for menuitems and sunmenu items and i need call menus and submenus from database
here i had created the menus table and i had shown in layout.cshtml but i dont have any idea to create submenus so plz could u plz help me to do this work
thank in advance
here my models
using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 namespace MenuDetails.Models
    public class MenusModels
        public int MenuId { get; set; }
        public string MenuName { get; set; }
        public string ActionName { get; set; }
        public string ControllerName { get; set; }
        public string Url { get; set; }
        public string ParentMenu { get; set; }
and here my controllers

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MenuDetails.Models;
namespace MenuDetails.Controllers
    public class MenuItemController : ApiController
        public IEnumerable<DisplayTopMenu> GetAll()
        webapiEntities1 db = new webapiEntities1();
       var data=  from item in db.DisplayTopMenus
                       orderby item.MenuId
                       select item;
            return data.ToList();

and here my layout.cshtmp page 

       <link href="../../Content/odata_css.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/team.js" type="text/javascript"></script>
   @* @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)*@

    <div class="main">
    <div class="head"></div>
 <script type="text/javascript">
     var Url = "/api/MenuItem";
     (function ($) {
         $.buildMenu = function (MenuId, CurrentPage) {
             $.getJSON(Url, function (data) {
                 var item = data;
                 $('.' + MenuId).append("<ul>");
                 for (var i = 0; i < item.length; i++) {
                     if (CurrentPage == item[i].MenuName)
                         $('.' + MenuId).append("<li><a  class='main_menu_active'>" + item[i].MenuName + "</a></li>");
                     else $('.' + MenuId).append("<li> " + item[i].MenuName + "</li>");
 <script type="text/javascript">
        $(document).ready($.buildMenu("main_menu", 'Cheak A Blance'));
    <div class="main_menu">
    <div class="lift_menu">
    <div class="footer"></div>


it is displaying menus items

now i need to display submenus for menus items so plz could u plz help me to create sub items for menus
i need some idea how to create database for subitems and how to call it for menu items thank in advance
Posted 13-Sep-12 7:04am
Edited 13-Sep-12 20:14pm

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

As of above question we can disply menus and submenus and also subsubmenus
look the code
<script type="text/javascript">
    //ApycomDesing Starts here //

    $.get("api/MenuItem", function (data) {
        if (data.length > 0) {
            $("#menu").append('<ul id="" class="menu">');
            $.each(data, function (index, dataMenu) {
                var stringBuilder = [];
                stringBuilder.push('<li class=""><a href="javascript:void(0)" id="" class="parent">' + dataMenu.MenuName + '</a>');
               if (dataMenu.SubMenuName != null) {
                               var submenu = [];
                               submenu = dataMenu.SubMenuName;
                               var splittedmenus = [];
                              splittedmenus = submenu.split(",");
                                       for (var i = 0; i < splittedmenus.length; i++) {
                                           stringBuilder.push('<li ><a href="#" class="parent" ><span>' + splittedmenus[i] + '</span></a>');
                        if (dataMenu.SubMenus != null)
                            var ssubmenu = [];
                            ssubmenu = dataMenu.SubMenus;
                            var splittingSsub = [];
                            splittingSsub = ssubmenu.split(',');
                            for (var j = 0; j < splittingSsub.length; j++) {
                                alert('start ssub loop');
                                stringBuilder.push('<li><a href="#"  ><span>' + splittingSsub[j] + '</span></a></li>');


This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Maciej Los 347
1 DamithSL 305
2 ridoy 278
3 OriginalGriff 224
4 George Jonsson 140
0 OriginalGriff 7,968
1 DamithSL 6,179
2 Sergey Alexandrovich Kryukov 5,524
3 Maciej Los 5,438
4 Kornfeld Eliyahu Peter 4,539

Advertise | Privacy | Mobile
Web01 | 2.8.141223.1 | Last Updated 26 Sep 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100