How to create Menus and SubMenus from database in asp.net WebaAPI?

Question

4.50/5 (2 votes)

See more:

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

C#

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 6:04am

shakil4u

Updated 13-Sep-12 19:14pm

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

shakil4u · Accepted Answer · 2012-09-25T21:12:00

As of above question we can disply menus and submenus and also subsubmenus

look the code

XML

<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>