Montar menu com jquery vindo do banco tá dando pau

.NET

03/03/2014

Estou com um problema que eu não consigo resolver. Preciso montar um menu, em três níveis e não está funcionando. Com dois níveis eu consegui, mas com três não está funcionando. Creio que seja um dos meus each(o primeiro), acho. Está assim(estático). Uma DIV(Principal, geral) dentro dessa DIV tem uma UL(Principal, geral). A partir daí, dessa UL, eu tenho uma LI e uma A HREF, e um MENU. Depois tenho mais uma LI e uma A HREF e assim até o último item. Bem, isso é estático, como eu recebi o HTML. O que passa é que eu preciso agora montar essa mesma estrutura, mas dinamicamente, vindo do banco de dados. Eu disse três níveis, porque está assim. Um Menu principal. Passando o mouse nele, me abre um item e dentro desse item, vários subitens. Tipo assim:
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

Pjava

Curtidas 0

Respostas

Pjava

Pjava

03/03/2014

Esqueci de dizer qual é o erro. O erro é o seguinte. No meu BD existe, no primeiro menu ele monta da tabela TB_MENUSUPERIOR_CATEGORIAS e nessa tabela existe apenas cinco registro. O que passa que ele repete várias vezes o primeiro MENU. No segundo nível, ele mostra o último registro da tabela TB_MENUSUPERIOR_SUBCATEGORIAS e quando deveria ser o primeiro e no terceiro nível ele pega todos os registros e não apenas os que possuem chave da tabela referida. Eu não fiz o banco, ele já existia.
GOSTEI 0
Pjava

Pjava

03/03/2014

Pessoal, debugando a função javascript(jquery), o bservei que o foreach traz a primeira linha várias vezes. Assim, a primeira linha(Primeiro item de menu, seria DESTINOS MAIS PROCURADOS) e a segunda deveria ser(PACOTES & ROTEIROS) só DESTINOS MAIS PROCURADOS continua aparecendo na segunda iteração do loop e na terceira e acho que se repete de acordo com a quantidade de linhas na segunda tabela. Veja o que me trouxe. Meu problema está no each da jquery. Alguém pode me ajudar?

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

Pjava

03/03/2014

Bem, olhando bem a query eu em realidade tenho um "join" e é claro que vai sim, repeti sempre a primeira linha para cada linha da outra tabela. Agora sim, já sei qual é o erro e vou corrigir a minha query. Sei que esse forum não é de query, mas se alguém tem idéia, agradeço.
GOSTEI 0
Pjava

Pjava

03/03/2014

Removi o join e parece querer funcionar, mas ainda está dando pau, pois está montando o Menu exatamente com os itens que não tem relacionamento e deveria ser o oposto. Veja como ficou minha LINQ

 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
Pjava

Pjava

03/03/2014

É o seguinte. Veja só a minha LINQ. Ela deveria trazer somente os itens que se relaciona com a SubCategoria e SubCategoria2. No banco está assim. Existe 7 itens de Categoria, mas apenas três(3) se relaciona com a SubCategoria e existe 8 itens em SubCategoria e todos se relacionam em SubCategoria2. Acontece que quando o MENU é montado, somente os itens da Categoria que não têm relacionamento com a SubCategoria é que aparecem no MENU e deveria ser exatamente o contrário. O que pode estar errado na minha LINQ e na minha JQuery? Desde já agradeço.
GOSTEI 0
Pjava

Pjava

03/03/2014

Bem, uma coisa eu consegui resolver, que é trazer os itens. Mudei a LINQ e resolveu(retirei o join ). Quando eu passe a mensagem anterior, no meu Note não funcionou, mas vim para a empresa e já está ok. O que está acontecendo agora, é que nos itens que tem vários subcategoria e as subcategorias várias subcategorias2, o menu não é montado corretamente, ou seja, deveria vir um ao lado do outro e do jeito que está, um sobrepõe o outro. Podem me ajudar?
GOSTEI 0
POSTAR