Montar menu com jquery vindo do banco tá dando pau
03/03/2014
0
MENU PRINCIPAL
MENU SECUNDÁRIO
Item1
Item2
Item 3
Abaixo o meu HTML. Está comentado a partir da UL principal, para carregar dinamicamente.
<div class="container_24 nav-menu"> <ul class="grid_24" id="menuheader"> @*<li> <a href="#" title="">Destinos mais procurados</a> <!-- DROP DOWN Destinos mais procurados --> <div class="container_24 dropdown-menu"> <ul class="grid_4"> <li>América do Sul</li> <li><a href="#" title="">Argentina</a></li> <li><a href="#" title="">Bariloche</a></li> <li><a href="#" title="">Chile</a></li> <li><a href="#" title="">Peru</a></li> </ul> <ul class="grid_4"> <li>América do Norte</li> <li><a href="#" title="">Estados Unidos</a></li> <li><a href="#" title="">Florida</a></li> <li><a href="#" title="">Disney</a></li> <li><a href="#" title="">Universal</a></li> <li><a href="#" title="">México</a></li> <li><a href="#" title="">Canadá</a></li> </ul> <ul class="grid_4"> <li>Europa</li> <li><a href="#" title="">Erupoa</a></li> <li><a href="#" title="">Itália</a></li> <li><a href="#" title="">Portugal</a></li> </ul> <ul class="grid_4"> <li>Caribe</li> <li><a href="#" title="">Caribe</a></li> </ul> <ul class="grid_4"> <li>Brasil</li> <li><a href="#" title="">Brasil</a></li> <li><a href="#" title="">Club Med</a></li> </ul> <ul class="grid_4"> <li>Ásia e África</li> <li><a href="#" title="">Abu Dhabi e Dubai</a></li> <li><a href="#" title="">Exóticos</a></li> <li><a href="#" title="">Roteiro África</a></li> </ul> <div class="clear"> </div> <ul class="grid_4"> <li>Europa</li> <li><a href="#" title="">Erupoa</a></li> <li><a href="#" title="">Itália</a></li> <li><a href="#" title="">Portugal</a></li> </ul> </div> <!-- END DROP DOWN Destinos mais procurados --> </li> <li> <a href="#" title="">Pacotes & Roteiros</a> <!-- DROP DOWN Pacotes & Roteiros --> <div class="container_24 dropdown-menu"> <ul class="grid_4"> <li>América do Sul</li> <li><a href="#" title="">Argentina</a></li> <li><a href="#" title="">Bariloche</a></li> <li><a href="#" title="">Chile</a></li> <li><a href="#" title="">Peru</a></li> </ul> <ul class="grid_4"> <li>América do Sul</li> <li><a href="#" title="">Argentina</a></li> <li><a href="#" title="">Bariloche</a></li> <li><a href="#" title="">Chile</a></li> <li><a href="#" title="">Peru</a></li> </ul> </div> <!-- END DROP DOWN Pacotes & Roteiros --> </li> <li> <a href="#" title="">Cruzeiros</a> </li> <li> <a href="#" title="">Hotéis</a> </li> <li> <a href="#" title="">Esportes</a> </li> <li> <a href="#" title="">Luxo</a> </li> <li> <a href="#" title="">Mais</a> <!-- DROP DOWN Mais --> <div class="container_24 dropdown-menu"> <ul class="grid_4"> <li>América do Norte</li> <li><a href="#" title="">Disney</a></li> <li><a href="#" title="">Universal</a></li> <li><a href="#" title="">Orlando</a></li> </ul> </div>*@ <!-- END DROP DOWN Mais --> </li> </ul> </div>
Abaixo o meu LINQ que tras do banco, as informações para montar o MENU
[HttpPost] public JsonResult MontaMenuSuperiorDestino() { AgaxturCmsEntities db = new AgaxturCmsEntities(); try { var resultado = (from c in db.TB_MENUSUPERIOR_CATEGORIAS join s in db.TB_MENUSUPERIOR_SUBCATEGORIAS on c.id equals (s.Id_Categoria) join s2 in db.TB_MENUSUPERIOR_SUBCATEGORIAS2 on s.id equals(s2.Id_SubCategoria) where c.Ativo == 1 && c.CdCliente == 1 select new { c.id, c.Categoria, subconsulta = (from sub in db.TB_MENUSUPERIOR_SUBCATEGORIAS where sub.Ativo == 1 && sub.CdCliente == 1 && sub.Id_Categoria == c.id select new { sub.Id_Categoria, sub.SubCategoria, subconsulta2 = (from sub2 in db.TB_MENUSUPERIOR_SUBCATEGORIAS2 where sub2.Ativo == 1 && sub2.CdCliente == 1 && sub2.Id_Categoria == c.id select new { sub2.Id_SubCategoria, sub2.SubCategoria2 } ).ToList() } ).ToList(), }).ToList(); return Json(new { resultado }, JsonRequestBehavior.AllowGet); } catch (Exception ex) { return Json(new { resultado = ex.Message }, JsonRequestBehavior.AllowGet); } }
E abaixo o meu jquery para montar o MENU
function MontaMenuSuperiorDestino() { var str = ""; $.ajax({ url: '/Home/MontaMenuSuperiorDestino', dataType: "json", contentType: "application/json; charset=utf-8", type: "POST", success: function (data) { $(data.resultado).each(function () { str = str + '<li><a href="#" title="">' + this.Categoria + '</a>'; $(this.subconsulta).each(function () { str = str + ' <div class="container_24 dropdown-menu"><ul class="grid_4"><li>' + this.SubCategoria + '</li>'; $(this.subconsulta2).each(function () { str = str + '<li><a href="#" title="">' + this.SubCategoria2 + '</a></li>'; }); str = str + '</ul></div>'; }); str = str + '</li>'; $("#menuheader").append(str); str = ""; }); }, error: function (error) { } }); }
Pjava
Posts
03/03/2014
Pjava
04/03/2014
Pjava
<li><a href="#" title="">Destinos mais procurados</a> <div class="container_24 dropdown-menu"> <ul class="grid_4"> <li>América do Sul</li> <li><a href="#" title="">Argentina</a></li> <li><a href="#" title="">Bariloche</a></li> <li><a href="#" title="">Chile</a></li> <li><a href="#" title="">Peru</a></li> </ul> </div> <div class="container_24 dropdown-menu"> <ul class="grid_4"><li>América do Norte</li> <li><a href="#" title="">Estados Unidos</a></li> <li><a href="#" title="">Florida</a></li> <li><a href="#" title="">Disney</a></li> <li><a href="#" title="">Universal</a></li> <li><a href="#" title="">México</a></li> <li><a href="#" title="">Canadá</a></li> <li><a href="#" title="">Caribe</a></li> </ul></div> <div class="container_24 dropdown-menu"> <ul class="grid_4"> <li>Europa</li> <li><a href="#" title="">Portugal</a></li> </ul></div> <div class="container_24 dropdown-menu"> <ul class="grid_4"> <li>Caribe</li> <li><a href="#" title="">Erupoa</a></li> <li><a href="#" title="">Itália</a></li> </ul></div> <div class="container_24 dropdown-menu"> <ul class="grid_4"><li>Brasil</li> <li><a href="#" title="">Brasil</a></li> <li><a href="#" title="">Club Med</a></li> </ul></div> <div class="container_24 dropdown-menu"> <ul class="grid_4"><li>Ásia e África</li> <li><a href="#" title="">Abu Dhabi e Dubai</a></li> <li><a href="#" title="">Exóticos</a></li> </ul></div>
Esse já é minha terceira iteração
<li><a href="#" title="">Destinos mais procurados</a> <div class="container_24 dropdown-menu"><ul class="grid_4"><li>América do Sul</li><li><a href="#" title="">Argentina</a></li><li><a href="#" title="">Bariloche</a></li><li><a href="#" title="">Chile</a></li><li><a href="#" title="">Peru</a></li></ul></div> <div class="container_24 dropdown-menu"><ul class="grid_4"><li>América do Norte</li><li><a href="#" title="">Estados Unidos</a></li><li><a href="#" title="">Florida</a></li><li><a href="#" title="">Disney</a></li><li><a href="#" title="">Universal</a></li><li><a href="#" title="">México</a></li><li><a href="#" title="">Canadá</a></li><li><a href="#" title="">Caribe</a></li></ul></div> <div class="container_24 dropdown-menu"><ul class="grid_4"><li>Europa</li><li><a href="#" title="">Portugal</a></li></ul></div> <div class="container_24 dropdown-menu"><ul class="grid_4"><li>Caribe</li><li><a href="#" title="">Erupoa</a></li><li><a href="#" title="">Itália</a></li></ul></div> <div class="container_24 dropdown-menu"><ul class="gr
05/03/2014
Pjava
05/03/2014
Pjava
var resultado = (from c in db.TB_MENUSUPERIOR_CATEGORIAS //join s in db.TB_MENUSUPERIOR_SUBCATEGORIAS on c.id equals (s.Id_Categoria) //join s2 in db.TB_MENUSUPERIOR_SUBCATEGORIAS2 on c.id equals(s2.Id_Categoria) where c.Ativo == 1 && c.CdCliente == 1 select new { c.id, c.Categoria, subconsulta = (from sub in db.TB_MENUSUPERIOR_SUBCATEGORIAS where sub.Ativo == 1 && sub.CdCliente == 1 && sub.Id_Categoria == c.id select new { sub.Id_Categoria, sub.SubCategoria, subconsulta2 = (from sub2 in db.TB_MENUSUPERIOR_SUBCATEGORIAS2 where sub2.Ativo == 1 && sub2.CdCliente == 1 && sub2.Id_SubCategoria == sub.id select new { sub2.Id_SubCategoria, sub2.SubCategoria2 } ).ToList() } ).ToList(), }).ToList();
05/03/2014
Pjava
05/03/2014
Pjava
Clique aqui para fazer login e interagir na Comunidade :)