ASP .NET MVC  -  Usando o plugin jQuery : Treeview (Entity Framework) - II

Neste artigo vou mostrar como usar o plugin jQuery Treeview que transforma uma lista não ordenada em um árvore de nós que pode ser expandida e recolhida.

Na primeira parte do artigo criamos o projeto, referenciamos o Entity Framework e o pacote jquery.treeview, definimos o modelo de domínio, inicializamos o banco de dados com informações e definimos a string de conexão com o banco de dados SQL Server usado na aplicação.

Vamos agorar criar o controlador HomeController e a view Index no projeto.

Recursos usados:

Nota: Baixe e use a versão Community 2015 do VS ela é grátis e é equivalente a versão Professional.

Criando o controlador HomeController e a view Index

Abra a solução Mvc_TreeView, criada na primeira parte do artigo no Visual Studio Community 2015.

A seguir clique com o botão direito sobre a pasta Controllers e a seguir em Add -> Controller;

Selecione o template MVC 5 Controller - Empty e clique no botão Add;

Informe o nome HomeController e a seguir inclua o código abaixo neste arquivo:

using Mvc_TreeView.Models;
using System.Collections.Generic;
using System.Web.Mvc;
namespace Mvc_TreeView.Controllers
{
    public class HomeController : Controller
    {
        CapituloContexto db = new CapituloContexto();
        // GET: Home
        public ActionResult Index()
        {
            //obtem a lista para passar os dados para a view
            IList<Modelo> capitulos = ListaCapitulo();
            return View(capitulos);
        }
        public IList<Modelo> ListaCapitulo()
        {
            IList<Modelo> capitulos = new List<Modelo>();
            foreach (var capitulo in db.Capitulos)
            {
                var cap = new Modelo
                {
                    Id = capitulo.CapituloID,
                    Nome = capitulo.Nome,
                    Tipo = "capitulo"
                };
                foreach (var topico in capitulo.Topicos)
                {
                    var top = new Modelo
                    {
                        Id = topico.TopicoID,
                        Nome = topico.Nome,
                        Tipo = "topico"
                    };
                    foreach (var subtopico in topico.SubTopicos)
                    {
                        var subtop = new Modelo
                        {
                            Id = subtopico.SubTopicoID,
                            Nome = subtopico.Nome,
                            Tipo = "subtopico"
                        };
                        top.Lista.Add(subtop);
                    }
                    cap.Lista.Add(top);
                }
                capitulos.Add(cap);
            }
            return capitulos;
        }
    }
}

Neste código obtemos os dados das tabelas criadas no SQL Server e criamos uma lista que será usada pela view Index.

Agora clique com o botão direito no interior do método Action Index e a seguir em Add View;

Informe o template Empty e clique no botão Add;

A seguir defina o código abaixo para o arquivo Index.cshtml na pasta Views/Home : 

@model IEnumerable<Mvc_TreeView.Models.Modelo>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/Content/jquery.treeview.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.treeview.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#capituloPastas').treeview({ collapsed: true });
        });
    </script>
</head>
<body>
  <div>
       @helper TreeView(IEnumerable<Mvc_TreeView.Models.Modelo> items)
        {
            foreach (var item in items)
            {
                <li>
                @if (item.IsChild)
                {
                    <span class="leaf @item.Tipo" id="@item.Id">@item.Nome</span>
                }
                else
                {
                    <span class="folder">@item.Nome</span>
                    <ul>
                        @TreeView(item.Lista)
                    </ul>
                }
                </li>
            }
        }
        <h1>Macoratti .net - TreeView com ASP.Net MVC</h1> 
        <hr />
        <ul id="capituloPastas" class="filetree treeview-famfamfam">
            @TreeView(Model)
        </ul>
 </div>
</body>
</html>

Agora é só alegria...

Executando o projeto iremos obter o seguinte resultado:

Pegue o projeto com o código neste link :  Mvc_TreeView.zip (sem as referências)

"Porque estas nações, que hás de possuir, ouvem os prognosticadores e os adivinhadores; porém a ti o Senhor teu Deus não permitiu tal coisa."
Deuteronômio 18:14

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Quer aprender a criar aplicações Web Dinâmicas usando a ASP .NET MVC 5 ?

 

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

 

Referências:

José Carlos Macoratti