Neste artigo, eu vou usar um banco de dados SQL Server e mostrar como obter dados de um banco de dados SQL Server usando AngularJS em uma aplicação ASP .NET MVC 5.
Definindo o banco de dados e a tabela
Vou usar a tabela Produtos do banco de dados Cadastro.mdf. A estrutura da tabela Produtos é dada a seguir:
A seguir, temos os scripts para gerar o banco de dados Cadastro.mdf :
USE [master] GO CREATE DATABASE [Cadastro] ON PRIMARY ( NAME = N'Cadastro', FILENAME = N'c:\Program Files (x86)\Microsoft SQL Server\MSSQL.1\MSSQL\DATA\Cadastro.mdf' , SIZE = 3072KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB ) LOG ON ( NAME = N'Cadastro_log', FILENAME = N'c:\Program Files (x86)\Microsoft SQL Server\MSSQL.1\MSSQL\DATA\Cadastro_log.ldf' , SIZE = 1536KB , MAXSIZE = 2048GB , FILEGROWTH = 10%) GO
E a tabela Produtos:
USE [Cadastro] GO CREATE TABLE [dbo].[Produtos]( [Id] [int] IDENTITY(1,1) NOT NULL, [Nome] [nvarchar](50) NULL, [Descricao] [nvarchar](150) NULL, [Preco] [decimal](18, 0) NULL, [Estoque] [int] NULL, CONSTRAINT [PK_Produtos] PRIMARY KEY CLUSTERED ( [Id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO
Recursos usados:
Nota: Baixe e use a versão Community 2015 do VS; ela é grátis e é equivalente à versão Professional.
Criando o projeto no VS Community
Abra o VS Community 2015 e clique em New Project.
Selecione a linguagem Visual C# e o template ASP .NET Web Application.
Informe o nome Mvc_AngularDB ou outro de sua preferência e clique no botão OK.
A seguir, selecione o template MVC e clique no botão OK:
Para obter a AngularJS, podemos usar o Nuget para incluir as referências às biblioteca AngularJS.
Isso é feito no 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:
Podemos também usar usar a distribuição CDN, que é referenciada diretamente na view.
A URL da distribuição CDN pode ser obtida no site https://angularjs.org/ e é a seguinte: https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js.
Dessa forma, temos a estrutura do nosso projeto criado e pronto para que possamos fazer os ajustes necessários e configurar o ambiente.
Criando um modelo de entidades com o Entity Framework
Vamos agora criar um modelo de entidades usando o Entity Framework.
Clique com o botão direito do mouse sobre a pasta Models e a seguir em Add -> New Item.
Selecione a guia Data e clique em ADO .NET Entity Data Model; informe o nome Cadastro e clique no botão Add.
A seguir, selecione a opção EF Designer from database e clique em Next>:
Para selecionar o banco de dados Cadastro.mdf que criamos, clique em New Connection.
Selecione o servidor SQL Server e o banco de dados, e clique no botão OK.
Confirme a conexão criada e salve a string de conexão no arquivo web.config clicando em Next>:
Selecione a tabela Produtos e marque as opções conforme a figura abaixo clicando em Finish:
Ao final, teremos o nosso modelo de entidades mapeado para as tabelas gerado conforme a figura a seguir:
Criando o Controller DBController
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 DBController e clique em OK.
Agora inclua o código abaixo neste Controller:
using System.Linq; using System.Web.Mvc; using Mvc_AngularDB.Models; namespace Mvc_AngularDB.Controllers { public class DBController : Controller { // GET: DB public ActionResult Index() { return View(); } public JsonResult GetProduto() { Produto _produto = null; //define uma instância do contexto using (CadastroEntities dc = new CadastroEntities()) { _produto = dc.Produtos.OrderByDescending(p=> p.Id).Take(1).FirstOrDefault(); } return new JsonResult { Data = _produto, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; } } }
Definimos uma Action chamada GetProduto() que irá retornar o último produto no formato JSON.
Criando o controlador AngularJS na pasta Scripts
Vamos criar uma subpasta chamada Controllers na pasta Scripts para organizar o nosso código e, nessa pasta, vamos criar o controller AngularJS do nosso projeto.
Clique com o botão direito do mouse sobre a pasta Scripts e a seguir clique em Add -> New Folder, e informe o nome Controllers.
Agora, clique com o botão direito do mouse sobre a pasta Controllers e depois em Add -> New Item.
Selecione o template JavaScript File e informe o nome AngularDBController.js e clique no botão Add.
Digite o código abaixo nesse arquivo:
angular.module('MacApp') .controller('DadosProdutoController', function ($scope, ProdutoService) { $scope.Produto = null; ProdutoService.GetProduto().then(function (d) { $scope.Produto = d.data; // Successo }, function () { alert('Ocorreu um erro'); // Falhou }); }) .factory('ProdutoService', function ($http) { var fac = {}; fac.GetProduto = function () { return $http.get('/DB/GetProduto'); } return fac; });
Note que eu criei um modulo para a aplicação MacApp e registrei o controlador DadosProdutoController para esse módulo.
O serviço $http é um serviço Angularjs para leitura de dados a partir de servidores remotos. Esse suporte permite realizar requisições a um ou mais servidores, o que é essencial para um aplicativo do lado do cliente como o nosso, que precisa obter e definir dados de um backend.
O serviço $http ajuda a facilitar a comunicação com servidores remotos via HTTP, objeto XMLHttpRequest ou através de JSONP.
Agora precisamos criar o arquivo que define nossa aplicação MacApp.
Clique com o botão direito do mouse sobre a pasta Scripts e a seguir em Add -> New Item.
Selecione o template JavaScript File e informe o nome Macoratti.js, e clique no botão Add.
Digite o código abaixo nesse arquivo:
(function () { //Cria um Module var app = angular.module('MacApp', []); //Cria um Controller e registra no Module app.controller('HomeController', function ($scope) { // $scope é usado para compartilhar dados entre a view e o controller $scope.Mensagem = "Configurando o AngularJS com ASP .NET MVC 5"; }); })();
Agora temos a aplicação MacApp e dois controladores registrados: HomeController e DadosProdutoController.
Nota: Não se esqueça de fazer a configuração da aplicação para referenciar a biblioteca Angular e o script, conforme foi mostrado no artigo: ASP .NET MVC 5 – Configurando o ambiente para usar AngularJS.
Criando a Action e a View para exibir os dados
Abra o arquivo HomeController.cs na pasta Controllers e defina a Action DadosProduto() abaixo nesse controlador:
public ActionResult DadosProduto() { return View(); }
Finalmente, clique com o botão direito do mouse no interior desta Action e a seguir clique em Add View.
Selecione o Template Empty e clique em Add.
Digite o código a seguir para a view DadosProduto.cshtml criada na pasta Home:
@{ ViewBag.Title = "DadosProduto"; } <h2>Dados do Produto : </h2> <div ng-controller="DadosProdutoController"> <div style="font-weight:bold"> Produto </div> <table> <tr> <td>Código do Produto :</td> <td>{{Produto.Id}}</td> </tr> <tr> <td>Nome do Produto : </td> <td>{{Produto.Nome}}</td> </tr> <tr> <td>Descrição do Produto :</td> <td>{{Produto.Descricao}}</td> </tr> <tr> <td>Preço do Produto :</td> <td>{{Produto.Preco}}</td> </tr> <tr> <td>Estoque :</td> <td>{{Produto.Estoque}}</td> </tr> </table> </div>
Na view, definimos o controlador usado diretiva ng-controller=”DadosProdutoController” e obtemos os dado usando o databinding via expressões {{}} obtendo os dados do objeto $scope – Produto.
Executando o projeto iremos obter:
Pegue o projeto completo aqui: Mvc_AngularDB.zip (sem as referências).