Recapitulando…

Vimos no artigo anterior à criação da estrutura do projeto, utilizando o pattern de camadas.
Caso ainda não tenha visto o artigo anterior acesse.

Neste artigo veremos os seguintes temas:

  • Review do ASP.NET MVC
  • Consumo de Dados em JSON com JQuery Ajax.
  • Utilização do plugin POST MAN do Google Chrome.

Observações:

Assim como no artigo anterior, utilizaremos o Visual Studio 2013 SP4. Faremos todo o projeto com métodos “na unha”. Para fixar o uso de sintaxe e semântica das ferramentas utilizadas.
Vamos agora iniciar a criação da parte web do nosso projeto. Clique com o botão direito do mouse, em Controllers, selecione Add > Controller > MVC5 Controller Empty > Add.

Imagem 1 – Criação da AppController

Imagem 1 - Criacao AppController

Imagem 1 – Escolha o Nome para a controler, digite AppController e clique em Add.

Imagem 2 – AppController

Imagem 2 - AppController

Imagem 2 – No exemplo temos a AppController com a Action padrão. A Controller será quem trabalhará com o Javascript/Ajax para transitar os dados e a o retorno ActionResult será  o retorno de nossos dados. Neste ponto criaremos o primeiro método chamado Cadastrar, receberá uma PessoaModel como parâmetro.

IMPORTANTE: Veremos nos passos a seguir que não trataremos os possíveis erros, os nossos try/catch foram colocados a fim de mostrar que você pode tratar seus erros, mas neste artigo não será abordado sobre a correção dos mesmos.

Listagem 1 – Criação de Método de Cadastro em AppController

//importamos tambem as namespaces para manipular as classes
using JqueryAjax.AspNetMVC.CRUD.Models.Model;
using JqueryAjax.AspNetMVC.CRUD.Models.Negocio;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

        //Informamos no Atributo que será uma requisição do tipo Post

        [HttpPost]

        public void Cadastrar(PessoaModel pessoa)
        {
            try
            {
                new PessoaNeg().Cadastrar(pessoa);
            }
            catch (Exception)
            {
                throw;
            }
        }



Listagem 2  – Criação de View Index

        //action padrao da AppController
        public ActionResult Index()
        {
            return View();
        }

Clicando com o botão direito em cima de View() cliente em Add View.

Imagem 3 – Criação de View Index

Imagem  3 - Adicionando Nova View Index

Feito isso clique em Add e aguarde o Scaffolding (Template gerado pelo Visual Studio com todos itens padrões (pastas, arquivos e etc)).

Imagem 4 – View Index

Imagem  4 - View Index

Imagem 4 – Repare que em Solution Explorer  foram adicionadas pastas como:

  • Content Onde ficarão seus arquivos CSS, por padrão já adicionou o bootstrap para nós.
  • Fonts – Fontes padrão do seu site.
  • Scripts – Por padrão, adicionou os arquivos do e Bootstrap.
  • Views>App – onde adicionaremos todo nosso SPA.
  • Views>Shared – todo conteúdo que será compartilhado entre as outras páginas é adicionado nesta pasta, como LayoutPadrao, e páginas reutilizáveis e etc.

 

