Criando uma WEBApi utilizando dotnet core e vscode

zani0x03

Finalizando a trilogia no GNU/Linux. Logo abaixo será explicado e exemplificado como criar uma WebApi consumindo dados do Postgres e uma aplicação que irá consumir esse WebAPI. O acesso aos dados não será utilizando Entity Framework, mas sim "SQL Puro".

[ Hits: 6.160 ]

Por: Tiago Zaniquelli em 07/05/2018

3 0

Denuncie Favoritos Indicar Impressora

Cliente WEB

Criaremos duas pastas dentro da Pasta Views, chamadas Home e Shared. Criaremos também 3 arquivos Index.cshtml (dentro de Views → Home), _Layout.cshtml (dentro de Views → Shared) e HomeController.cs (dentro de Controllers), nossa aplicação ficará com a estrutura da figura 9.

Figura 9 - Estrutura da aplicação

Logo abaixo estará o código dos 3 novos arquivos criados. Dos 3 o arquivo "mais importante" é o arquivos index.cshtml que utilizará jquery para consumir nossa API.

HomeController.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace PessoaAPI.Controllers
{
   public class HomeController : Controller{
       public IActionResult Index(){
           return View();
       }
   }
}

_Layout.cshtml:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Testando - ASP.NET MVC Core </title>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>

   <body>
       <div class="navbar navbar-inverse navbar-fixed-top">
           <div class="container">
               <div class="navbar-header">
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                   </button>
               </div>

               <div class="navbar-collapse collapse">
                   <ul class="nav navbar-nav">
                       <li><a href="/">Home</a></li>
                   </ul>
               </div>
           </div>
       </div>

       <div class="container body-content">
           @RenderBody()
           <footer>
               <p>© @DateTime.Now.Year - Minha primeira aplicação dotnet core</p>
           </footer>
       </div>
   </body>

</html>

Index.cshtml:

@{
   Layout = "/Views/Shared/_Layout.cshtml";
   ViewBag.Tittle = "Home Page";
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div class="jumbotron">
   <p><a href="#" id="get-data" class="btn btn-primary btn-large">Recuperar informações Json</a></p>

   <table id="minhaTbl">
       <thead>
           <tr>
               <th>CPF</th>
               <th>Nome</th>
           </tr>
       </thead>
       <tbody>
       </tbody>
   </table>
</div>

<script>
$(document).ready(
   function(){
       $('#get-data').click(function(){
           var showData = $('#show-data');
           $.getJSON('/api/apipessoa/get', function (data){
               console.log(data);
               var tblRef = document.getElementById('minhaTbl').getElementsByTagName('tbody')[0];
               var newRow = tblRef.insertRow(tblRef.rows.length);

               var itens = '';

               for (var i=0; i< data.length; i++){
                   var newRow =tblRef.insertRow(tblRef.rows.length);

                   var newCell1 =newRow.insertCell(0);
                   var newText1 =document.createTextNode(data[i].cpf);
                   newCell1.appendChild(newText1);

                   var newCell2 = newRow.insertCell(1);
                   var newText2 = document.createTextNode(data[i].nome);
                   newCell2.appendChild(newText2);
               }
           });
           showData.text('Carregando arquivo Json');
       });
   });
</script>

Feito os passos acima, novamente compilaremos e executaremos nossa aplicação.

# dotnet restore
# dotnet build
# dotnet run

Acesse o link http://localhost:5000/ deverá exibir algo como a figura 10.

Figura 10 - Testando aplicação final

Quando clicar em "Recuperar informações Json", irá carregar na tela as informações do banco de dados postgres.

Como teste, insira novos dados no banco de dados e veja o resultado ao clicar em Recuperar Informações Json.

Conclusão

E com esse artigo fechamos nossa trilogia. Confesso ainda achar "estranho" utilizar ferramentas e tecnologias Microsoft no GNU/Linux, porém, como desenvolvedor dot.net e apaixonado por Linux, vem facilitar muito meus estudos.

Página anterior

Páginas do artigo

   1. Introdução
   2. Criando o Projeto WebAPI
   3. Criando WebAPI PessoaAPI
   4. Cliente WEB

Outros artigos deste autor

Convergência entre segurança física e lógica

Configurando DOTNET Core e instalando VSCode no Linux

Seja Legal, não use softwares piratas!

Porque segurança importa?

Linux, aí vamos nós!

Leitura recomendada

Virtualização de desktops, uma solução econômica?

Será este o ano do Linux?