Fórum Montar menu com jquery vindo do banco tá dando pau #471789
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
Curtir tópico
+ 0Posts
03/03/2014
Pjava
Gostei + 0
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
Gostei + 0
05/03/2014
Pjava
Gostei + 0
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();Gostei + 0
05/03/2014
Pjava
Gostei + 0
05/03/2014
Pjava
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)