A primeira coisa a se fazer, será em Views > Shared > _Layout e adicionar as seções conforme a Imagem 5 e 6.  Definiremos que os trechos com aquela seção serão renderizados na ordem definida. É boa prática usá-lo sempre em suas aplicações, para evitar scripts que não são utilizados em outras paginas sejam carregados ou fazer do uso de Bundles (este não faremos uma analogia neste artigo, para saber mais, acesse http://goo.gl/w72WQ0 e veja os detalhes deste assunto). Seguindo o RenderSecton, o primeiro parâmetro será o nome da seção, e o segundo informa se todas as páginas devem conter uma seção com este nome.

Imagem 5 – RenderSection(“styles”, false) – Para arquivos CSS

Imagem  5 - RenderStyles

Imagem 6 – RenderSection(“scripts”, false) – Para arquivos Javascript

Imagem  6 - RenderScripts

Em Views > App > Index, iremos abrir novamente nosso arquivo Index.cshtml, faremos um formulário com as mesmas propriedades definidas em PessoaModel

Listagem 3 – Index.cshtml – Cadastrar

@{
    ViewBag.Title = "Index";
}

<!-- Seção scripts definida como RenderSection("scripts", false) em ~/Views/Shared/_Layout.cshtml -->
@section scripts{
    <!--Ainda nao criamos este script, criaremos na proxima etapa -->
    <script src="~/Scripts/App/CrudApp.js"></script>
}

@section styles{
    <style>
        /*usado apenas para abaixar a borda em 50px*/
        body {
            margin: 50px;
        }
    </style>
}

<section id="conteudo" class="container">
    <!-- Usando as classes css do Bootstrap -->
    <div class="form-group">
        <section id="formulario">

           <!-- Formulário responsável por adicionar e atualizar pessoas -->
            <form action="/" method="post" id="formDados">

               <!-- usamos este tipo hidden para armazenar nosso Id -->
                <input type="hidden" name="Id" id="idPessoa" />
                <div class="form-group">
                    <label for="nome">Nome</label>
                    <input type="text" id="nome" class="form-control" name="nome" /></div>
                <div class="form-group">
                    <label for="DataNascimento">Data de Nascimento</label>
                    <input type="date" id="DataNascimento" class="form-control" name="DataNascimento" /></div>
                <div class="form-group">
                    <label for="Email">Email</label>
                    <input type="Email" id="Email" class="form-control" name="Email" /></div>
                <div class="form-group">

                    <!-- função onclick virá do nosso arquivo javascript na proxima etapa -->
                    <input type="button" id="salvar" value="Salvar" class="btn btn-success" onclick="Cadastrar()" />
                </div>
          </form>
        </section>
   </div>
</section>

Listagem 4 – Observe que na seção scripts estamos referenciando um arquivo Javascript que ainda não existe, então vamos criar este arquivo. No botão Salvar, temos a Função Cadastrar no atributo onclick, que será criada neste arquivo.

Antes de criar o nosso arquivo, compile e execute seu projeto, pressionando o F5 do teclado.

Imagem 7 – Projeto Rodando no Chrome

Imagem  7 - ProjetoRodando

Imagem 7 – Caso sua aplicação não for para nossa tela do formulário, na URL, digite após o localhost:PORTA/ coloque App/Index. Onde App é nossa Controller e Index nossa Action.

Podemos configurar este caminho de URL, para evitar este trabalho manual toda vez que executar sua aplicação. Na raiz do nosso projeto, abra a pasta AppStart > RouteConfig.cs conforme a Imagem 8.

Imagem 8 – RouteConfig.cs

Imagem  8 - ConfiguracaoRout

linha 19 – troque “Home” por “App” , conforme a Listagem 5.

Listagem 5 – Configuração das Rotas

defaults: new { controller = "App", action = "Index", id = UrlParameter.Optional }

Neste momento, estamos apontando como padrão a nossa AppController , toda vez que executar o play no projeto irá para esta Controller como padrão.

Agora, iremos criar uma nova pasta ( New Folder) em Scripts chamada App, clicando com o botão direito do mouse, vamos a Add > JavascriptFile, com o nome de CrudApp.js.

Imagem 9 – Criação do Arquivo Javascript

Imagem  9 -Criacao de CrudApp

Antes de começar a codificação do nosso Javascript, vamos conhecer a ferramenta POSTMAN , uma extensão do Google Chrome. É muito utilizado quando estamos trabalhando com Ajax ou testar algum serviço, com ele, faremos testes para saber se estamos chamando a URL certa, para o Debug em nossa aplicação.

Imagem 10 – POSTMAN – http://goo.gl/QQzu7O

Imagem  10-POSTMAN

Imagem 10 – Aqui veremos o POSTMAN após a instalação no navegador Google Chrome, vamos colocar nossa Url de LocalHost:PORTA/App/Index. Estes dados você consegue na URL do seu navegador quando executa a aplicação no navegador, copie e cole no campo “Enter request URL here”.

Imagem 11 – Url Colada em “Enter request URL here”

Imagem  11-POSTMAN URL
De volta à nossa AppController.cs em nossa aplicação, clique na chave da Action Index e pressione F9 do teclado, para adicionar um BreakPoint.
Imagem 12 – AppController.cs

 Imagem  12-BreakController

Dê o play em seu projeto caso não esteja rodando, vá ao Postman e clique em Send.

Feito isso, ele irá disparar e ir até nosso BreakPoint .

Imagem 13 – BreakPoint Ativo

Imagem  14-BreakControllerAtivo

Com isso, verificamos que nossa URL está correta e nosso projeto pronto para trabalhar com requisições Ajax. Para ter certeza que funcionou, pressione F5 para aplicação continuar, volte ao POSTMAN e verifique se está com o Status 200 Ok.

Imagem 14 – Status OK Postman.

Imagem  15-POSTMAN SUCCESS

Voltando ao projeto, em Scripts> App > CrudApp.js  iremos inserir o dois Métodos auxiliares.

Listagem 6 – Métodos Auxiliares

function LimparFormulario() {
    //Limpar formulario
    //pega todos os itens do form e limpa os campos
    $('#formDados').each(function () {
        this.reset();
    });
}

//Recebe a classe css para o tipo, seja sucesso ou erro.
// passamos como parâmetro SUCCESS(para sucesso) ou DANGER(para erro),
//conforme o bootstrap
function Mensagem(stringCss, mensagem) {
    //caso exista uma mensagem, ele remove
    $("#mensagem").remove();

    //serve para limitar um tempo para aparecer a nova mensagem
    setTimeout(function () {
         //serve este passo pode não ser a melhor abortagem,
        //fazemos assim, para que tenha uma familharidade maior com o JQuery.
        $('#formDados').append("<div class='alert alert-" + stringCss + "' id=mensagem role=alert>" + mensagem + "</div>");
    }, 10);
}

No mesmo arquivo, criaremos o método Cadastrar, seguindo a Listagem 7.

Listagem 7 – Criação do Método de Cadastrar com JQuery

function Cadastrar() {
    var dadosSerializados = $('#formDados').serialize();
    $.ajax({
        type: "POST",
        url: "/App/Cadastrar",
        data: dadosSerializados,
        success: function () {
            Mensagem("success", "Cadastrado com Sucesso!");
        },
        error: function () {
             Mensagem("danger", "Erro ao cadastrar!");
        }
    });
}
  • Linha 2Pegamos o id do nosso formulário via Jquery, usamos a função serialize(), que transforma nosso formulário em uma série de strings de acordo com o atributo name dos respectivos Inputs do HTML – para mais informações acesse http://api.jquery.com/serialize/
  • Linha 7Inicializamos a função $.ajax() do Jquery, passando os valores dos seguintes atributos:
  • type: Informamos o tipo de requisição, podendo ser: GET, POST, PUT ou DELETE. Em nossos exemplos usaremos somente GET e POST , para melhor aprendizado.
  • url: Nosso caminho /Controller/Action criada em nosso NET MVC, para onde enviaremos os dados do formulário.
  • data: Serão os dados que enviaremos por parâmetro para a Action,  mandaremos os dados do nosso formulário.

Observação:  Em AppController no servidor, ela espera como parâmetro uma PessoaModel, então nosso formulário deve possuir os mesmos atributos encontrados nesta classe, ele será identificado no momento da requisição pelos atributos name dos inputs no formulário, caso esteja definido com name diferente do definido na classe PessoaModel o mesmo não será localizado e na Controller, receberá como valor null.

  • success: Após sua requisição chegar ao servidor e o mesmo devolver os dados e ou realizar todas as operações sem nenhuma Exception executará as funções definidas neste ponto.
  • error: Caso surgir algum imprevisto, algum erro que não foi tratado, alguma Exception “Explodiu”, ele entrará neste parâmetro e executará os métodos.

Agora, iremos testar se nossa aplicação está cadastrando nossa “Pessoa”.
Imagem 15 – Cadastrar.cshtml

Imagem  16-Break Cadastrar

Imagem 16 – Debug AppController

Imagem  17 -Break Cadastrar

Imagem 17 – Mensagem de Sucesso.

Imagem  18 -Cadastrado com Sucesso

Caso tudo ocorreu como planejado, vamos a próxima parte de nossa Single Page Application.
Agora que cadastramos os clientes, em nossa lista estática, temos que listar esses dados em uma tabela, para nosso exemplo, iremos fazer um pouco mais “na unha”, faremos nosso código HTML ser renderizado a partir do JQuery, criar as listas e adicioná-las à tabela, sem o uso de outra ferramenta Js. Antes de codificar o $.ajax(), será uma requisição do tipo GET para recuperar a lista de todos os usuários cadastrados em nossa aplicação.

Vamos inserir o snippet de código de listagem de pessoas em AppController.cs.

Listagem 8 – Action Listar em AppController.cs

        [HttpGet]
        public ActionResult Listar()
        {
            var listaPessoas = new PessoaNeg().Listar();
            return Json(listaPessoas, JsonRequestBehavior.AllowGet);
        }

Por padrão as requisições serão do tipo GET, para o exemplo, definimos o Atributo [HttpGet] acima da assinatura do método, apenas para você ter um melhor aproveitamento da sintaxe C#, mas caso fosse uma requisição do tipo POST, seríamos obrigados a colocar o atributo [HttpPost]. Retornamos um JSON, ou seja, uma lista de objetos Javascript, para o nosso Ajax, liberando acesso para requisição GET. Sempre que trabalhamos com Ajax e ASP.MVC usamos o retorno JSON para que o Javascript consiga interpretar nossos objetos

Repare que estamos pedindo ao nosso back-end, um IEnumerable<PessoaModel>, ou seja, uma lista genérica somente leitura da nossa classe de pessoa convertida para uma lista de objetos Javascript, para trabalhar em nosso HTML.
Com a extensão do Chrome, PostMan, antes de utilizar nosso javascript, vamos testar se a controller nos devolve os dados corretos da Lista,  seguindo sua url: localhost:PORTA/App/Listar.

Detalhe importante, caso Esteja definido POST em frente ao campo URL, clique e mude para GET.

Imagem 18 – Postman retornando a Lista de Pessoas

Imagem  19-ListarPostman

Feito isso, sabemos que está retornando os arquivos que queremos, então vamos ao nosso javascript manipular estes dados.
Vamos ao nosso CrudApp.js codificar o código de listagem dos itens na Listagem 9.

Listagem 9 – Código de Listagem em CrudApp.js

function Listar() {
    //chamamos nosso método auxiliar para limpar os campos
    LimparFormulario();
    $.ajax({
        type: "GET",
        url: "/App/Listar",
        success: function (dadosPessoa) {
            if (!dadosPessoa.length == 0) {
                $('#tbody').children().remove();
                $(dadosPessoa).each(function (i) {
                    var dataMiliSegundos = dadosPessoa[i].DataNascimento.replace('/Date(', '').replace(')/', '');
                    var dataNascimento = new Date(parseInt(dataMiliSegundos)).toLocaleDateString();
                    var tbody = $('#tbody');
                    var tr = "<tr>";
                    tr += "<td>" + dadosPessoa[i].Id;
                    tr += "<td>" + dadosPessoa[i].Nome;
                    tr += "<td>" + dataNascimento;
                    tr += "<td>" + dadosPessoa[i].Email;
                    tr += "<td>" + "<button class='btn btn-info' onclick=Editar(" + dadosPessoa[i].Id + ")>" + "Editar";
                    tr += "<td>" + "<button class='btn btn-danger' onclick=Deletar(" + dadosPessoa[i].Id + ")>" + "Deletar";
                    tbody.append(tr);
                });
            }
        }
    });
}

Listagem 10 – Inicializamos nosso $.ajax, como visto anteriormente na Listagem 7, temos algumas variações para este método:

  • Não temos o atributo data, pois não enviaremos parâmetros para a Action
  • url: referenciará a Action Listar, de onde virão nossos dados.
  • success: aqui, recebemos a resposta do servidor, que no caso é a lista de pessoas que estão cadastradas em nosso sistema.
  • $(‘#tbody’).children().remove() – Aqui definimos que toda vez que chamar o método de listagem, ele irá remover todos os itens que está dentro da tr para não replicar os dados em nossa tabela. Esta abordagem pode não ser a melhor prática, está sendo utilizada para fins de estudo e melhor entendimento do assunto, para entender mais sobre a função children, acesse https://api.jquery.com/children/ ;
  • $(dadosPessoa).each – Aqui pegamos os dados (nossa lista), e vamos usar a função do JQuery each. Ela nos permite trabalhar com cada objeto dentro de uma lista, passando como atributo o index(este index, será utilizado como as posições de um for, para cada posição desta lista, ele incrementa este valor e pegamos objeto daquela posição).
    • dataMiliSegundos – quando este objeto vir do C# ele vem em formato de Milissegundos, junto à uma string. Removemos esta string e mantemos somente os números, para assim, na linha debaixo criar uma nova data, passando estes milissegundos.
    • Nas próximas linhas, iremos adicionar à tbody da nossa tabela existente no HTML (cshtml) manualmente as linhas dela. Concatenamos os dados que virão do objeto daquela posição, os botões definidos com funções para Edição e Deleção (nossos próximos passos) , passando como parâmetro o Id daquela PessoaModel.
    • Após isso, com a função append ( http://api.jquery.com/append ), concatenamos toda estrutura à nossa tabela atual. A cada posição da lista fará esta concatenação e adição de itens.

Vamos colocar um objeto de debugger em nosso código JS dentro da função success para verificar em modo debug se os dados estão aparecendo como previsto.

Listagem 11 – Adicionando o debugger em Listar()

success: function (dadosPessoa) {
            if (!dadosPessoa.length ==0) {
                debugger;

Adicionaremos um breakpoint no método Listar e Cadastrar em nossa Controller

Imagem 19 – Debug Cadastrar em AppController

Imagem  20 -CadastrarControllerDebug

Imagem 20 – Debug Listar em AppController

Imagem  21 -ListarControllerDebug

Neste ponto, iremos no método Cadastrar em nosso JavaScript, e chamar o Método Listar(), após o cadastro do mesmo, na função success.

Listagem 12 – Função Cadastrar() adicionar a chamada para Listar no atributo success;

        success: function () {
            Listar();
            Mensagem("success", "Cadastrado com Sucesso!");
        },

Dê um play no projeto ou F5, cadastre uma nova pessoa em seu SPA, verifique se após isso irá chamar o breakpoint em nossa AppController e depois o debugger no JavaScript. Caso não apareça, abra as ferramentas do desenvolvedor no Chrome (pressionando F12) e verifique se possui algum erro.

Imagem 21 – Após Cadastrar no HTML, recebe os dados na AppController > Cadastrar

 Imagem  22 -CadastrarComDados

Imagem 21 – Verifique se os dados que voce digitou no HTML estão sendo recebidos na controller, aproximando o mouse em em pessoa > apareceram todas as propriedades, o Id não será populado neste momento. Seguindo com o Botão F11, vá pressionando e navegando nos dados até a adição desse elemento em nossa lista genérica.

Feito o Cadastro, invocará a Action Listar() conforme  a imagem 22

Imagem 22 – Listar() em AppController

Imagem  23-ListarControllerDebugAtivo

Imagem 22  – Após o cadastro, navegue também pressionando F11 verificando se retorna os dados corretos.
Usando o Google Chrome, abrirá a Imagem 23.

Imagem 23 – Navegador Chrome com Debugger Javascript

Imagem  24 -Chrome Js

Vá pressionando F10 e veja o comportamento dos métodos.
A pergunta é, porque meus dados não foram populados na tabela HTML?
Porque ainda não escrevemos o snippet de código com nossa tabela no HTML!
Voltando à Index.cshtml vamos inserir o seguinte código

Listagem 13 – Criação da tabela

<section id="listagem">
@* Repare que passamos a classe Hidden do bootstrap,
 isso acontece para escondermos a tabela enquanto ela não tem dados *@
  <table class="table hidden" id="tabela">
    <thead>
      <tr>
        <th>Id</th>
        <th>Nome</th>
        <th>Data de Nascimento</th>
        <th>Email</th>
        <th></th>
      </tr>
    </thead>
    @* Nosso tbody será preenchido em tempo de execução via JQUERY *@
    <tbody id="tbody"></tbody>
  </table>
 </section>

Imagem 24 – Tabela HTML

Imagem  25 -Onde Inserir o Codigo HTML

Vamos alterar em nosso Javascript, para na chamada da Listar() ele mostrar o conteúdo da tabela.

Listagem 14 – Método para mostrar a tabela novamente

success: function (dadosPessoa) {
            if (dadosPessoa.length == 0) {
                $('table').addClass('hidden');
            } else {
                $('table').removeClass('hidden');
...

Imagem 25 – Listar nossos dados em tabela.

Imagem  26 -Mostrar table

Imagem 25 – Repare que só exibimos os dados na tela se nossa Appcontroller retornar um ou mais itens (função length do Javascript).
Vamos adicionar no Load da página, nosso método de Listar para caso exista algum dado cadastrado anteriormente, seja exibido.

Imagem 26 – Adicionando Listar após o carregamento da página

Imagem  28 - Adicionando Listagem no Load da Pagina

Listagem 15 – Implantação de Listagem no carregamento da página

$(function () {
    Listar();
});

Definimos os métodos que serão chamados após o carregamento da página, então, inserimos dentro da função nosso método Listar.
Repare que na Imagem 24, em tbody temos apenas a assinatura, isso acontece, pois, vamos inserir as linhas manualmente via JQuery. Vamos Rodar nosso projeto mais uma vez, cadastrar uma nova pessoa e verificar se os dados virão corretamente.

Imagem 27 – Após reiniciar o projeto e adicionar uma nova Pessoa

Imagem  27 - Aplicacao Funcionando

Nosso cadastro e listagem de pessoas estão funcionando corretamente, agora, precisamos programar os botões Editar e Deletar. Iniciaremos pelo menos completo, o botão Deletar.
Quando o usuário clicar em Deletar, precisará obrigatoriamente uma confirmação, se ele deseja realmente apagar aquele dado, por segurança, após a confirmação removeremos o item daquela linha.

Observação. Quando criamos a linha da tabela junto aos botões (Listagem 9), criamos os métodos mesmo sem utilizar naquele ponto, faremos a implementação destes métodos neste ponto. Voltando á CrudApp.js iremos criar nossa função Deletar();

Listagem 16 – Criação do Método Deletar

function Deletar(idPessoa) {
    var confirmar = confirm("Deseja Realmente Apagar ?");
    if (confirmar) {
            $.ajax({
                type: 'POST',
                url: "/App/Deletar",
                data: { id: idPessoa },
                success: function () {
                    Listar();
                    Mensagem("success", "Deletado com sucesso!");
                },
                error: function () {
                    Mensagem("danger", "Erro ao Deletar!");
                }
            });
          }
}

Listagem 16 – Definição

  • Ao click do botão, irá acionar nossa função Deletar, passando o Id daquela pessoa conforme a Listagem 9  o código Javascript abaixo
    • Irá exibir um alerta pedindo uma confirmação se realmente deseja deletar, caso clique em OK, adicionará à Action Deletar enviando o Id daquela pessoa, de uma determinada Linha.
    • Repare que em nosso Ajax, definimos:
      • data: { id: idPessoa }, neste caso, nossa Action recebe somente um parâmetro do tipo Inteiro, temos que informar a chave id (mesmo nome encontrado no parâmetro na controller MVC) e o valor o Id recebido por parâmetro.

Código Implantado, dê um stop em seu projeto, pressionando Shift F5. Em sua AppController, crie um método de nome Deletar.

Listagem 17 – Método Deletar

        public void Deletar(int id)
        {
            try
            {
                new PessoaNeg().Deletar(id);
            }
            catch (Exception)
            {
                throw;
            }
        }

Rode novamente sua aplicação, cadastre uma nova pessoa, tente remover um registro.
Imagem 28 – Confirmação de  Remoção

 Imagem  29 - ConfirmacaoDelete

Imagem 29 – Deletado com Sucesso
 Imagem  30 - Deletado com Sucesso

Vamos a ultima parte do nosso projeto, editar um registro existente. Voltando à AppController. Criaremos a Action Editar.

Listagem 18 – AppController.cs – Criação do método de edição de registro.

        public ActionResult Editar(int id)
        {
            try
            {
                //recebemos o id da pessoa selecionada,
                //com este id, pedimos ao nosso banco fantasia,
                // que retorne a pessoa que possuir aquele id.
                var pessoa = new PessoaNeg().GetById(id);

                //para retornar ao ajax, temos que enviar nosso objeto em
                //formato JSON, e LIBERA-LO
                //Para a requisicao GET como dito anteriormente
                return Json(pessoa, JsonRequestBehavior.AllowGet);
            }
            catch (Exception)
            {
                throw;
            }
        }

Vamos neste ponto ao arquivo CrudApp.js e adicionaremos a função Editar.Obs. Este método é chamado pelo botão editar, no atributo onclick do HTML. Adicionamos ele em tempo de execução na função Listar implementada anteriormente. Vamos codificar este método que até então não existia.

Listagem 19 – Criação da Função Editar.

    function Editar(idPessoa) {
            $.ajax({
                type: 'GET',
                url: '/App/Editar',

                //informamos que nossa controler possui um parametro com nome 'id'
                // e enviamos o nosso id que pegamos no botao editar.
                data: { id: idPessoa },
                success: function (dados) {
                    // faz a formatacao novamente da data que vem do C# em formado JSON
                    var dataMiliSegundos = dados.DataNascimento.replace('/Date(', '').replace(')/', '');

                    //converte para a data em formato local
                    var dataFormatoLocal = new Date(parseInt(dataMiliSegundos)).toLocaleDateString();

                    //como nosso atributo TYPE DATE do HTML
                    //suporta o somente o formato yyyy-mm-dd (ano-mes-dia)
                    //faremos a formatacao do mesmo.
                    var dataFormatada = "";

                    //com o metodo SUBSTRING do JAVASCRIPT, pegamos os Indexes da string. no exemplo
                    //10-01-12 - a substring inicia-se em 0 entao,
                    //se queremos pegar o valor apenas do dia, será de
                    //0 a 2 pois no primeiro parametro informamos o indice e no segundo a posicao do valor

                    dataFormatada += dataFormatoLocal.substring(6, 10) + '-';
                    dataFormatada += dataFormatoLocal.substring(3, 5) + '-';
                    dataFormatada += dataFormatoLocal.substring(0, 2);

                    //após voltar os dados do nosso backend, ele insere estes valores
                    //no input de cada item
                    $('#idPessoa').val(dados.Id);
                    $('#nome').val(dados.Nome);
                    $('#DataNascimento').val(dataFormatada);
                    $('#Email').val(dados.Email);

                    //como queremos EDITAR um determinado contato, ocultaremos o botao SALVAR
                    //e mostraremos o botao ATUALIZAR usando a funcao do JQUERY
                    $("#salvar").addClass("hidden");
                    $("#atualizar").removeClass("hidden");
                }
            });
    }

Repare que não estamos fazendo validações, usando muitos padrões etc etc etc. Estamos fazendo do modo “na unha”, ou seja, tudo aqui foi pensado na melhor forma de exercitar seu conhecimento e mostrar como a coisa funciona “por trás dos panos”.
Agora que temos a função editar pronta, coloque um breakpoint em nossa  Action Editar. Rode o projeto, e vamos aos testes.

Imagem 30 – BreakPoint Editar

Imagem  31- BreakPoint Editar

Verificamos que o id veio corretamente, caso você não chegou a este resultado, abra o navegador (em nossos exemplos estamos usando o Google Chrome), pressionando o F12 do teclado, abra o console e verifique se há algum erro.
Neste ponto, em nossa Controller, pressionando F11 do teclado, verifique o andamento da execução do seu programa. Quando terminar, volte ao navegador e verifique sua SPA se está conforme a imagem a seguir.

Imagem 31 – SPA com dados em Editar

Imagem  32- PáginaEditar

Repare que neste ponto nosso botão de Salvar desapareceu isto acontece porque na função Editar o ocultamos, em seguida mostraramos o botão atualizar. Vamos ao nosso arquivo HTML, e adicionar um botão oculto para atualizar nossos dados.

Imagem 32 – Inserir o Botão atualizar

Imagem  33- HtmlAtualizar

Repare que referenciamos a classe hidden do bootstrap para deixar este botão oculto. No atributo onclick inserimos a função Atualizar (criaremos esta função no próximo passo) do nosso CrudApp.js.
Caso você rodar o projeto, verificará que o botão está aparecendo normalmente, quando clicar no botão editar, ele ocultará o Salvar. Esta foi uma dinâmica que criamos apenas para simplificar ao máximo nosso projeto.

Voltando ao CrudApp.js adicionaremos o método de Atualizar.

Listagem 20 – Criacao da função de Atualizar

function Atualizar() {
    //recebemos novamente nosso formulário
    var dadosSerializados = $('#formDados').serialize();
    $.ajax({
        type: "POST",
        url: "/App/Atualizar",

        //repare, nosso método de cadastrar é parecido até aqui.
        //nossa controller receberá os dados de acordo com o atributo name
        //de cada propriedade
        data: dadosSerializados,
        success: function () {
            //depois que ocorrer toda a operação com sucesso
            //ocultaremos o botao atualizar e mostraremos novamente o de salvar
            $("#salvar").removeClass("hidden");
            $("#atualizar").addClass("hidden");

            //por fim, listamos os arquivos novamente.
            Listar();
        },

        error: function myfunction() {
            alert("Erro!");
        }
    });
}

Volte à sua controller, escreva o seguinte snippet de codigo

 [HttpPost]
 public void Atualizar(PessoaModel pessoa)
 {
   try
   {
     new PessoaNeg().Atualizar(pessoa);
   }
   catch (Exception)
   {
     throw;
   }
}

Salve seu projeto, rode novamente a aplicação e faça os devidos testes.

Conclusão

Vimos que neste conjunto de artigos, abordamos o básico de uma aplicação Web MVC. Demonstrando alguns itens importantes para a manipulação destas ferramentas.
Este projeto foi pensado na melhor forma de aprendizado possível, portanto, não utilizamos de alguns padrões para a construção do mesmo. Podemos nos próximos artigos, mostrar alguns padrões para melhorar a produtividade de seus projetos.

Duvidas ou sugestões, utilize a área de comentários, não deixem de compartilhar, isto ajuda em todo o trabalho que fizemos até aqui.

Download desta solução

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