Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery MVC4
Hi all i am working on Mvc4(asp.net 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>
   
</head>
<body>
    @RenderBody()
 
   @* @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) {
             alert(data);
                 var item = data;
                 alert(item.toString()); 
                 $('.' + 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>");
                 }
             });
         }
     })(jQuery);
    
    </script>
 <script type="text/javascript">
        $(document).ready($.buildMenu("main_menu", 'Cheak A Blance'));
   </script>
   
    <div class="main_menu">
 
    <ul>
    </ul>    
    </div>
    <div class="lift_menu">
    </div>
    <div class="footer"></div>
    </div>
</body>
 

 

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
v2

1 solution

Rate this: bad
good
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) {
 
        alert(data.toString());
        alert(1);
 
        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>');
                alert(stringBuilder.toString());
                alert(2);
 
               if (dataMenu.SubMenuName != null) {
                               var submenu = [];
                               submenu = dataMenu.SubMenuName;
                               var splittedmenus = [];
                              splittedmenus = submenu.split(",");
                               alert(splittedmenus.length);
                                       stringBuilder.push('<div><ul>');
                                       for (var i = 0; i < splittedmenus.length; i++) {
                                           stringBuilder.push('<li ><a href="#" class="parent" ><span>' + splittedmenus[i] + '</span></a>');
                                           alert(stringBuilder.toString());
                        if (dataMenu.SubMenus != null)
                        {
                            var ssubmenu = [];
                            ssubmenu = dataMenu.SubMenus;
                            var splittingSsub = [];
 
                            splittingSsub = ssubmenu.split(',');
                            alert(splittingSsub.toString());
                            alert('3');
                            stringBuilder.push('<div><ul>');
                            for (var j = 0; j < splittingSsub.length; j++) {
                                alert('start ssub loop');
                                stringBuilder.push('<li><a href="#"  ><span>' + splittingSsub[j] + '</span></a></li>');
                                alert(stringBuilder.toString());
                                alert(4);
                            }
                            stringBuilder.push('</ul></div>');
                            alert('5');
                        }
                        alert('endloop');
                        stringBuilder.push('</li>');
 
                    }
                    stringBuilder.push('</ul></div>');
 

                }
 
                stringBuilder.push('</li>');
 
                $(".menu").append(stringBuilder.join(''));
            });
        }
    });
 
    </script>
  Permalink  

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