unordered list in MVC RSS

• • Reply
  

  waqas1980

  Member

  11 Points

  22 Posts

  unordered list in MVC

  Aug 03, 2012 05:50 AM|LINK

  I want to create menu using andtags. Im working in MVC3 + Razor. And I stored menu in database like this

  MenuId Name ParentMenuId OrderBy

  1   Item1       Null     1
  2   Item2       Null     2
  3   Item 2.1      2       1
  4   Item 2.1.1   3        1
  5   Item 2.1.2   3        2
  
  The HTML output should be

   

  <ul>

   
  

  <li><a href="#">Item1</a></li>

   
  

  <li><a href="#">Item2</a></li>
  

   

  <ul>

   
  

  <li><a href="#">Item2.1</a></li> 
  <ul>
   <li><a href="#">Item2.1.1</a></li>
   <li><a href="#">Item2.1.2</a></li>
   </ul> </ul> </ul>
  
  

  Can anyone please help me how can I generated menu from this. I tried searching on internet, but not able to find something which I can use. I see this article (http://stackoverflow.com/questions/942489/recursion-in-an-asp-net-mvc-view/942616#942616) where one reply is to create HTMLHelperExtension. But not able to find out in my case how to use.

  RAZOR mvc3

  WAQAS AZEEM
• • Reply
  

  raju dasa

  Star

  14406 Points

  2449 Posts

  Re: unordered list in MVC

  Aug 03, 2012 07:30 AM|LINK

  Hi,
  
  >First create a primarykey on MenuId and foreignkey on parentmenuid (in sql)
  
  >add linq2sql file to ur project(or reference it from other project), drag and drop your
  Menu table (from server explorer) onto the linq2sql designer.
  
  >then use this modified extension method: (from that site)

  namespace System.Web.Mvc
  {
      public static class HtmlHelperExtensions
      {
          public static string CategoryTree(this HtmlHelper html, IEnumerable<Menu> menus)
          {
              string htmlOutput = string.Empty;
          
              if (menus.Count() > 0)
              {
                  htmlOutput += "<ul>";
                  foreach (Menu menu in menus)
                  {
                      htmlOutput += "<li>";
                      htmlOutput += menu.Name;
                      htmlOutput += html.MenuTree(menu.Menus);
                      htmlOutput += "</li>";
                  }
                  htmlOutput += "</ul>";
              }
              return htmlOutput;
          }
      }
  }
  // where parameter "IEnumerable<Menu> menus" passed with "Menus" object from linq2sql

  
  
  

  RAZOR mvc3

  Happy Coding ! Mark as Answer if it helps.
  rajudasa.blogspot.com  ||  blog@opera
• • Reply
  

  AlexMgn

  Member

  102 Points

  24 Posts

  Re: unordered list in MVC

  Aug 03, 2012 07:33 AM|LINK

  Hi, waqas. To create menu from your data you need to use HtmlHelpers.

  So you can use Html.ActionLink(...) in your View.

  For example you can try something like this

  <ul class="menu">
  @foreach(Data.EntitySet.MemuLinks link in db.MenuLinks.OrderBy(o=>o.order))
  {
    <li>@Html.ActionLink(link.title,link.action,link.controller,null,null)</li>
  }
  </ul>

  where db is Entity object.

  I've create some helpers that work with method parameters that stored in database. If need, i can give example of this helpers.
  
  

  RAZOR mvc3

  Share your knowledge for free
• • Reply
  

  francesco ab...

  All-Star

  20912 Points

  3279 Posts

  Re: unordered list in MVC

  Aug 03, 2012 11:24 AM|LINK

  give a look here: http://mvccontrolstoolkit.codeplex.com/wikipage?title=Menu%20and%20MenuFor

  you can either use the Mvc Controls Toolkit helpers themselves or the basic ideas and techniques in the documentation.

  Francesco Abbruzzese http://www.dotnet-programming.com/
  Mvc Controls Toolkit | Data Moving Plug-in Videos
• • Reply
  

  robbygregory

  Member

  170 Points

  30 Posts

  Re: unordered list in MVC

  Aug 03, 2012 03:33 PM|LINK

  Check out the code snippets in this post I made last week to help someone create a dynamic menu from a list of items.

  <<http://forums.asp.net/t/1821309.aspx/1?Menu+Helper>>

  It uses Twitter.Bootstrap

  • Edited by robbygregory on Aug 03, 2012 05:53 PM
• • Reply
  

  waqas1980

  Member

  11 Points

  22 Posts

  Re: unordered list in MVC

  Aug 05, 2012 06:28 AM|LINK

  Thanks, but I created the menu links use HTML.ActionLink. Just need to create Menu where I can define N number of sub menus.

  RAZOR mvc3

  WAQAS AZEEM
• • Reply
  

  waqas1980

  Member

  11 Points

  22 Posts

  Re: unordered list in MVC

  Aug 05, 2012 06:41 AM|LINK

  Hi Raju,

  Is this code will return the list no matter how many sub menus are there.  And can you share a complete sample code. Is it possible?

  WAQAS AZEEM
• • Reply
  

  raju dasa

  Star

  14406 Points

  2449 Posts

  Re: unordered list in MVC

  Aug 06, 2012 06:15 AM|LINK

   Hi,
   

  seems yes, satisfied ur condition when test with linqpad.

  
   place above post code in a separate class file in MVC project.
   
   pass ur view with Menus object from ur controller:
   

  public ViewResult List()
   {
      var ctx = Dal.GetContext(); //datacontext from linq2sql
      var menus = ctx.Menus.AsEnumerable();
      return View(menus)
   }

   
   Your view should be strongly typed with IEnumerble<Menu>
   

  <div class="list">
      <%: Html.CategoryTree(Model) %>
   </div>

   //code not test, do changes as per ur implementation.

  Happy Coding ! Mark as Answer if it helps.
  rajudasa.blogspot.com  ||  blog@opera
  • Edited by Young Yang - MSFT on Aug 10, 2012 01:28 AM
  • Edited by waqas1980 on Oct 21, 2012 07:11 PM
• • Reply
  

  Bieters

  Member

  229 Points

  48 Posts

  Re: unordered list in MVC

  Aug 07, 2012 05:58 AM|LINK

  Hi I end up doing something similar.

  This is what I came up with

  http://icentroit.blogspot.be/2012/08/treeview-with-mvc3-and-razor.html

  Improvements always welcome

  • Edited by Bieters on Aug 07, 2012 06:00 AM
• • Reply
  

  waqas1980

  Member

  11 Points

  22 Posts

  Re: unordered list in MVC

  Aug 25, 2012 06:43 PM|LINK

  Hi Raju

  Can you please tell me what is this MenuTree on this line 

  htmlOutput += html.MenuTree(menu.Menus);

  WAQAS AZEEM