ASP .NET MVC 5 - Criando uma página de Login AngularJS

ASP .NET MVC 5 - Criando uma página de Login com AngularJS

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 :

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]

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]

Nota: Ao lado temos o script SQL para gerar a tabela no SQL Server Management Studio.

Recursos usados:

Visual Studio Community 2015

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;

$scope.LoginDados = {

NomeUsuario: '',

SenhaUsuario: ''

};

//Verifica se o formulário é valido (f1 é o nosso formulário)

$scope.$watch('f1.$valid', function (newVal) {

$scope.IsFormValid = newVal;

});

//verifica se as credenciais são válidas no login

$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.