ASP .NET MVC - Crud com Entity Framework usando Serviços AngularJS - I

 

 Neste artigo eu vou mostrar como realizar a integração entre o ASP .NET MVC e recursos do AngularJS como serviços para realizar as operações CRUD em um banco de dados SQL Server usando o Entity Framewor na abordagem Code-First.

Este é um artigo básico que mostra na forma de um tutorial passo a passo como integrar os recursos do AngularJS como controllers e serviços com o ASP .NET MVC para realizar as operações de manutenção de dados : Incluir, Excluir e Deletar em uma tabela Livros do SQL Server usando o Entity Framework.

Este artigo vai usar o recurso do Angular chamado Service ou Serviços. Vamos então abordar de forma bem resumida o que é um serviço AngularJS.

Um serviço Angular é simplesmente um objeto que fornece algum tipo de serviço que pode ser reusado em uma aplicação AngularJS.

Os controllers AngularJS devem ser vistos como uma ponte dentre o model e a view e não devem conter lógica de negócio.

Assim os serviços servem para abstrair e encapsular regras de negócio e para realizar o acesso aos dados e também compartilhar dados com os controllers.

Nota: Nesta abordagem o  controller é responsável por usar o serviço e obter os dados que o template vai exibir e escrever esses dados em um objeto do escopo tornando-os acessível às views.

Os serviços no AngularJS são:

Assim os serviços podem ser usados para organizar e compartilhar código em sua aplicação. O Angular oferece muitos serviços prontos para uso como o $http, $log, $animate, etc.

No AngularJS podemos dizer que temos 5 tipos de serviços :

  1. factory

  2. provider

  3. service

  4. value

  5. constant

Neste artigo eu vou me ater ao service.

Abaixo vemos a figura que representa de forma simplificada o papel do serviço Angular na arquitetura MVC:

Vamos criar no exemplo deste artigo um controlador que chama um serviço que interage com o controlador da aplicação ASP .NET MVC usando o serviço $http.

A seguir temos a figura exibindo os recursos usados no projeto que será criado neste artigo:

Para alcançar nosso objetivo vamos realizar as seguintes tarefas:

A seguir vou mostrar como fazer isso na prática.

Recursos usados:

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

Criando a aplicação ASP .NET MVC no VS Community

Abra o VS Community 2015 e clique em New Project;

Selecione a linguagem Visual Basic ->ASP .NET Web Application;

Informe o nome Mvc_Crud_Angular_Service e clique no botão OK;

A seguir selecione o template Empty e marque a opção MVC, sem autenticação nem hospedagem na nuvem e clique em OK;

Instalando o AngularJS e o BootStrap

Acesso o menu TOOLS e em Nuget Package Manager e selecione Manage Nuget Package for Solutions.

Na janela do assistente selecione a guia Browse e informe AngularJS para localizar o pacote;

Selecione o pacote AngularJS.Core e clique no botão Install para instalar a biblioteca no projeto:

Após concluir a instalação do AngularJS informe o bootstrap na caixa de busca e a selecione a referência bootstrap clicando no botão Install:

Definindo o modelo de domínio e o contexto : Criando as classes Livro e LivroContexto

Vamos criar na pasta Models a classe Livro que representa o nosso modelo de domínio e que será usada para mapear para a tabela do banco de dados que será criada na abordagem Code-First from DataBase.

Clique com o botão direito do mouse sobre a pasta Models e a seguir clique em Add-> Class e informe o nome Livro.cs.

A seguir inclua o código abaixo nesta classe:

using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace Mvc_Crud_Angular_Service.Models
{
    [Table("Livros")]
    public class Livro
    {
        [Key]
        public int Id { get; set; }
        public string Titulo { get; set; }
        public string Autor { get; set; }
        public string Editor { get; set; }
        public string Isbn { get; set; }
    }
}

Na classe Livro definimos 5 propriedades que serão mapeados para campos da tabela Livros que será criada em um banco de dados que iremos definir no arquivo Web.Config.

Estamos usando o recurso do Data Annotations para definir os atributos Table e Key usados para definir uma convenção quando da criação da tabela.

A seguir vamos definir o contexto da aplicação criando a classe LivroContexto na pasta Models.

Clique com o botão direito do mouse sobre a pasta Models e a seguir clique em Add-> Class e informe o nome LivroContexto.cs.

A seguir inclua o código abaixo nesta classe:

using System.Data.Entity;
namespace Mvc_Crud_Angular_Service.Models
{
    public class LivroContexto : DbContext
    {
        public DbSet<Livro> livro { get; set; }
    }
}

A classe LivroContexto herda de DbContext e define uma propriedade do tipo DbSet().

