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

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.
O controle TreeView é utilizado para exibir dados de natureza hierárquica tais como organogramas organizacionais , dados hierárquicos , arquivos e diretórios , etc...

Eu já escrevi dezenas de artigos sobre o controle TreeView da Windows Forms e neste artigo vou mostrar como simular o mesmo comportamento em uma aplicação ASP .NET MVC 5.

Em nosso projeto de exemplo vamos precisar do componente jQuery Treeview que pode ser obtido neste link : http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

Nosso objetivo será exibir uma estrutura hierárquica envolvendo Capítulos -> Tópicos -> Subtópicos muito parecido com um índice de um livro.

Abaixo vemos um exemplo da estrutura que iremos exibir em uma página ASP .NET MVC:

Vamos persistir as informações em um banco de dados SQL Server usando o Entity Framework na abordagem  Code First.

Recursos usados:

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

Criando a solução no VS 2015

Abra o Visual Studio Community 2015 e clique em New Project;

Selecione Visual C# e clique em Web;

Você verá a janela abaixo exibindo dois novos tipos de projetos web:

Selecione o template Empty e marque a opção MVC de forma a criar uma solução vazia.

Vamos já incluir uma referência ao Entity Framework no projeto.

Clique no menu Tools e a seguir em Nuget Package Manager -> Manage Nuget Packages for Solution;

Digite entityframework e selecione o item e o projeto e clique no botão Install:

Repita o procedimento e localize e instale o pacote jquery.treeview.

Descompacte o arquivo jquery-treeview-master.zip obtido da referência e copie o arquivo jquery.treeview.css na pasta Content e o arquivo jquery-treeview-1.0.1.js na pasta Scripts.

Copie também a pasta images no interior da pasta Content.

Definindo o nosso modelo de domínio na pasta Models

Vamos criar 3 classes que vai representar a nossa estrutura hierárquica :

  1. Capitulo

  2. Topico

  3. SubTopico

Clique com o botão direito do mouse sobre a pasta Models e a seguir em Add -> Class;

Informe o nome Capitulo e a seguir inclua o código abaixo nesta classe:

    [Table("Capitulos")]
    public class Capitulo
    {
        public int CapituloID { get; set; }
        public string Nome { get; set; }
        public virtual ICollection<Topico> Topicos { get; set; }
    }

Note que a classe Capitulo possui uma coleção de Topicos.

Repita o procedimento acima e crie a classe Topico com o código abaixo:

    [Table("Topicos")]
    public class Topico
    {
        public int TopicoID { get; set; }
        public string Nome { get; set; }
        public virtual ICollection<SubTopico> SubTopicos { get; set; }
        public int CapituloID { get; set; }
        public virtual Capitulo Capitulo { get; set; }
    }

 

Note que a classe Topico possui uma coleção de SubTopicos e uma referência à classe Capitulo.

Repita o procedimento acima e crie a classe SubTopico com o código abaixo:

    [Table("SubTopicos")]
    public class SubTopico
    {
        public int SubTopicoID { get; set; }
        public string Nome { get; set; }
        public int TopicoID { get; set; }
        public virtual Topico Topico { get; set; }
    }

Note que a classe SubTopico possui uma referência à classe Topico.

Alerta: Em todas as classes estamos usando o namespace   using System.ComponentModel.DataAnnotations.Schema; e usando o atributo [Table("nomeTabela")] para definir o nome da tabela que será criada no banco de dados.
Agora vamos criar uma classe que vai obter os dados gerando uma estrutura hierárquica da informação composta por capítulos, tópicos e subtópicos.

Clique com o botão direito do mouse sobre a pasta Models e a seguir em Add -> Class;

Informe o nome Modelo e a seguir inclua o código abaixo nesta classe:

[Table("Modelos")]
public class Modelo
    {
        public Modelo()
        {
            this.Lista = new List<Modelo>();
        }
        public int Id { get; set; }
        public string Nome { get; set; }
        public string Tipo { get; set; }

        public IList<Modelo> Lista { get; private set; }
        public bool IsChild
        {
            get
            {
                return this.Lista.Count == 0;
            }
        }
    }

 

Nesta classe vamos compor a informação hierárquica e identificar os nós filhos da árvore.

Agora vamos criar a classe CapituloContexto que vai representar o nosso contexto.

Clique com o botão direito do mouse sobre a pasta Models e a seguir em Add -> Class;

Informe o nome CapituloContexto e a seguir inclua o código abaixo nesta classe:

    public class CapituloContexto : DbContext
    {
        public DbSet<Capitulo> Capitulos { get; set; }
        public DbSet<Topico> Topicos { get; set; }
        public DbSet<SubTopico> SubTopicos { get; set; }
        public System.Data.Entity.DbSet<Modelo> Modelos { get; set; }
    }

Finalmente, vamos criar a classe ModelInitializer que vai herdar de DropCreateDatabaseIfModelChanges e que vamos usar para definir alguns dados em nosso projeto para serem exibidos.

Clique com o botão direito do mouse sobre a pasta Models e a seguir em Add -> Class;

Inicializando o banco de dados com informações

Informe o nome ModelInitializer e a seguir inclua o código abaixo nesta classe:

using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
namespace Mvc_TreeView.Models
{
    public class ModelInitializer : DropCreateDatabaseIfModelChanges<CapituloContexto>
    {
        protected override void Seed(CapituloContexto ctx)
        {
            var capitulos = new List<Capitulo>
            {
                new Capitulo
                {
                    Nome = "Modelo de Relacionamento de Entidade"
                },
                new Capitulo
                {
                    Nome ="Modelo Relacional"
                },
                new Capitulo
                {
                    Nome = "Normalização"
                }
            };
            var topicos = new List<Topico>
            {
                new Topico
                {
                    Nome = "Entity e Entity sets",
                    Capitulo = capitulos.Single(m => m.Nome == "Modelo de Relacionamento de Entidade")
                },
                new Topico
                {
                    Nome = "Mapeando de Restrições e Chave Primária ",
                    Capitulo = capitulos.Single(m => m.Nome == "Modelo de Relacionamento de Entidade")
                },
                new Topico
                {
                    Nome = "Diagrama Entidade Relacionamento",
                    Capitulo = capitulos.Single(m => m.Nome == "Modelo de Relacionamento de Entidade")
                },
                new Topico
                {
                    Nome = "Restrições de Integridade",
                    Capitulo = capitulos.Single(m => m.Nome == "Modelo Relacional")
                },
                new Topico
                {
                    Nome = "Álgebra Relacional",
                    Capitulo = capitulos.Single(m => m.Nome == "Modelo Relacional")
                },
                new Topico
                {
                    Nome = "Modificando o banco de dados",
                    Capitulo = capitulos.Single(m => m.Nome == "Modelo Relacional")
                },
                new Topico
                {
                    Nome = "Introdução a dependência funcional",
                    Capitulo = capitulos.Single(m => m.Nome == "Normalização")
                },
                new Topico
                {
                    Nome = "Normalização 1NF,2NF,3NF,BCNF,4NF,5NF",
                    Capitulo = capitulos.Single(m => m.Nome == "Normalização")
                }
            };
            var subtopicos = new List<SubTopico>
            {
                new SubTopico
                {
                    Nome = "Entidades",
                    Topico = topicos.Single(m => m.Nome == "Diagrama Entidade Relacionamento")
                },
                new SubTopico
                {
                    Nome = "Seleção, Projeção",
                    Topico = topicos.Single(m => m.Nome == "Álgebra Relacional")
                },
                new SubTopico
                {
                    Nome = "Dependências Funcionais Mínimas",
                    Topico = topicos.Single(m => m.Nome == "Introdução a dependência funcional")
                },
                new SubTopico
                {
                    Nome = "Dependências Funcionais Equivalentes",
                    Topico = topicos.Single(m => m.Nome == "Introdução a dependência funcional")
                }
            };
            capitulos.ForEach(m => ctx.Capitulos.Add(m));
            topicos.ForEach(m => ctx.Topicos.Add(m));
            subtopicos.ForEach(m => ctx.SubTopicos.Add(m));
        }
    }
}

Esta classe irá criar os capítulos, tópicos e subtópicos relacionados persistindo os dados no banco de dados SQL Server quando da execução do projeto.

Definindo a string de conexão com o banco de dados SQL Server

Agora vamos definir no arquivo web.config a string de conexão com o banco de dados SQL Server que será criado:

Abra o arquivo Web.Config e inclua o código abaixo:

...
 <connectionStrings>
     <add name="CapituloContexto" connectionString="Data Source=.\sqlexpress; Initial Catalog=Capitulo;Integrated Security=true;MultipleActiveResultSets=true;" providerName="System.Data.SqlClient"/>
  </connectionStrings>
...

Observe que o nome da string de conexão é o nome da nossa classe de contexto.

Já temos toda a infraestrutura pronta em nosso projeto e podemos criar o controlador e a view para exibir as informações em um formato hierárquico.

Na segunda parte do artigo iremos criar o controlador HomeController e view Index.

"Bendito o Deus e Pai de nosso Senhor Jesus Cristo, o qual nos abençoou com todas as bênçãos espirituais nos lugares celestiais em Cristo;"
Efésios 1:3

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