Carregando Post...

CRUD com ASP.NET core usando Angular 5 e ADO.NET

Introdução

Neste artigo, vou explicar como criar um aplicativo da Web MVC no ASP.NET Core 2.0 com o Angular 5. Criaremos um exemplo de sistema de Gerenciamento de Registros de Funcionários usando o Angular 5 no frontend, o Web Api no backend e o ADO.NET para buscar dados do banco de dados. Usaremos o formulário Angular com as validações de campo necessárias para os campos de entrada para obter dados do usuário. Também aprenderemos como implantar esse aplicativo no IIS.

Estaremos usando o Visual Studio 2017 (versão 15.3.5 ou superior) e o SQL Server 2008.

Pré-requisitos

  • Instale o .NET Core 2.0.0 ou acima do SDK  daqui
  • Instale o Visual Studio 2017 Community Edition (Versão 15.3.5 ou superior) a partir  daqui
  • Baixe e instale a versão mais recente no Node.js  aqui

Código fonte

Antes de prosseguir eu recomendo que você obtenha o código-fonte do  Github 

Agora vamos continuar criando nossas tabelas e procedimentos armazenados usando o SQL Server. Estou usando o SQL Server 2008. Você pode usar qualquer versão acima disso também.

Criando Tabela e Procedimentos Armazenados

Estaremos usando uma tabela de banco de dados para armazenar todos os registros dos funcionários.

Abra o SQL Server e use o seguinte script para criar a  tabela tblEmployee  .


  1. Create table tblEmployee(
  2. EmployeeId int IDENTITY(1,1) NOT NULL,
  3. Name varchar(20) NOT NULL,
  4. City varchar(20) NOT NULL,
  5. Department varchar(20) NOT NULL,
  6. Gender varchar(6) NOT NULL
  7. )

Agora, criaremos procedimentos armazenados para adicionar, excluir, atualizar e obter dados de funcionários.

Para inserir um registro de funcionário

  1. Create procedure spAddEmployee
  2. (
  3. @Name VARCHAR(20),
  4. @City VARCHAR(20),
  5. @Department VARCHAR(20),
  6. @Gender VARCHAR(6)
  7. )
  8. as
  9. Begin
  10. Insert into tblEmployee (Name,City,Department, Gender)
  11. Values (@Name,@City,@Department, @Gender)
  12. End

Para atualizar um registro de funcionário

  1. Create procedure spUpdateEmployee
  2. (
  3. @EmpId INTEGER ,
  4. @Name VARCHAR(20),
  5. @City VARCHAR(20),
  6. @Department VARCHAR(20),
  7. @Gender VARCHAR(6)
  8. )
  9. as
  10. begin
  11. Update tblEmployee
  12. set Name=@Name,
  13. City=@City,
  14. Department=@Department,
  15. Gender=@Gender
  16. where EmployeeId=@EmpId
  17. End

Para excluir um registro de funcionário

  1. Create procedure spDeleteEmployee
  2. (
  3. @EmpId int
  4. )
  5. as
  6. begin
  7. Delete from tblEmployee where EmployeeId=@EmpId
  8. End

Para ver todos os registros de funcionários

  1. Create procedure spGetAllEmployees
  2. as
  3. Begin
  4. select *
  5. from tblEmployee
  6. order by EmployeeId
  7. End

Agora, nossa parte do banco de dados foi concluída. Então, vamos continuar a criar o aplicativo MVC usando o Visual Studio 2017.

Criar aplicativo da web do MVC

Abra o Visual Studio e selecione File >> New >> Project



Depois de selecionar o projeto, uma caixa de diálogo “Novo projeto” será aberta. Selecione .NET Core no menu Visual C # no painel esquerdo.
Em seguida, selecione “ASP.NET Core Web Application” nos tipos de projeto disponíveis. Coloque o nome do projeto como  ASPCoreWithAngular  e pressione OK. Consulte a imagem abaixo.

 

Depois de clicar em OK, uma nova caixa de diálogo será aberta pedindo para selecionar o modelo do projeto. Você pode observar dois menus suspensos no canto superior esquerdo da janela do modelo. Selecione “.NET Core” e “ASP.NET Core 2.0” desses menus suspensos. Em seguida, selecione o modelo "Angular" e pressione OK.

 

 

Agora nosso projeto será criado. Você pode observar a estrutura de pastas no Solution Explorer, conforme mostrado na imagem abaixo.

 

 

Aqui temos nossas   pastas Controllers  and  Views . Não tocaremos nas   pastas de visualizaçõesdeste tutorial, pois usaremos o Angular para lidar com a interface do usuário. As   pastas Controllers conterão nosso controlador Web Api. O ponto de interesse para nós é a pasta ClientApp onde reside o lado do cliente da nossa aplicação. Dentro da  pasta ClientApp / app / components  , já temos poucos componentes criados que são fornecidos por padrão com o modelo Angular no VS 2017. Esses componentes não afetarão nosso aplicativo, mas, por causa deste tutorial,  excluiremos fetchdata  e  counter  pastas de ClientApp / app / components.

Adicionando o modelo ao aplicativo

Você também pode observar que não há pasta Modelos em nosso aplicativo. Então, vamos criar um clicando com o botão direito do mouse no nome da solução e, em seguida, Adicionar >> Nova Pasta e nomear a pasta como  Modelos.

 
 

Clique com o botão direito na   pasta Models e selecione Add >> Class. Nomeie sua classe  Employee.cs. Esta classe conterá as propriedades do nosso modelo Employee.

Adicione mais um arquivo de classe à   pasta Modelos . Nomeie-o como  EmployeeDataAccessLayer.cs . Esta classe conterá nossas operações relacionadas ao banco de dados.

Agora, a pasta Modelos tem a seguinte estrutura

 

 

Abra  Employee.cs  e coloque o seguinte código nele. Esta é a nossa classe de funcionários com cinco propriedades de funcionários.


  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Threading.Tasks;
  5. namespace ASPCoreWithAngular.Models
  6. {
  7. public class Employee
  8. {
  9. public int ID { get; set; }
  10. public string Name { get; set; }
  11. public string Gender { get; set; }
  12. public string Department { get; set; }
  13. public string City { get; set; }
  14. }
  15. }

Abra  EmployeeDataAccessLayer.cs  e coloque o seguinte código para manipular as operações do banco de dados. Certifique-se de colocar sua string de conexão.

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data;
  4. using System.Data.SqlClient;
  5. using System.Linq;
  6. using System.Threading.Tasks;
  7. namespace ASPCoreWithAngular.Models
  8. {
  9. public class EmployeeDataAccessLayer
  10. {
  11. string connectionString = "Put Your Connection string here";
  12. //To View all employees details
  13. public IEnumerable GetAllEmployees()
  14. {
  15. try
  16. {
  17. List lstemployee = new List();
  18. using (SqlConnection con = new SqlConnection(connectionString))
  19. {
  20. SqlCommand cmd = new SqlCommand("spGetAllEmployees", con);
  21. cmd.CommandType = CommandType.StoredProcedure;
  22. con.Open();
  23. SqlDataReader rdr = cmd.ExecuteReader();
  24. while (rdr.Read())
  25. {
  26. Employee employee = new Employee();
  27. employee.ID = Convert.ToInt32(rdr["EmployeeID"]);
  28. employee.Name = rdr["Name"].ToString();
  29. employee.Gender = rdr["Gender"].ToString();
  30. employee.Department = rdr["Department"].ToString();
  31. employee.City = rdr["City"].ToString();
  32. lstemployee.Add(employee);
  33. }
  34. con.Close();
  35. }
  36. return lstemployee;
  37. }
  38. catch
  39. {
  40. throw;
  41. }
  42. }
  43. //To Add new employee record
  44. public int AddEmployee(Employee employee)
  45. {
  46. try
  47. {
  48. using (SqlConnection con = new SqlConnection(connectionString))
  49. {
  50. SqlCommand cmd = new SqlCommand("spAddEmployee", con);
  51. cmd.CommandType = CommandType.StoredProcedure;
  52. cmd.Parameters.AddWithValue("@Name", employee.Name);
  53. cmd.Parameters.AddWithValue("@Gender", employee.Gender);
  54. cmd.Parameters.AddWithValue("@Department", employee.Department);
  55. cmd.Parameters.AddWithValue("@City", employee.City);
  56. con.Open();
  57. cmd.ExecuteNonQuery();
  58. con.Close();
  59. }
  60. return 1;
  61. }
  62. catch
  63. {
  64. throw;
  65. }
  66. }
  67. //To Update the records of a particluar employee
  68. public int UpdateEmployee(Employee employee)
  69. {
  70. try
  71. {
  72. using (SqlConnection con = new SqlConnection(connectionString))
  73. {
  74. SqlCommand cmd = new SqlCommand("spUpdateEmployee", con);
  75. cmd.CommandType = CommandType.StoredProcedure;
  76. cmd.Parameters.AddWithValue("@EmpId", employee.ID);
  77. cmd.Parameters.AddWithValue("@Name", employee.Name);
  78. cmd.Parameters.AddWithValue("@Gender", employee.Gender);
  79. cmd.Parameters.AddWithValue("@Department", employee.Department);
  80. cmd.Parameters.AddWithValue("@City", employee.City);
  81. con.Open();
  82. cmd.ExecuteNonQuery();
  83. con.Close();
  84. }
  85. return 1;
  86. }
  87. catch
  88. {
  89. throw;
  90. }
  91. }
  92. //Get the details of a particular employee
  93. public Employee GetEmployeeData(int id)
  94. {
  95. try
  96. {
  97. Employee employee = new Employee();
  98. using (SqlConnection con = new SqlConnection(connectionString))
  99. {
  100. string sqlQuery = "SELECT * FROM tblEmployee WHERE EmployeeID= " + id;
  101. SqlCommand cmd = new SqlCommand(sqlQuery, con);
  102. con.Open();
  103. SqlDataReader rdr = cmd.ExecuteReader();
  104. while (rdr.Read())
  105. {
  106. employee.ID = Convert.ToInt32(rdr["EmployeeID"]);
  107. employee.Name = rdr["Name"].ToString();
  108. employee.Gender = rdr["Gender"].ToString();
  109. employee.Department = rdr["Department"].ToString();
  110. employee.City = rdr["City"].ToString();
  111. }
  112. }
  113. return employee;
  114. }
  115. catch
  116. {
  117. throw;
  118. }
  119. }
  120. //To Delete the record on a particular employee
  121. public int DeleteEmployee(int id)
  122. {
  123. try
  124. {
  125. using (SqlConnection con = new SqlConnection(connectionString))
  126. {
  127. SqlCommand cmd = new SqlCommand("spDeleteEmployee", con);
  128. cmd.CommandType = CommandType.StoredProcedure;
  129. cmd.Parameters.AddWithValue("@EmpId", id);
  130. con.Open();
  131. cmd.ExecuteNonQuery();
  132. con.Close();
  133. }
  134. return 1;
  135. }
  136. catch
  137. {
  138. throw;
  139. }
  140. }
  141. }
  142. }