O EF Code First permite que você conecte facilmente suas classes POCO do modelo em um banco de dados através da criação de uma classe "DbContext" que expõe propriedades públicas que mapeiam para tabelas do banco de dados.

Definindo a string de conexão com o banco de dados no arquivo web.Config

Para concluir essa parte abra o arquivo web.config e defina a string de conexão indicando em qual banco de dados deseja que a tabela Livros seja criada:

   ....
  </entityFramework>
  <connectionStrings>
    <add name="LivroContexto" connectionString="Data Source=.\sqlexpress;Initial Catalog=Escola;Integrated Security=True" providerName="System.Data.SqlClient"/>
  </connectionStrings>
</configuration>

Dessa forma ao executar pela primeira vez nossa aplicação a tabela Livros será criada no banco de dados Escola.mdf do SQL Server.

Criando o Controller HomeController na aplicação MVC

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

Selecione o scaffold - MVC 5 Controller - Empty e clique em Add;

Informe o nome HomeController e clique em OK;

Será criado o controlador HomeController contendo o método Action Index().

Vamos definir agora os métodos que irão acessar e realizar as tarefas CRUD no banco de dados via modelo de entidades retornando o resultado no formato JSON.

using System;
using System.Linq;
using System.Web.Mvc;
using Mvc_Crud_Angular_Service.Models;
namespace Mvc_Crud_Angular_Service.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }          
        // GET: Todos os livros
        public JsonResult GetTodosLivros()
        {
            using (LivroContexto contextObj = new LivroContexto())
            {
                try
                {
                    var listaLivros = contextObj.livro.ToList();
                    return Json(listaLivros, JsonRequestBehavior.AllowGet);
                }
                catch(Exception ex)
                {
                    throw ex;
                }
            }
        }
        //GET: livro por Id
        public JsonResult GetLivroPorId(string id)
        {
            using (LivroContexto contextObj = new LivroContexto())
            {
                var livroId = Convert.ToInt32(id);
                var getLivroPorId = contextObj.livro.Find(livroId);
                return Json(getLivroPorId, JsonRequestBehavior.AllowGet);
            }
        }

        //Atualiza Livro
        public string AtualizarLivro(Livro livro)
        {
            if (livro != null)
            {
                using (LivroContexto contextObj = new LivroContexto())
                {
                    int livroId = Convert.ToInt32(livro.Id);
                    Livro _livro = contextObj.livro.Where(b => b.Id == livroId).FirstOrDefault();
                    _livro.Titulo = livro.Titulo;
                    _livro.Autor = livro.Autor;
                    _livro.Editor = livro.Editor;
                    _livro.Isbn = livro.Isbn;
                    contextObj.SaveChanges();
                    return "Registro de livro atualizado com sucesso";
                }
            }
            else
            {
                return "Registro de livro inválido";
            }
        }        
        // Adiciona livro
        public string AdicionarLivro(Livro livro)
        {
            if (livro != null)
            {
                using (LivroContexto contextObj = new LivroContexto())
                {
                    try
                    {
                        contextObj.livro.Add(livro);
                        contextObj.SaveChanges();
                        return "Registro de livro adicionado com sucesso";
                    }
                    catch(Exception ex)
                    {
                        throw ex;
                    }
                }
            }
            else
            {
                return "Registro de livro inválido";
            }
        }        
        // Deleta livro
        public string DeletarLivro(string livroId)
        {
            if (!String.IsNullOrEmpty(livroId))
            {
                try
                {
                    int _livroId = Int32.Parse(livroId);
                    using (LivroContexto contextObj = new LivroContexto())
                    {
                        var _livro = contextObj.livro.Find(_livroId);
                        contextObj.livro.Remove(_livro);
                        contextObj.SaveChanges();
                        return "Registro do livro selecionado deletado com sucesso";
                    }
                }
                catch (Exception)
                {
                    return "Detalhes do livro não encontrado";
                }
            }
            else
            {
                return "Operação inválida";
            }
        }
    }
}

Embora seja um pouco extenso, o código definido é bem simples. Nesta classe temos os seguinte métodos:

Na próxima parte do artigo vamos continuar o projeto criando a aplicação AngularJS e definindo o Controller e o Service.

Tornou, pois, Jesus a dizer-lhes: Em verdade, em verdade vos digo que eu sou a porta das ovelhas.
Todos quantos vieram antes de mim são ladrões e salteadores; mas as ovelhas não os ouviram.
Eu sou a porta; se alguém entrar por mim, salvar-se-á, e entrará, e sairá, e achará pastagens.

João 10:7-9

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 ?

  Gostou ?   Compartilhe no Facebook   Compartilhe no Twitter

Referências:


José Carlos Macoratti