![]() |
![]() |
Neste artigo eu vou mostrar como criar uma página de Login usando o AngularJS em um projeto ASP .NET MVC 5. |
![]() |
Neste artigo eu continuar a mostrar como usar os recursos do AngularJS em aplicações ASP .NET MVC. Se você esta chegando agora leia os artigos anteriores :
ASP .NET MVC 5 - Configurando o ambiente para usar AngularJS
ASP .NET MVC 5 - Como obter dados de um banco de dados usando AngularJS - I
ASP .NET MVC 5 - Como obter dados de um banco de dados usando AngularJS - II
Nós já vimos como usar o método Get do serviço $http do Angular para obter dados de um banco de dados relacional e neste artigo vou mostrar como usar o método Post do serviço $http para postar dados para o servidor.
Como exemplo vou criar uma página de login e para isso vou definir uma tabela chamada Usuarios no banco de dados Cadastro.mdf do SQL Server cuja estrutura é mostrada a seguir:
![]() |
USE [Cadastro]GO CREATE TABLE [dbo].[Usuarios]([UsuarioId] [int] IDENTITY(1,1) NOT NULL,[Nome] [nvarchar] (50) NULL,[Senha] [nvarchar] (50) NULL,[Email] [nvarchar] (100) NULL, CONSTRAINT [PK_Usuarios] PRIMARY KEY CLUSTERED( [UsuarioId] 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
|
Nota: Ao lado temos o script SQL para gerar a tabela no SQL Server Management Studio.
Recursos usados:
Nota: Baixe e use a versão Community 2015 do VS ela é grátis e é equivalente a 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_AngularLogin 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 Online e informe AngularJS para localizar o pacote;
Selecione o pacote Angularjs e clique no botão Install para instalar a biblioteca no projeto:
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 Usuarios 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 View Model LoginDados
Vamos criar o view model LoginDados na pasta Models
Clique com o botão direito sobre a pasta Models e a seguir em Add Class e informe o nome LoginDados.
A seguir digite o código abaixo nesta classe:
namespace Mvc_AngularLogin.Models
{
public class LoginDados
{
public string NomeUsuario { get; set; }
public string SenhaUsuario { get; set; }
}
}
|
Nota : O View Model representa um conjunto de uma ou mais Models e outros dados que serão representados em uma View.
Criando o Controller UsuarioController
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 UsuarioController e clique em OK;
Agora inclua o código abaixo neste Controller:
using System.Linq;
using System.Web.Mvc;
using Mvc_AngularLogin.Models;
namespace Mvc_AngularLogin.Controllers
{
public class UsuarioController : Controller
{
// GET: Usuario
public ActionResult Index()
{
return View();
}
public JsonResult LoginUsuario(LoginDados d)
{
using (CadastroEntities dc = new CadastroEntities())
{
var usuario = dc.Usuarios.Where(u => u.Nome.Equals(d.NomeUsuario) && u.Senha.Equals(d.SenhaUsuario)).FirstOrDefault();
return new JsonResult { Data = usuario, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
}
}
|
Definimos uma Action chamada LoginUsuario() que irá verificar na tabela Usuarios o nome e senha do usuário informados no login. Será retornado o usuário no formato Json.
Criando o Module e o Controlador AngularJS na pasta Scripts
Vamos definir agora 2 arquivos javascript em nosso projeto:
AppAngular.js
ControllerAngular.js
Para organizar o código vamos criar uma pasta chamada AngularScripts em nosso projeto e criar os arquivos nesta pasta.
Clique com o botão direito do mouse sobre o nome do projeto e a seguir clique em Add -> New Folder e informe o nome AngularScripts.
Agora clique com o botão direito do mouse sobre a pasta AngularScripts e a seguir em Add -> New Item;
Selecione o template JavaScript File e informe o nome AppAngular.js e clique no botão Add;
Digite o código abaixo neste arquivo:
var app = angular.module("AngularApp", []); |
Note que eu criei um modulo chamado AngularApp.
2- ControllerAngular.js
Agora clique com o botão direito do mouse sobre a pasta AngularScripts e a seguir em Add -> New Item;
Selecione o template JavaScript File e informe o nome ControllerAngular.js e clique no botão Add;
Digite o código abaixo neste arquivo:
angular.module( 'AngularApp').controller( 'LoginAngularController', function ($scope, LoginService) {$scope.IsLogedIn = false;$scope.Message = '';$scope.Submitted = false;$scope.IsFormValid = false;
NomeUsuario: '',SenhaUsuario: ''};
//Verifica se o formulário é valido (f1 é o nosso formulário) $scope.$watch( 'f1.$valid', function (newVal) {$scope.IsFormValid = newVal; });
$scope.Login = function () {$scope.Submitted = true;if ($scope.IsFormValid) { LoginService.GetUser($scope.LoginDados).then( function (d) {if (d.data.Nome != null) { $scope.IsLogedIn = true; $scope.Message = "Login realizado com sucesso. Bem-Vindo " + d.data.Email; } else { alert('As Credenciais informadas são inválidas!'); } }); } }; }) .factory('LoginService', function ($http) { var fac = {}; fac.GetUser = function (d) { return $http({ url: '/Usuario/LoginUsuario', method: 'POST', data: JSON.stringify(d), headers: { 'content-type': 'application/json' } }); }; return fac; }); |
Criamos um modulo para a nossa app Angular 'AngularApp' definida no script AppAngular.js.
Definimos um serviço chamado LoginService que vai obter dados do banco de dados e fornecê-los ao controller LoginAngularController usando a Action LoginUsuario do controller UsuarioController.
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.
O serviço $http ajuda a facilitar a comunicação com servidores remotos
via HTTP o objeto XMLHttpRequest ou através de JSONP.
Também estamos usando o recurso factory para organizar e compartilhar o código através da nossa aplicação. No código estamos postando os dados do formulário e recebendo os valores retornados pela action LoginUsuario.
Configurando o AngularJS no projeto
Vamos agora configurar o nosso ambiente para poder usar o AngularJS. Neste exemplo vou usar a distribuição CDN da biblioteca AngularJs.
Abra o arquivo _Layout.cshtml na pasta \Views\Shared e inclua as referências conforme mostrado a seguir:
![]() |
Definimos a diretiva ng-app="AngularApp" para indicar o início da aplicação AngularJS.
Definimos também as referências a biblioteca AngularJS e aos arquivos javascripts criados na pasta AngularScripts.
Criando a View para exibir os dados
Abra o arquivo UsuarioController.cs na pasta Controllers e a seguir crie a Action Login (ou use a Action Index)
public ActionResult Login()
{
return View();
}
|
Depois clique com o botão direito do mouse no interior da Action Login e a seguir clique em Add View;
Selecione o Template Empty e clique em Add;
Digite o código a seguir para a view Index.cshtml criada na pasta Home:
@{
ViewBag.Title = "LoginUsuario";
}
<style>
input {
padding: 5px;
border: 1px solid #A5A5A5;
}
input.ng-dirty.ng-invalid {
border: 1px solid red;
background-color: rgb(255, 244, 244);
}
.error {
color: red;
}
</style>
<h2>Página de Login</h2>
<div ng-controller="LoginAngularController">
<form novalidate name="f1" ng-submit="Login()">
<div style="color:rgb(142,2,2)">{{Message}}</div>
<table ng-show="!IsLogedIn">
<!-- ng-show="!IsLogedIn" indica que eu quero ocultar a tabela após o login-->
<tr>
<td>Nome do Usuário : </td>
<td>
<!-- ng-class="Submitted?'ng-dirty':''" Indica que for submetido (clicou no botão submit) então define este estado
for show red border-->
<input type="text" ng-model="LoginDados.NomeUsuario" name="cUsuarioNome" ng-class="Submitted?'ng-dirty':''" required autofocus />
<span class="error" ng-show="(f1.cUsuarioNome.$dirty || Submitted) && f1.cUsuarioNome.$error.required">O nome do usuário é obrigatório</span>
<!-- ng-show="(f1.cUsername.$dirty || Submitted) && f1.cUsername.$error.required" exibe este span somente se o controle NomeUsuario for valido -->
</td>
</tr>
<tr>
<td>Senha : </td>
<td>
<input type="password" ng-model="LoginDados.SenhaUsuario" name="cSenha" ng-class="Submitted?'ng-dirty':''" required autofocus />
<span class="error" ng-show="(f1.cSenha.$dirty || Submitted) && f1.cSenha.$error.required">A senha deve ser informada</span>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" />
</td>
</tr>
</table>
</form>
</div>
|
Na view definimos o controlador usado a diretiva ng-controller="LoginAngularController" e obtemos os dado do controler usando o databinding via $scope exibindo-os usando uma expressão {{}}.
Estamos usando as seguintes diretivas AngularJS nesta view:
ng-submit: Impede a ação padrão do formulário e vincula o Angular ao evento onsubmit que é chamado quando o formulário for submetido ao pressionar o botão Enviar.
ng-show: Permite exibir ou ocultar elementos diferentes com base na expressão fornecida ao atributo ngShow.
ng-model: Possui vinculação de dados bidirecional via $scope para a view e vice-versa. Possui também uma validação e manutenção de estados dos controles embutido.
ng-class: Às vezes é preciso alterar as classes CSS das nossas views em tempo de execução. Este recurso permite definir dinamicamente classes CSS com base em expressões Angular avaliadas.
$dirty: É uma propriedade dos elementos de formulário e é True se o usuário já interagiu com o formulário. Existem muitas propriedades como $pristine, $valid, $invalid, $submitted e $error.
Executando o projeto podemos obter :
1- A página de Login
![]() |
2- Login Inválido
![]() |
3- Login Válido
![]() |
Pegue o projeto completo aqui :
Mvc_AngularLogin.zip (sem as referências)
"Porque a lei foi dada por Moisés; a
graça e a verdade vieram por Jesus Cristo."
Joao 1:17
Veja os
Destaques e novidades do SUPER DVD Visual Basic
(sempre atualizado) : clique e confira !
Quer migrar para o VB .NET ?
Quer aprender C# ??
Quer aprender os conceitos da Programação Orientada a objetos ? Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ? |
Gostou ?
Compartilhe no Facebook
Compartilhe no Twitter
Referências: