Primeiras aulas do curso ASP.NET Core parte 2: Um e-Commerce com MVC e EF Core

ASP.NET Core parte 2: Um e-Commerce com MVC e EF Core

Implementando a Chamada AJAX - Introdução

Olá!

Sou Marcelo Oliveira, bem-vindo ao curso Asp.NET Core 2.0 parte II da Alura. Nesse curso, continuaremos incrementando o e-commerce do nosso cliente "Casa do Código" com a ajuda dos recursos do Asp.NET Core 2.0. Começaremos implementando o clique dos botões "+" e "-" do carrinho de compras, para adicionar ou remover itens.

Dois livros à venda e ícones de "+" e "-" ao lado que cada um deles

Essa implementação irá nos proporcionar muitos conhecimentos novos, por exemplo, chamar uma função JavaScript pelo evento do clique no clique do HTML. Selecionaremos elementos do HTML por meio do plug-in do Jquery. Aprenderemos a diferença entre uma requisição com método post() e get(). Veremos como realizar uma requisição através do método httppost(), com a ajuda da função ajax() do Jquery.

Aprenderemos a organizar melhor nosso código por meio de uma classe do JavaScript, e começaremos a lidar com o evento de digitação da quantidade de elementos no carrinho de compras.

Ainda, prepararemos no servidor o recebimento da função ajax() pelo controller, em segida guardaremos as informações no banco de dados. Aprenderemos a implementar um padrão chamado view model, isto é, um modelo específico para fornecer informações para a <view>. Retornaremos um objeto específico para a requisição ajax(), e por meio da resposta obtida atualizaremos toda a <view>.

Posteriormente, trabalharemos com os campos de cadastro. Aprenderemos a redirecionar o usuário para outra action caso tenhamos algum problema de validação nos campos, assim garantimos que todos eles estejam preenchidos e com dados corretos, pois criaremos validações customizadas para cada item.

campos de cadastro - serie de campos a serem preenchidos pelo usuário, são eles "Nome do Cliente", "Email", "Telefone", "Endereço", "Complemento", "Bairro", "Município", "UF" e "CEP".

Criaremos um formulário no Razor por meio de uma TagHelper. Pegaremos a informação que foi enviada para o servidor e gravar no banco de dados, e depois veremos como proteger nossa action contra acessos indevidos utilizando o recurso de validação do tolken. Iremos aprender a proteger o método que receberá a chamada ajax() contra acessos maliciosos.

Finalmente, renderizaremos a <view> de resumo com os dados de cadastro do usuário.

Espero que vocês gostem do curso e não deixem de participar do fórum!

Vamos lá?!

Implementando a Chamada AJAX - Chamando Função JavaScript a Partir de um evento HTML

Usaremos o mesmo projeto iniciado no curso Asp.NET Core 2.0 parte I, portanto copiaremos esse arquivo e o utilizaremos na segunda etapa do curso. Havíamos criado um banco de dados na primeira parte do curso, mas ele será apagado nesta etapa. No Visual Studio, clicaremos sobre "Exibir" no cabeçalho de ferramentas, e selecionaremos a opção "Pesquisador de Objetos no SQL Server". Assim, localizaremos o banco de dados CasaDoCodigo e o excluiremos. Basta clicar sobre ele com o botão direito e selecionar a opção "Excluir".

deletando banco de dados

Deletamos esse banco de dados porque nós fizemos uma cópia do arquivo e trocamos o nome do name space, isso pode gerar problemas no momento em que precisarmos trabalhar com o banco.

Depois que deletamos o banco de dados iremos executar a aplicação.A aplicação rodará no browser ,e teremos o catálogo de livros da Casa do Código e a opção de adiciona-los ao carrinho de compras por via do botão "Adicionar". Na primeira opção apresentada, o livro "ASP.NET Core MVC", clicaremos sobre o botão "Adicionar".

Capa de livro de programação, com a opção "Adicionar" localizada logo abaixo

Adicionaremos mais alguns livros diferentes no carrinho. Ao realizarmos essa ação, somos direcionados para a página que exibe todos os itens que estamos comprando. Contudo, temos a opção de "Quantidade" de livros, e esta não pode ser alterada diretamente ao clicarmos no botão "+", ficando sempre com o valor 1 fixo.

 página que exibe todos os livros que estão no carrinho. Temos dois títulos diferentes, sendo eles "PstgreSQL" e "APS.NET Core MVC" e três colunas: "Preço Unitário, "Quantidade" e "Subtotal". Na coluna "Quantidade" há um ícone que possibilita ao usuário aumentar o número de itens no carrinho por meio dos botões "+" e "-"

