Neste conjunto de artigos serão demonstrados os seguintes recursos:

  • Review do Microsoft ASP .NET MVC 5.
  • Bootstrap.
  • Review do JQuery Core.
  • Jquery-Ajax, sintaxe e aplicação de suas principais funcionalidades.

Observação: todos os exemplos aqui descritos foram implementados através do Visual Studio 2013 SP3.

O objetivo principal será demonstrar soluções de implementação do Ajax, com exemplos mais simples possíveis, para melhor entendimento de todos. Será dividida em duas partes, construção da estrutura do projeto e implantação das Controllers e CRUD com Ajax.

Porque ASP .NET MVC e Ajax?

Antes de tudo, precisamos entender o porquê de fazer o uso destas ferramentas, se existem outras excelentes para isto. Temos muitos exemplos sobre como utilizá-lo consumindo serviços ASP.NET Web API, WCF, bla bla bla. Mas precisamos entender como trabalhamos com Ajax, quando temos um projeto em ASP.NET MVC.

CRUD? SPA? What?

O termo CRUD, em inglês Create Read Update e Delete. São operações mais utilizadas em nosso dia-a-dia, Cadastrar, Ler, Atualizar e Remover dados. São extremamente utilizadas, em praticamente toda aplicação.

SPA, em inglês Single Page Application, ou seja, toda aplicação é executada em uma única página.

Criação do Projeto

Faremos toda a aplicação utilizando de um banco de dados Fictício, ou seja, os dados permanecerão em memória enquanto a aplicação estiver ativa, uma lista estática para os exemplos.

Seguindo o caminho abaixo, vamos à criação do projeto:

File > New > Project > Visual C# > Web> ASP.NET Web Application > OK. Não se esqueça de verificar a versão  do Framework para 4.5.1.

Imagem 1 – Criação do Projeto

criacao do projeto

Imagem 2 – Escolha do Template.

escolha do template

Imagem 2 – Para auxiliar-nos na construção de aplicações, temos a opção de Templates pré-prontos a fim de facilitar todo o desenvolvimento. Para nosso exemplo, a aplicação criará as pastas para divisão do projeto. Portanto, escolha o Template Empty, marque a caixa para MVC e dê OK.

Imagem 3 – Projeto com Template Empty.

projeto em branco

Criação das Pastas do Projeto.

Neste ponto, com o botão direito do mouse na pasta Models, selecionamos New Folder. Criaremos três pastas, ModelNegocio e Repositorio, criadas a fim de facilitar e dividir nosso projeto, famosa Arquitetura em Multicamadas.

Imagem 4 – Pastas do projeto após a criação.

criacao das pastas

Novamente com o botão direito do mouse, clique em Model >  Add > Class.

 Imagem 5 – Criação da Classe PessoaModel

criacao de pessoa model

Criaremos as propriedades seguindo o exemplo a seguir.

Listagem 1 – Propriedades da Classe PessoaModel

using System;
namespace JqueryAjax.AspNetMVC.CRUD.Models.Model
{
    public class PessoaModel
    {
        public int Id { get; set; }
        public String Nome { get; set; }
        public DateTime DataNascimento { get; set; }
        public String Email { get; set; }
    }
}

Em Models > Repositorio criaremos uma nova classe chamada PessoaRep. Será utilizada para as operações de cadastro, edição, atualização e listagem dos dados.

Para o exemplo, utilizaremos de uma lista estática, ou seja, os dados serão armazenados em memória.

Listagem 2 – Repositório – Classe PessoaRep

using System.Collections.Generic;
using System.Linq;

//importamos esta namespace para utilizar a classe PessoaModel
using JqueryAjax.AspNetMVC.CRUD.Models.Model;

namespace JqueryAjax.AspNetMVC.CRUD.Models.Repositorio
{
  public class PessoaRep
  {
    //como o foco nao é banco de dados, criamos uma lista estática
    private static List<PessoaModel> _listPessoas;

    //construtor da classe
    public PessoaRep()
    {
       //caso nossa lista nao for instanciada,
       //ele cria a nova instancia
        if (_listPessoas == null)
        {
            _listPessoas = new List<PessoaModel>();
        }
    }
    //retorna o objeto que possuir aquele Id expecífico.
    public PessoaModel GetById(int id)
    {
        return _listPessoas.SingleOrDefault(m => m.Id == id);
    }

    //Responsável pelo cadastro de novas pessoas.
    public void Cadastrar(PessoaModel pessoa)
     {
        //para o objeto static, fizemos esta logica
        //para a cada nova pessoa, adicionar um novo Id
        var id = 1;

        //vai incrementando a variavel até que nao existir um Id
        //com aquele valor
        while (_listPessoas.Any(x => x.Id == id))
             id++;

        //após encontrar um Id que não está sendo utilizado,
        //atribui à nossa nova pessoa
        pessoa.Id = id;

        //adiciona a pessoa no nosso banco fantasia
        _listPessoas.Add(pessoa);
     }

    //responsável por verificar uma pessoa existente
    //e atualizar os dados
    public void Atualizar(PessoaModel pessoa)
    {
        //pega em nosso banco fantasia aquela pessoa existente
        var pessoaDadoAnterior = GetById(pessoa.Id);
        if (pessoaDadoAnterior != null)
        {
            //usando reflection, pegamos todas as propriedades
            // daquela pessoa com exceção do Id
            //e adicionamos o novo valor do objeto
            foreach (var propertyInfo in typeof(PessoaModel)
                .GetProperties().Where(x => x.Name != "Id"))
            {
                //primeiro parâmetro é o objeto antigo
                //segundo parametro é onde vai setar o novo valor
                propertyInfo.SetValue(pessoaDadoAnterior, propertyInfo.GetValue(pessoa));
            }
        }
     }
     //responsável por remover um item
     public void Deletar(int id)
     {
        //Pega em nosso banco fantasia aquela pessoa
        var obj = GetById(id);

        //remove da lista estática(banco fantasia).
        _listPessoas.Remove(obj);
     }

     public IEnumerable<PessoaModel> Listar()
     {
        //retorna a lista somente leitura de pessoas
        return _listPessoas;
     }
   }
}

A fim de Organizar nosso código, na pasta Models > Negocio, criaremos a classe PessoaNeg, responsável pelo intermédio de Controllers para Repositorio, seguindo o Pattern Multicamadas.

Listagem 3 – Classe de Regras de Negocio da Aplicação – PessoaNeg.

//importamos a namespace para usar a classe PessoaModel
using JqueryAjax.AspNetMVC.CRUD.Models.Model;

//importamos a namespace para usar nosso repositorio
using JqueryAjax.AspNetMVC.CRUD.Models.Repositorio;

using System.Collections.Generic;

namespace JqueryAjax.AspNetMVC.CRUD.Models.Negocio
{
    public  class PessoaNeg
    {
        public void Cadastrar(PessoaModel pessoa)
        {
            new PessoaRep().Cadastrar(pessoa);
        }

        public void Atualizar(PessoaModel pessoa)
        {
            new PessoaRep().Atualizar(pessoa);
        }

        public void Deletar(int idPessoa)
        {
            new PessoaRep().Deletar(idPessoa);
        }

        public PessoaModel GetById(int id)
        {
            return new PessoaRep().GetById(id);
        }
        public IEnumerable<PessoaModel> Listar()
        {
            return new PessoaRep().Listar();
        }
    }
}

Repare que esta classe serve apenas para transitar os dados de uma camada para a outra.

Conclusão.

Nesta introdução ao ASP.NET MVC, apresentamos as ferramentas que precisaremos para seguir adiante no próximo Artigo, a intenção foi apenas a construção do projeto, focaremos mais na parte Web no próximo conteúdo.

Não esqueça de deixar sua opinião, ela é fundamental para a melhoria contínua.

         Links

Erick Wendel Gomes da Silva

Microsoft Student Partner, MSDN Tech Advisor e Microsoft Partner Network. Instrutor, Palestrante e Vice Presidente do grupo .NET Coders. Fundador e organizador da comunidade .NET Coders Ladies, formando em Análise e Desenvolvimento de Sistemas. Também é MCP e Especialista em Web Development, atualmente desenvolvendo e aventurando-se em C#, Python, NodeJS e TypeScript.

Facebook LinkedIn Google+   

Comentários

comentarios