Agora, vamos continuar a criar o nosso controlador de API da Web.

Adicionando o Controlador de API da Web ao aplicativo

Clique com o botão direito na pasta Controllers e selecione Add >> New Item

Uma caixa de diálogo "Add New Item" será aberta. Selecione  ASP.NET  no painel esquerdo, selecione “Web API Controller Class” no painel de templates e coloque o nome como  EmployeeController.cs . Pressione OK.

Abra o  arquivo EmployeeController.cs e coloque o seguinte código nele

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Threading.Tasks;
  5. using Microsoft.AspNetCore.Mvc;
  6. using System.Data.SqlClient;
  7. using System.Data;
  8. using ASPCoreWithAngular.Models;
  9. namespace ASPCoreWithAngular.Controllers
  10. {
  11. public class EmployeeController : Controller
  12. {
  13. EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();
  14. [HttpGet]
  15. [Route("api/Employee/Index")]
  16. public IEnumerable Index()
  17. {
  18. return objemployee.GetAllEmployees();
  19. }
  20. [HttpPost]
  21. [Route("api/Employee/Create")]
  22. public int Create([FromBody] Employee employee)
  23. {
  24. return objemployee.AddEmployee(employee);
  25. }
  26. [HttpGet]
  27. [Route("api/Employee/Details/{id}")]
  28. public Employee Details(int id)
  29. {
  30. return objemployee.GetEmployeeData(id);
  31. }
  32. [HttpPut]
  33. [Route("api/Employee/Edit")]
  34. public int Edit([FromBody]Employee employee)
  35. {
  36. return objemployee.UpdateEmployee(employee);
  37. }
  38. [HttpDelete]
  39. [Route("api/Employee/Delete/{id}")]
  40. public int Delete(int id)
  41. {
  42. return objemployee.DeleteEmployee(id);
  43. }
  44. }
  45. }

Nós terminamos com nossa lógica de backend. Então, vamos agora codificar nosso frontend usando o Angular 5.

Crie o serviço angular

Vamos criar um serviço Angular que irá converter a resposta da API da Web para JSON e passá-la para o nosso componente

Clique com o botão direito do mouse na  pasta ClientApp / app e, em seguida, clique em  Add >> New Folder e nomeie a pasta como  Services .

Clique com o botão direito na pasta Sevices e selecione Add >> New Item. Uma caixa de diálogo "Add New Item" será aberta. Selecione  Scripts  no painel esquerdo, selecione “ Arquivo TypeScript ” no painel de templates e coloque o nome como  empservice.service.ts . Clique em Adicionar

 

 

Abra o   arquivo empservice.service.ts e coloque o seguinte código nele


  1. import { Injectable, Inject } from '@angular/core';
  2. import { Http, Response } from '@angular/http';
  3. import { Observable } from 'rxjs/Observable';
  4. import { Router } from '@angular/router';
  5. import 'rxjs/add/operator/map';
  6. import 'rxjs/add/operator/catch';
  7. import 'rxjs/add/observable/throw';
  8. @Injectable()
  9. export class EmployeeService {
  10. myAppUrl: string = "";
  11. constructor(private _http: Http, @Inject('BASE_URL') baseUrl: string) {
  12. this.myAppUrl = baseUrl;
  13. }
  14. getEmployees() {
  15. return this._http.get(this.myAppUrl + 'api/Employee/Index')
  16. .map((response: Response) => response.json())
  17. .catch(this.errorHandler);
  18. }
  19. getEmployeeById(id: number) {
  20. return this._http.get(this.myAppUrl + "api/Employee/Details/" + id)
  21. .map((response: Response) => response.json())
  22. .catch(this.errorHandler)
  23. }
  24. saveEmployee(employee) {
  25. return this._http.post(this.myAppUrl + 'api/Employee/Create', employee)
  26. .map((response: Response) => response.json())
  27. .catch(this.errorHandler)
  28. }
  29. updateEmployee(employee) {
  30. return this._http.put(this.myAppUrl + 'api/Employee/Edit', employee)
  31. .map((response: Response) => response.json())
  32. .catch(this.errorHandler);
  33. }
  34. deleteEmployee(id) {
  35. return this._http.delete(this.myAppUrl + "api/Employee/Delete/" + id)
  36. .map((response: Response) => response.json())
  37. .catch(this.errorHandler);
  38. }
  39. errorHandler(error: Response) {
  40. console.log(error);
  41. return Observable.throw(error);
  42. }
  43. }

Neste momento, você pode receber um erro "O parâmetro 'employee' implicitamente tem um tipo 'any'" no arquivo empservice.service.ts  .

Se você encontrar esse problema, adicione a seguinte linha dentro do   arquivo tsconfig.json

“NoImplicitAny” false

 Consulte a imagem abaixo

 

Agora vamos continuar a criar nossos componentes.

Criando Componentes Angulares

Nós estaremos adicionando dois componentes angulares à nossa aplicação

  • componente fetchemployee - para exibir todos os dados do funcionário e excluir dados de um funcionário existente
  • addemployee component - para adicionar novos dados de funcionários, bem como para editar dados de funcionários existentes

Clique com o botão direito do mouse na  pasta ClientApp / app / components  e selecione Add >> New Folder e nomeie a pasta como  addemployee . Clique com o botão direito do mouse na pasta addemployee e selecione Add >> New Item. Uma caixa de diálogo "Add New Item" será aberta. Selecione Web no painel esquerdo, selecione “Arquivo TypeScript” no painel de modelos e coloque o nome como  Addemployee.component.ts . Clique em Adicionar. Isto irá adicionar um arquivo typescript dentro da  pasta addemployee 

 

Clique com o botão direito do mouse na  pasta addemployee e selecione  Add >> New Item. Uma caixa de diálogo "Add New Item" será aberta. Selecione  ASP.NET Core  no painel esquerdo, selecione “Página HTML” no painel de modelos e coloque o nome como  Addemployee.component.html.  Pressione OK. Isto irá adicionar um arquivo HTML dentro da  pasta addemployee .

 

 

Da mesma forma, adicione  fetchemployee.component.ts  typescript e  fetchemployee.component.html arquivo HTML dentro da  pasta  fetchemployee.Agora nossos  ClientApp / app / components  serão parecidos com a imagem abaixo

 

 

Abra o  arquivo fetchemployee.component.ts  e coloque o seguinte código nele


  1. import { Component, Inject } from '@angular/core';
  2. import { Http, Headers } from '@angular/http';
  3. import { Router, ActivatedRoute } from '@angular/router';
  4. import { EmployeeService } from '../../services/empservice.service'
  5. @Component({
  6. selector: 'fetchemployee',
  7. templateUrl: './fetchemployee.component.html'
  8. })
  9. export class FetchEmployeeComponent {
  10. public empList: EmployeeData[];
  11. constructor(public http: Http, private _router: Router, private _employeeService: EmployeeService) {
  12. this.getEmployees();
  13. }
  14. getEmployees() {
  15. this._employeeService.getEmployees().subscribe(
  16. data => this.empList = data
  17. )
  18. }
  19. delete(employeeID) {
  20. var ans = confirm("Do you want to delete customer with Id: " + employeeID);
  21. if (ans) {
  22. this._employeeService.deleteEmployee(employeeID).subscribe((data) => {
  23. this.getEmployees();
  24. }, error => console.error(error))
  25. }
  26. }
  27. }
  28. interface EmployeeData {
  29. id: number;
  30. name: string;
  31. gender: string;
  32. department: string;
  33. city: string;
  34. }

Vamos entender esse código. No topo, importamos módulos angulares e referências EmployeeService. Depois disso, temos o decorador @Component para definir o seletor e o URL do modelo para nosso componente

Dentro da classe FetchEmployeeComponent, declaramos uma variável de matriz  empList  do tipo EmployeeData, em  que  EmployeeData  é uma interface com as mesmas propriedades da classe Employee Model. Dentro do   método getEmployees , estamos chamando o método getEmployees do nosso serviço EmployeeService, que retornará uma matriz de Employees para ser armazenada na variável empList. O   método getEmployees é chamado dentro do construtor para que os dados do funcionário sejam exibidos à medida que a página é carregada.

Em seguida, temos o método delete que aceita employeeID como parâmetro. Isso solicitará ao usuário uma caixa de confirmação e, se o usuário selecionar sim, ele excluirá o funcionário com esse ID do funcionário.

Abra o  arquivo fetchemployee.component.html  e cole o seguinte código nele

  1. <h1>Employee Data</h1>
  2. <p>This component demonstrates fetching Employee data from the server.</p>
  3. <p *ngIf="!empList"><em>Loading...</em></p>
  4. <p>
  5. <a [routerLink]="['/register-employee']">Create New</a>
  6. </p>
  7. <table class='table' *ngIf="empList">
  8. <thead>
  9. <tr>
  10. <th>ID</th>
  11. <th>Name</th>
  12. <th>Gender</th>
  13. <th>Department</th>
  14. <th>City</th>
  15. </tr>
  16. </thead>
  17. <tbody>
  18. <tr *ngFor="let emp of empList">
  19. <td>{{ emp.id }}</td>
  20. <td>{{ emp.name }}</td>
  21. <td>{{ emp.gender }}</td>
  22. <td>{{ emp.department }}</td>
  23. <td>{{ emp.city }}</td>
  24. <td>
  25. <td>
  26. <a [routerLink]="['/employee/edit/', emp.id]">Edit</a> |
  27. <a [routerLink]="" (click)="delete(emp.id)">Delete</a>
  28. </td>
  29. </tr>
  30. </tbody>
  31. </table>
O código para este arquivo html é bem simples. Na parte superior, há um link para criar um novo registro de funcionário e, depois, ele terá uma tabela para exibir dados de funcionários e dois links para editar e excluir cada registro de funcionário.
Agora abra o  arquivo Addemployee.component.ts  e coloque o seguinte código nele

  1. import { Component, OnInit } from '@angular/core';
  2. import { Http, Headers } from '@angular/http';
  3. import { NgForm, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
  4. import { Router, ActivatedRoute } from '@angular/router';
  5. import { FetchEmployeeComponent } from '../fetchemployee/fetchemployee.component';
  6. import { EmployeeService } from '../../services/empservice.service';
  7. @Component({
  8. selector: 'createemployee',
  9. templateUrl: './AddEmployee.component.html'
  10. })
  11. export class createemployee implements OnInit {
  12. employeeForm: FormGroup;
  13. title: string = "Create";
  14. id: number;
  15. errorMessage: any;
  16. constructor(private _fb: FormBuilder, private _avRoute: ActivatedRoute,
  17. private _employeeService: EmployeeService, private _router: Router) {
  18. if (this._avRoute.snapshot.params["id"]) {
  19. this.id = this._avRoute.snapshot.params["id"];
  20. }
  21. this.employeeForm = this._fb.group({
  22. id: 0,
  23. name: ['', [Validators.required]],
  24. gender: ['', [Validators.required]],
  25. department: ['', [Validators.required]],
  26. city: ['', [Validators.required]]
  27. })
  28. }
  29. ngOnInit() {
  30. if (this.id > 0) {
  31. this.title = "Edit";
  32. this._employeeService.getEmployeeById(this.id)
  33. .subscribe(resp => this.employeeForm.setValue(resp)
  34. , error => this.errorMessage = error);
  35. }
  36. }
  37. save() {
  38. if (!this.employeeForm.valid) {
  39. return;
  40. }
  41. if (this.title == "Create") {
  42. this._employeeService.saveEmployee(this.employeeForm.value)
  43. .subscribe((data) => {
  44. this._router.navigate(['/fetch-employee']);
  45. }, error => this.errorMessage = error)
  46. }
  47. else if (this.title == "Edit") {
  48. this._employeeService.updateEmployee(this.employeeForm.value)
  49. .subscribe((data) => {
  50. this._router.navigate(['/fetch-employee']);
  51. }, error => this.errorMessage = error)
  52. }
  53. }
  54. cancel() {
  55. this._router.navigate(['/fetch-employee']);
  56. }
  57. get name() { return this.employeeForm.get('name'); }
  58. get gender() { return this.employeeForm.get('gender'); }
  59. get department() { return this.employeeForm.get('department'); }
  60. get city() { return this.employeeForm.get('city'); }
  61. }
Esse componente será usado para adicionar e editar os dados do funcionário. Como estamos usando um modelo de formulário junto com a validação do lado do cliente para adicionar e editar dados do cliente, importamos classes de @ angular / forms. O código para criar o formulário foi colocado dentro do construtor para que o formulário seja exibido conforme a página é carregada.

Esse componente manipulará as solicitações Adicionar e Editar. Então, como o sistema irá diferenciar entre os dois pedidos? A resposta é roteamento. Precisamos definir dois parâmetros de rota diferentes, um para adicionar registro de funcionário e outro para editar o registro de funcionário, que será definido no  arquivo app.module.shared.ts em  breve.

Nós declaramos o título da variável   para mostrar na parte superior da página e o ID da variável   para armazenar o ID do funcionário passado como o parâmetro no caso da solicitação de edição. Para ler o ID do funcionário da URL, usaremos o  ActivatedRoute.snapshot  dentro do construtor e definiremos o valor da variável id.

Dentro do ngOnInit vamos verificar se o id está configurado, então vamos mudar o título para “Edit”, pegar os dados para esse id do nosso serviço e preencher os campos em nosso formulário. O valor lido do banco de dados será retornado como JSON e terá todas as propriedades iguais às declaradas em nosso FormBuilder, portanto, usamos o método setValue para preencher nosso formulário.

O método salvar será chamado clicando no botão "Salvar" do nosso formulário. Com base no fato de ser uma operação Adicionar ou Editar, ele chamará o método correspondente de nosso serviço e, depois, com sucesso, redirecionará de volta à página de busca de funcionários.

No último, também definimos funções getter para os nomes de controle de nosso formulário para ativar a validação do lado do cliente.

Abra o  arquivo Addemployee.component.html e coloque o seguinte código nele.


  1. <h1>{{title}}</h1>
  2. <h3>Employee</h3>
  3. <hr />
  4. <form [formGroup]="employeeForm" (ngSubmit)="save()" #formDir="ngForm" novalidate>
  5. <div class="form-group row">
  6. <label class=" control-label col-md-12">Name</label>
  7. <div class="col-md-4">
  8. <input class="form-control" type="text" formControlName="name">
  9. </div>
  10. <span class="text-danger" *ngIf="name.invalid && formDir.submitted">
  11. Name is required.
  12. </span>
  13. </div>
  14. <div class="form-group row">
  15. <label class="control-label col-md-12" for="Gender">Gender</label>
  16. <div class="col-md-4">
  17. <select class="form-control" data-val="true" formControlName="gender">
  18. <option value="">-- Select Gender --</option>
  19. <option value="Male">Male</option>
  20. <option value="Female">Female</option>
  21. </select>
  22. </div>
  23. <span class="text-danger" *ngIf="gender.invalid && formDir.submitted">
  24. Gender is required
  25. </span>
  26. </div>
  27. <div class="form-group row">
  28. <label class="control-label col-md-12" for="Department">Department</label>
  29. <div class="col-md-4">
  30. <input class="form-control" type="text" formControlName="department">
  31. </div>
  32. <span class="text-danger" *ngIf="department.invalid && formDir.submitted">
  33. Department is required
  34. </span>
  35. </div>
  36. <div class="form-group row">
  37. <label class="control-label col-md-12" for="City">City</label>
  38. <div class="col-md-4">
  39. <input class="form-control" type="text" formControlName="city">
  40. </div>
  41. <span class="text-danger" *ngIf="city.invalid && formDir.submitted">
  42. City is required
  43. </span>
  44. </div>
  45. <div class="form-group">
  46. <button type="submit" class="btn btn-default">Save</button>
  47. <button class="btn" (click)="cancel()">Cancel</button>
  48. </div>
  49. </form>
  50. Aqui você pode observar que temos o atributo [formGroup] = ”employeeForm”, que é o nome do nosso grupo de formulários no   arquivo addemployee.component.ts . “(NgSubmit) =” save () ”invocará nosso método save no envio de formulário.

Além disso, todo controle de entrada possui o atributo formControlName = ”xyz”, isso é usado para ligar o FormControl ao HTML. Também definimos uma mensagem de erro para a verificação de validação do lado do cliente e ela será invocada apenas no envio do formulário.

Definindo rota e menu de navegação para nosso aplicativo

Abra o   arquivo /app/app.module.shared.ts e coloque o seguinte código nele.


  1. import { NgModule } from '@angular/core';
  2. import { EmployeeService } from './services/empservice.service'
  3. import { CommonModule } from '@angular/common';
  4. import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  5. import { HttpModule } from '@angular/http';
  6. import { RouterModule } from '@angular/router';
  7. import { AppComponent } from './components/app/app.component';
  8. import { NavMenuComponent } from './components/navmenu/navmenu.component';
  9. import { HomeComponent } from './components/home/home.component';
  10. import { FetchEmployeeComponent } from './components/fetchemployee/fetchemployee.component'
  11. import { createemployee } from './components/addemployee/AddEmployee.component'
  12. @NgModule({
  13. declarations: [
  14. AppComponent,
  15. NavMenuComponent,
  16. HomeComponent,
  17. FetchEmployeeComponent,
  18. createemployee,
  19. ],
  20. imports: [
  21. CommonModule,
  22. HttpModule,
  23. FormsModule,
  24. ReactiveFormsModule,
  25. RouterModule.forRoot([
  26. { path: '', redirectTo: 'home', pathMatch: 'full' },
  27. { path: 'home', component: HomeComponent },
  28. { path: 'fetch-employee', component: FetchEmployeeComponent },
  29. { path: 'register-employee', component: createemployee },
  30. { path: 'employee/edit/:id', component: createemployee },
  31. { path: '**', redirectTo: 'home' }
  32. ])
  33. ],
  34. providers: [EmployeeService]
  35. })
  36. export class AppModuleShared {
  37. }

Aqui também importamos todos os nossos componentes e definimos rotas para nossa aplicação como abaixo

  • casa que irá redirecionar para o componente home
  • buscar-funcionário para exibir todos os dados do funcionário usando o componente fetchemployee
  • cadastrar-funcionário para adicionar novo cadastro de funcionário usando o componente addemployee
  • employee / edit /: id para editar o registro de funcionário existente usando o componente addemployee
  • Para qualquer outro caminho, ele será redirecionado para o componente inicial
Uma última coisa é definir o menu de navegação para o nosso aplicativo. Abra

  1. <div class='main-nav'>
  2. <div class='navbar navbar-inverse'>
  3. <div class='navbar-header'>
  4. <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
  5. <span class='sr-only'>Toggle navigation</span>
  6. <span class='icon-bar'></span>
  7. <span class='icon-bar'></span>
  8. <span class='icon-bar'></span>
  9. </button>
  10. <a class='navbar-brand' [routerLink]="['/home']">ASPCoreWithAngular</a>
  11. </div>
  12. <div class='clearfix'></div>
  13. <div class='navbar-collapse collapse'>
  14. <ul class='nav navbar-nav'>
  15. <li [routerLinkActive]="['link-active']">
  16. <a [routerLink]="['/home']">
  17. <span class='glyphicon glyphicon-home'></span> Home
  18. </a>
  19. </li>
  20. <li [routerLinkActive]="['link-active']">
  21. <a [routerLink]="['/fetch-employee']">
  22. <span class='glyphicon glyphicon-th-list'></span> Fetch employee
  23. </a>
  24. </li>
  25. </ul>
  26. </div>
  27. </div>
  28. </div>
o   arquivo /app/components/navmenu/navmenu.component.html e coloque o seguinte código nele.
E é isso. Criamos nosso primeiro aplicativo ASP.NET Core usando o Angular 5. pressione F5 para iniciar o aplicativo.

Uma página da web será aberta conforme mostrado na imagem abaixo. Observe a URL mostrando a rota para nosso componente inicial. E o menu de navegação à esquerda mostra o link de navegação para as páginas Home e Fetch Employee.

 

 

Clique em  Buscar Empregado  no menu de navegação. Ele será redirecionado para buscar o componente do funcionário e exibir todos os dados do funcionário na página.

 

 

Como não adicionamos nenhum dado, está vazio.

Clique em  CreateNew  para navegar para a página  / register-employee  . Adicione um novo registro de funcionário como mostrado na imagem abaixo

 

 

Se perdermos os dados em qualquer campo durante a criação do registro de funcionários, receberemos uma mensagem de erro de validação de campo obrigatória.

 

 

Depois de inserir os dados em todos os campos, clique no botão "Salvar". O novo registro de funcionário será criado e você será redirecionado para a página  / buscar funcionário  , exibindo registros de todos os funcionários. Aqui, também podemos ver os métodos de ação Editar e Excluir.

 

 

Se quisermos editar um registro de funcionário existente, clique no link Editar ação. Ele abrirá a página Editar, abaixo, onde podemos alterar os dados do funcionário. Observe que passamos o ID do funcionário no parâmetro de URL.

 

 

Aqui nós mudamos o Departamento de funcionários Swati de Marketing para RH. Clique em "Salvar" para retornar à página de busca de funcionários para ver as alterações atualizadas, conforme destacado na imagem abaixo.

 

 

Se perdermos algum campo durante a edição de registros de funcionários, a visualização Editar também exibirá a mensagem de erro de validação de campo obrigatória, conforme mostrado na imagem abaixo.

 

 

Agora, executaremos a operação Excluir em um funcionário chamado Dhiraj com o ID do funcionário 2. Clique no link Excluir ação que abrirá uma caixa de confirmação do javascript solicitando uma confirmação para ser excluída.

Assim que clicarmos no botão Excluir, o funcionário com o nome Dhiraj será excluído e poderemos ver a lista atualizada de funcionários, conforme mostrado abaixo.

Implantando o aplicativo

Abra o   arquivo tsconfig.json e adicione a seguinte linha

 “StrictNullChecks”: false

Veja a imagem abaixo:

Quando publicarmos o aplicativo, o Visual Studio executará o comando “node node_modules / webpack / bin / webpack.js –config webpack.config.vendor.js –env.prod”. Adicionando a linha acima mencionada no arquivo tsconfig.json irá garantir que este comando não irá verificar rigorosamente quaisquer valores nulos em nossa aplicação.

Observe que, se você não estiver publicando este aplicativo, não precisará adicionar “strictNullChecks”: false em seu  arquivo tsconfig.json . 


Conclusão

Nós criamos uma aplicação ASP.NET Core usando Angular 5 no frontend, Web API e ADO.NET no backend com a ajuda do VS 2017. Se você é fã do Razor e não quer usar o frontend Angular então você também pode criar esta mesma aplicação usando o Razor.


Comentários

Deixe um Comentário

Posts Recentes

24/Outubro/2018

Jogos

19/Setembro/2018

CRUD com ASP.NET Core MVC...

18/Setembro/2018

Autenticação usando o...


Onde estamos ? clique no mapaFechar Mapa

Entre em Contato

Escreva para nós, vamos trocar algumas ideias!

Telefone

(24) 9219-6805

24992196805

Email

heitorhog@outlook.com

Localização

Rua Professor João de Deus, 908,Quarteirão Brasileiro Petrópolis RJ