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 :

  1. ASP .NET MVC 5 - Configurando o ambiente para usar AngularJS

  2. ASP .NET MVC 5 - Como obter dados de um banco de dados usando AngularJS - I

  3. 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; }
    }
}

NotaO 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:

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:

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:


José Carlos Macoratti