Nosso objetivo é fazer com que a aplicação responda ao clique no botão "+" para podermos aumentar as quantidades de itens no carrinho.

Até o momento trabalhamos com o código apenas do lado do servidor, o chamado Server Side. Neste ponto do curso, iremos fazer uma implementação do lado do cliente, utilizaremos a linguagem JavaScript, que somente pode ser executada o browser.

Abriremos novamente o Visual Studio e acessaremos a view de carrinho. Na área de gerenciamento de soluções, clicaremos sobre "Views > Carrinho.cshtml".

arquivo dentro da pasta view

Iremos até o final da view e inseriremos o código JavaScript que será executado do browser. Não podemos simplesmente adicionar o script no código , primeiramente precisamos adicionar a tag <script> que por sua vez necessita de um tipo (type), no caso, text/javascript

@{
    ViewData["Title"] = "Carrinho";
}

<div class="row">
    <div class="col-md-12">
        <div class="pull-right">
            <a class="btn btn-success" asp-action="carrossel">
                Adicionar Produtos
            </a>
            <a class="btn btn-success" asp-action="resumo">
                Finalizar Pedido
            </a>
        </div>
    </div>
</div>

<script type="text/javascript">

</script> 

Dentro dessa tag iremos inserir o código JavaSript. Porém, há um detalhe: não podemos inserir uma tag <script> dentro de uma view do Razor, como é o casso de Carrinho.cshtml. Precisamos criar uma sessão para incluir esse script, para isso, deveremos criar uma diretiva @section que terá o nome de Scripts. Essa sessão terá duas chaves, e dentro delas inseriremos a tag <script>.

@{
    ViewData["Title"] = "Carrinho";
}

<div class="row">
    <div class="col-md-12">
        <div class="pull-right">
            <a class="btn btn-success" asp-action="carrossel">
                Adicionar Produtos
            </a>
            <a class="btn btn-success" asp-action="resumo">
                Finalizar Pedido
            </a>
        </div>
    </div>
</div>

@section Scripts
{

    <script type="text/javascript">

    </script> 
}


Com isso, podemos realmente começar a escrever nosso código JavaScript.

O objeto é fazer com que aplicação responde ao clique do usuário no botão "+", tal responde deve ser criada por meio de uma função (function), que terá o nome de clickIncremento().

@{
    ViewData["Title"] = "Carrinho";
}


@section Scripts
{

    <script type="text/javascript">
        function clickIncremento(){

        }

    </script> 
}

Iremos até o trecho de código responsável pelo botão "+" na view, que é button class="btn btn-default".

@{
    ViewData["Title"] = "Carrinho";
}

 @foreach (var item in Model)
        {

            <div class="row row-center linha-produto">
                <div class="col-md-3">
                    <img class="img-produto-carrinho" src="/images/produtos/large_@(item.Produto.Codigo).jpg" />
                </div>
                <div class="col-md-3">@(item.Produto.Nome)</div>
                <div class="col-md-2 text-center">R$ @(item.PrecoUnitario)</div>
                <div class="col-md-2 text-center">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-default">
                                <span class="glyphicon-minus"></span>
                            </button>
                        </span>
                        <input type="text" value="@(item.Quantidade)"
                               class="form-control text-center" />
                        <span class="input-group-btn">
                            <button class="btn btn-default">
                                <span class="glyphicon-plus"></span>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="col-md-2">
                    R$ <span class="pull-right" subtotal>
                        @(item.Quantidade * item.PrecoUnitario)
                    </span>
                </div>
            </div>

        }

Adicionaremos um atributo ao elemento <button> para o evento do click. Esse atributo é chamado de onclick, e ele receberá a função JavaScript que acabamos de criar, a clickIncremento().

@{
    ViewData["Title"] = "Carrinho";
}

                <button class="btn btn-default">
                    onclick="clickIncremento()">
                                <span class="glyphicon-plus"></span>
                            </button>

Voltaremos ao browser a atualizaremos a página utilizando o atalho "Ctrl + F5" e testaremos se a nossa modificação foi bem sucedida. Ao clicaremos sobre o botão de "+" veremos que nenhuma ação é realizada. Isso ocorre porque não solicitamos nenhuma ação, nós iremos inserir um break point no código JavaScript da view. Inseriremos o comando debugger.

@{
    ViewData["Title"] = "Carrinho";
}

@section Scripts
{

    <script type="text/javascript">
        function clickIncremento(){
            debugger;
        }

    </script> 
}

Ao testarmos novamente o botão "+", notaremos que nada ocorre. Para que o comando debugger funcione, devemos entrar nas ferramentas do desenvolvedor utilizando o atalho "F12" no browser. Uma nova área irá surgir na parte inferior da tela. Clicaremos no botão "+" e teremos acesso ao seguinte trecho de código:

<script type="text/javascript">
    function clickIncremento() { 
        debugger;
    }
</script>

</body>
</html>

Estamos parados da linha do comando debugger. Veremos nas próximas aulas como implementar o código JavaScript em nossa aplicação.

Implementando a Chamada AJAX - Usando Filtros jQuery Para Acessar Elementos

Realizamos o primeiro teste de interação entre o usuário e botão "+", que por sua vez chama função JavaScript por meio do evento onclick, entenderemos o porquê devemos sempre inserir o script dentro de uma view do Asp.NET Core dentro de uma sessão de Script.

@{
    ViewData["Title"] = "Carrinho";
}


@section Scripts
{ 

    <script type="text/javascript">
        function clickIncremento() {
            debugger;
        }
    </script>
}

Voltemos até o browser, na página de carrinho que exibe todos os itens que compramos. Iremos analisar o código html gerado da página, para isso, basta clicar com o botão direito do mouse e selecionar a opção "Exibir código fonte da página" ou pressionar o atalho "Ctrl + U". Ao final do código, veremos a função clickIncremento() inserida. Temos os botõesAdicionar Produtos e Finalizar Pedido,em seguida temos o rodapé da nossa página que foi gerado pelo layout.cshtml, a view que envolve todo o código html. Dois, temos os scripts utilizados na página, e ao final teremos o script específico para nossa página.

<!DOCTYPE html> 

<****!****>


<div class="row">
    <div class="col-md-12">
        <div class="pull-right">
            <a class="btn btn-success" asp-action="carrossel">
                Adicionar Produtos
            </a>
            <a class="btn btn-success" asp-action="resumo">
                Finalizar Pedido
            </a>
        </div>
    </div>
</div>

        <hr />
        <footer>
            <p>&copy; 2018 - Casa do Código</p>
        </footer>
    </div>

        <script src="/lib/jquery/dist/jquery.js"></script>
        <script src="/lib/jquery-validation/dist/jquery.validade.js"></script> 
        <script src="/lib/jquery-validation-
unobtrusive/jquery.validade.unobtrusive.js"></script> 
        <script src="/lib/bootstrap/dist/js/bootstrap.js"></script> 
        <script src"/js/site.js?v=8ZRc1sGeVrPBx41D717BgRaQeKyh78QKV9SKsdt638U">
</script> 

    <script type="text/javascript">
        function clickIncremento() {
            debugger;
        }
    </script>
}

</body>
</html>

O que Asp.Net Core faz é lançar a tag de script para o final da página, caso a ordem fosse outra, seria, executados os outros scripts principais da aplicação, e isso geraria uma série de erros e teremos dependências que ainda não forma executadas. Por isso é muito importante inserir o código JavaScript dentro de uma sessão.

De volta ao código html da página, notaremos os itens do carrinho que são exibidos como uma série de <div>s e <span>s, e não mencionam exatamente quais são os itens que estamos trabalhando.

<!DOCTYPE html> 

<****!****>

<div class="col-md-3">PostgreeSQL</div>
<div class="col-md-2 text-center">R$ 49,90</div> 
<div class="col-md-w text-center">
    <div class="input-group">
        <span class="input-group-btn">
            <button class="btn btn-default">
                <span class='glyphicon-minus"></span>
            </button> 

<****!****>

A única informação que possuímos é o nome, no caso PostgreeSQL, mas isso não é relevante. O que precisamos saber é qual o item que foi clicado no botão "+". Para identificarmos cada um dos itens iremos colocar dentro de um elemento <div> um atributo com o identificador de cada item.

Na view Carrinho.cshmtl localizaremos a <div> que envolve cada um dos itens. Essa <div> possui a classe linha produto.

@{
    ViewData["Title"] = "Carrinho";
}


@foreach (var item in Model)
        {

            <div class="row row-center linha-produto">
                <div class="col-md-3">
                    <img class="img-produto-carrinho" src="/images/produtos/large_@(item.Produto.Codigo).jpg" />
                </div>

<****!****>

Adicionaremos outro atributo, que chamaremos de item-id, que será igual ao id do item pedido. Inseriremos, portanto, `@item.Id`.

@{
    ViewData["Title"] = "Carrinho";
}


@foreach (var item in Model)
        {

            <div class="row row-center linha-produto" item-id="@item.Id">
                <div class="col-md-3">
                    <img class="img-produto-carrinho" src="/images/produtos/large_@(item.Produto.Codigo).jpg" />
                </div>

<****!****>

Desse modo estamos inserido um código que será obtido do banco de dados, ou seja, estamos lançando uso do Razor para que ele renderize o número de identificação do item correspondente.

Salvaremos as modificações realizadas, atualizaremos a página e novamente iremos verificar o código fonte. Notaremos a presença do novo atributo item-id.

<!DOCTYPE html> 

<****!****>

            <div class="row row center linha-produto" item-id"8">
                <div class="col-md-3">

Na view Carrinho.cshtml passaremos o item-id para o código JavaScript, de forma que esse item possa ser trabalhado e o servidor possa receber a informação e atualizar a quantidade de itens no carrinho. No evento onclick teremos a função clickIncremento(), para esta passaremos o contexto por meio da palavra this,.

@{
    ViewData["Title"] = "Carrinho";
}

                        <input type="text" value="@(item.Quantidade)"
                               class="form-control text-center" />
                        <span class="input-group-btn">
                            <button class="btn btn-default">
                                                            onclick="clickIncremento(this)">
                                <span class="glyphicon-plus"></span>
                            </button>
                        </span>

Além disso, devemos modificar a assinatura da função JavaScript, passando para clickIncremento() um parâmetro btn, isto é, o botão que foi clicado pelo usuário. Em seguida, removeremos o comando debugger.

@{
    ViewData["Title"] = "Carrinho";
}

@section Scripts
{ 

    <script type="text/javascript">
        function clickIncremento(btn) {

        }
    </script>
}

Para acessarmos o atributo id a partir desse elemento, usaremos a biblioteca jQuery, que é um componetente que acompanha a instalação do Asp.NET Core. O jQuery fornece diversas ferramentas que são úteis para, por exemplo, fazer requisições ao servidor. Inseriremos o caractere $ e passaremos o elemento a ser manipulado, no caso trata-se do btn.

@{
    ViewData["Title"] = "Carrinho";
}

@section Scripts
{ 

    <script type="text/javascript">
        function clickIncremento(btn) {
            $(btn)
        }
    </script>
}

E seguida, acessaremos a função attr , uma das várias disponibilizadas pelo jQuery, e ela receberá o nome do atributo que desejamos trabalhar, ou seja, item-id. Todos esses valores serão atribuídos a uma variável que chamaremos de idemId. Finalmente, adicionaremos novamente o comando debugger.

@{
    ViewData["Title"] = "Carrinho";
}

@section Scripts
{ 

    <script type="text/javascript">
        function clickIncremento(btn) {
            var itemId = $(btn).attr('item-id');
            debugger;        
        }
    </script>
}

Atualizaremos a página no browser, abriremos o código fonte e clicaremos sobre o botão "+". Nos atentaremos ao seguinte trecho do código:

<!DOCTYPE html> 

<****!****>

    <script type="text/javascript">
        function clickIncremento(btn) { btn = button.btn.btn-default
            var itemI = $(btn).attr('item-id'); itemId = undefined
            debugger;
        }
    </script>

</body>
</html> 

Note que o valor trazido é indefinido (undefinded), não foi possível encontrar o atributo item-id. O que fizemos foi clicar no botão, mas não é no botão que está o atributo.

Ao analisarmos o código fonte mais detalhadamente, perceberemos que o atributoitem-id foi armazenado em uma <div>, e mais abaixo no código teremos a função clickIncremento(), e <button class="btn btn-default> foi passado como evento onclick. Porém, ao analisarmos a estrutura do código hmtl perceberemos que item-id está bem acima.

<!DOCTYPE html> 

<****!****>

<div class="row row-center linha-produto"item-id="8">
                <div class="col-md-3">
                    <img class="img-produto-carrinho" src="/images/produtos/large_036.jpg" />
                </div>
                <div class="col-md-3">@Business Intelligence</div>
                <div class="col-md-2 text-center">R$ 49,90</div>
                <div class="col-md-2 text-center">
                    <div class="input-group">
                        <span class="input-group-btn">
                            <button class="btn btn-default">
                                <span class="glyphicon-minus"></span>
                            </button>
                        </span>
                        <input type="text" value="1"
                               class="form-control text-center" />
                        <span class="input-group-btn">
                            <button class="btn btn-default">
                                                            onclick="clickIncremento(this)">
                                <span class="glyphicon-plus"></span>
                            </button>

<****!****>

Nas próximas aulas veremos como localizar o item-id="8" por meio da hierarquia de elementos html por funções do jQuery.

Sobre o curso ASP.NET Core parte 2: Um e-Commerce com MVC e EF Core

O curso ASP.NET Core parte 2: Um e-Commerce com MVC e EF Core possui 178 minutos de vídeos, em um total de 63 atividades. Gostou? Conheça nossos outros cursos de .NET em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda .NET acessando integralmente esse e outros cursos, comece hoje!

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana