Carregando Post...

ASP.NET Core - CRUD Usando o Angular 5 e o Entity Framework Core

Introdução

Neste artigo, vamos criar um aplicativo da Web usando o ASP.NET Core 2.0 e o Angular 5 com a ajuda da primeira abordagem do banco de dados do Entity Framework Core. Estaremos criando um exemplo de sistema de gerenciamento de registros de funcionários. Para ler as entradas do usuário, estamos usando Formulários Angulares com validações de campo obrigatórias no lado do cliente. Também vamos vincular uma lista suspensa no Angular Form a uma tabela no banco de dados usando o EF Core. Também aprenderemos como implantar esse aplicativo no IIS.

Estaremos usando o Visual Studio 2017 e o SQL Server 2012.

Pré-requisitos

  • Instale o .NET Core 2.0.0 ou acima do SDK a partir  daqui .
  • Instale a versão mais recente do Visual Studio 2017 Community Edition a partir  daqui .
  • Baixe e instale a versão mais recente do Node.js  aqui ..
  • SQL Server 2008 ou superior.

Código fonte

Antes de continuar, recomendo que você obtenha o código-fonte do  Github .

Criando Tabela

Nós estaremos usando duas tabelas para armazenar nossos dados.
  1. tblEmployee: - Usado para armazenar os detalhes do empregado. Ele contém campos como EmployeeID, Name, City, Department e Gender.
  2. tblCities: - Contém a lista de cidades e é usada para preencher o   campo Cidade da tabela tblEmployee. Ele contém dois campos CityID e CityName.

Execute os seguintes comandos para criar as duas tabelas

  1. CREATE TABLE tblEmployee (
  2. EmployeeID int IDENTITY(1,1) NOT NULL PRIMARY KEY,
  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. )
  8. GO
  9. CREATE TABLE tblCities (
  10. CityID int IDENTITY(1,1) NOT NULL PRIMARY KEY,
  11. CityName varchar(20) NOT NULL
  12. )
  13. GO

Agora, vamos colocar alguns dados na tabela tblCities. Estaremos usando esta tabela para vincular uma lista suspensa em nosso aplicativo da web a partir do qual a cidade desejada pode ser selecionada. Use as seguintes instruções de inserção.

  1. INSERT INTO tblCities VALUES('New Delhi');
  2. INSERT INTO tblCities VALUES('Mumbai');
  3. INSERT INTO tblCities VALUES('Hyderabad');
  4. INSERT INTO tblCities VALUES('Chennai');
  5. INSERT INTO tblCities VALUES('Bengaluru');

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 dentro do 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  EFNgApp  e pressione OK. 

 
 
Depois de clicar em OK, uma nova caixa de diálogo será aberta solicitando que você selecione 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  e  Views . Não tocaremos nas   pastas de visualizações deste tutorial, pois usaremos o Angular para lidar com a interface do usuário. As   pastas Controllersconterão nosso controlador de API da Web. 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  contratar  pastas de  ClientApp / app / components.

Adicionando o modelo ao aplicativo

Estamos usando a primeira abordagem do banco de dados principal do Entity Framework para criar nossos modelos. Navegue para Ferramentas >> Gerenciador de Pacotes NuGet >> Console do Gerenciador de Pacotes.

Temos que instalar o pacote para o provedor de banco de dados que estamos direcionando, que é o SQL Server, neste caso. Por isso, execute o seguinte comando:
  1. Instalar o pacote Microsoft.EntityFrameworkCore.SqlServer

Como estamos usando o Entity Framework Tools para criar um modelo a partir do banco de dados existente, também instalaremos o pacote de ferramentas. Por isso, execute o seguinte comando:

  1. Pacote de Instalação Microsoft.EntityFrameworkCore.Tools

Depois de ter instalado ambos os pacotes, vamos montar nosso modelo a partir das tabelas do banco de dados usando o seguinte comando:

  1. Scaffold-DbContext "Sua seqüência de conexão aqui" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -Tables tblEmployee, tblCities

Não esqueça de colocar sua própria string de conexão (dentro de ""). Depois que esse comando for executado com êxito, você poderá observar que uma pasta Modelos foi criada e contém três arquivos de classe  myTestDBContext.cs, TblCities.cs  e  TblEmployee.cs . O nome da sua classe DB Context será o nome do seu banco de dados com a palavra  Context . Aqui meu nome do banco de dados é  myTestDB , portanto, o nome da classe de contexto é  myTestDBContext. H ence criamos com sucesso nossos modelos usando EF banco de dados núcleo primeira abordagem.

Agora, vamos criar mais um arquivo de classe para lidar com operações relacionadas ao banco de dados

Clique com o botão direito na   pasta Models e selecione Add >> Class. Nomeie sua classe como  EmployeeDataAccessLayer.cs e clique no   botão Adicionar . Neste momento, a pasta Modelos terá a seguinte estrutura.

Abra  EmployeeDataAccessLayer.cs  e coloque o seguinte código para manipular as operações do banco de dados.


  1. using Microsoft.EntityFrameworkCore;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using System.Threading.Tasks;
  6. namespace EFNgApp.Models
  7. {
  8. public class EmployeeDataAccessLayer
  9. {
  10. myTestDBContext db = new myTestDBContext();
  11. public IEnumerable<TblEmployee> GetAllEmployees()
  12. {
  13. try
  14. {
  15. return db.TblEmployee.ToList();
  16. }
  17. catch
  18. {
  19. throw;
  20. }
  21. }
  22. //To Add new employee record
  23. public int AddEmployee(TblEmployee employee)
  24. {
  25. try
  26. {
  27. db.TblEmployee.Add(employee);
  28. db.SaveChanges();
  29. return 1;
  30. }
  31. catch
  32. {
  33. throw;
  34. }
  35. }
  36. //To Update the records of a particluar employee
  37. public int UpdateEmployee(TblEmployee employee)
  38. {
  39. try
  40. {
  41. db.Entry(employee).State = EntityState.Modified;
  42. db.SaveChanges();
  43. return 1;
  44. }
  45. catch
  46. {
  47. throw;
  48. }
  49. }
  50. //Get the details of a particular employee
  51. public TblEmployee GetEmployeeData(int id)
  52. {
  53. try
  54. {
  55. TblEmployee employee = db.TblEmployee.Find(id);
  56. return employee;
  57. }
  58. catch
  59. {
  60. throw;
  61. }
  62. }
  63. //To Delete the record of a particular employee
  64. public int DeleteEmployee(int id)
  65. {
  66. try
  67. {
  68. TblEmployee emp = db.TblEmployee.Find(id);
  69. db.TblEmployee.Remove(emp);
  70. db.SaveChanges();
  71. return 1;
  72. }
  73. catch
  74. {
  75. throw;
  76. }
  77. }
  78. //To Get the list of Cities
  79. public List<TblCities> GetCities()
  80. {
  81. List<TblCities> lstCity = new List<TblCities>();
  82. lstCity = (from CityList in db.TblCities select CityList).ToList();
  83. return lstCity;
  84. }
  85. }
  86. }

Agora, vamos continuar a criar 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.

Isso criará nossa classe EmployeeController da  API da Web  Vamos colocar toda a nossa lógica de negócios neste controlador. Vamos chamar os métodos de  EmployeeDataAccessLayer  para buscar dados e passar os dados para o frontend Angular.

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 EFNgApp.Models;
  6. using Microsoft.AspNetCore.Mvc;
  7. namespace EFNgApp.Controllers
  8. {
  9. public class EmployeeController : Controller
  10. {
  11. EmployeeDataAccessLayer objemployee = new EmployeeDataAccessLayer();
  12. [HttpGet]
  13. [Route("api/Employee/Index")]
  14. public IEnumerable<TblEmployee> Index()
  15. {
  16. return objemployee.GetAllEmployees();
  17. }
  18. [HttpPost]
  19. [Route("api/Employee/Create")]
  20. public int Create([FromBody] TblEmployee employee)
  21. {
  22. return objemployee.AddEmployee(employee);
  23. }
  24. [HttpGet]
  25. [Route("api/Employee/Details/{id}")]
  26. public TblEmployee Details(int id)
  27. {
  28. return objemployee.GetEmployeeData(id);
  29. }
  30. [HttpPut]
  31. [Route("api/Employee/Edit")]
  32. public int Edit([FromBody]TblEmployee employee)
  33. {
  34. return objemployee.UpdateEmployee(employee);
  35. }
  36. [HttpDelete]
  37. [Route("api/Employee/Delete/{id}")]
  38. public int Delete(int id)
  39. {
  40. return objemployee.DeleteEmployee(id);
  41. }
  42. [HttpGet]
  43. [Route("api/Employee/GetCityList")]
  44. public IEnumerable<TblCities> Details()
  45. {
  46. return objemployee.GetCities();
  47. }
  48. }
  49. }

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 Services 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 . pressione OK

 
 
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. getCityList() {
  15. return this._http.get(this.myAppUrl + 'api/Employee/GetCityList')
  16. .map(res => res.json())
  17. .catch(this.errorHandler);
  18. }
  19. getEmployees() {
  20. return this._http.get(this.myAppUrl + 'api/Employee/Index')
  21. .map((response: Response) => response.json())
  22. .catch(this.errorHandler);
  23. }
  24. getEmployeeById(id: number) {
  25. return this._http.get(this.myAppUrl + "api/Employee/Details/" + id)
  26. .map((response: Response) => response.json())
  27. .catch(this.errorHandler)
  28. }
  29. saveEmployee(employee) {
  30. return this._http.post(this.myAppUrl + 'api/Employee/Create', employee)
  31. .map((response: Response) => response.json())
  32. .catch(this.errorHandler)
  33. }
  34. updateEmployee(employee) {
  35. return this._http.put(this.myAppUrl + 'api/Employee/Edit', employee)
  36. .map((response: Response) => response.json())
  37. .catch(this.errorHandler);
  38. }
  39. deleteEmployee(id) {
  40. return this._http.delete(this.myAppUrl + "api/Employee/Delete/" + id)
  41. .map((response: Response) => response.json())
  42. .catch(this.errorHandler);
  43. }
  44. errorHandler(error: Response) {
  45. console.log(error);
  46. return Observable.throw(error);
  47. }
  48. }

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

Agora, vamos continuar a criar nossos componentes. 

Criando Componentes Angulares

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

  1.  componente fetchemployee - para exibir todos os dados do funcionário e excluir os dados existentes de um funcionário.
  2. addemployee component - para adicionar novos dados de funcionários ou 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  Scripts  no painel esquerdo, selecione “ Arquivo TypeScript ” no painel de templates e coloque o nome como  addemployee.component.ts . Pressione OK. Isso 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, crie uma   pasta fetchemployee dentro da pasta  ClientApp / app / components  e adicione o  arquivo fetchemployee.component.ts  typescript e  fetchemployee.component.html  HTML a ele. 
Agora nossos  ClientApp / app / components  serão parecidos com a imagem abaixo: 
 
 
Abra o  arquivo fetchemployee.component.ts  e coloque o seguinte código:

  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. templateUrl: './fetchemployee.component.html'
  7. })
  8. export class FetchEmployeeComponent {
  9. public empList: EmployeeData[];
  10. constructor(public http: Http, private _router: Router, private _employeeService: EmployeeService) {
  11. this.getEmployees();
  12. }
  13. getEmployees() {
  14. this._employeeService.getEmployees().subscribe(
  15. data => this.empList = data
  16. )
  17. }
  18. delete(employeeID) {
  19. var ans = confirm("Do you want to delete customer with Id: " + employeeID);
  20. if (ans) {
  21. this._employeeService.deleteEmployee(employeeID).subscribe((data) => {
  22. this.getEmployees();
  23. }, error => console.error(error))
  24. }
  25. }
  26. }
  27. interface EmployeeData {
  28. employeeId: number;
  29. name: string;
  30. gender: string;
  31. city: string;
  32. department: string;
  33. }

Vamos entender esse código. No topo, importamos módulos angulares e referências EmployeeService. Depois disso, temos o decorador @Component para definir 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 de nossa  classe TblEmployee 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 coloque 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>EmployeeId</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.employeeId }}</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.employeeId]">Edit</a> |
  27. <a [routerLink]="" (click)="delete(emp.employeeId)">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.

Nós terminamos com o nosso componente fetchemployee.

Agora abra o  arquivo addemployee.component.ts  e coloque o seguinte código:


  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. templateUrl: './AddEmployee.component.html'
  9. })
  10. export class createemployee implements OnInit {
  11. employeeForm: FormGroup;
  12. title: string = "Create";
  13. employeeId: number;
  14. errorMessage: any;
  15. cityList: Array<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.employeeId = this._avRoute.snapshot.params["id"];
  20. }
  21. this.employeeForm = this._fb.group({
  22. employeeId: 0,
  23. name: ['', [Validators.required]],
  24. gender: ['', [Validators.required]],
  25. department: ['', [Validators.required]],
  26. city: ['', [Validators.required]]
  27. })
  28. }
  29. ngOnInit() {
  30. this._employeeService.getCityList().subscribe(
  31. data => this.cityList = data
  32. )
  33. if (this.employeeId > 0) {
  34. this.title = "Edit";
  35. this._employeeService.getEmployeeById(this.employeeId)
  36. .subscribe(resp => this.employeeForm.setValue(resp)
  37. , error => this.errorMessage = error);
  38. }
  39. }
  40. save() {
  41. if (!this.employeeForm.valid) {
  42. return;
  43. }
  44. if (this.title == "Create") {
  45. this._employeeService.saveEmployee(this.employeeForm.value)
  46. .subscribe((data) => {
  47. this._router.navigate(['/fetch-employee']);
  48. }, error => this.errorMessage = error)
  49. }
  50. else if (this.title == "Edit") {
  51. this._employeeService.updateEmployee(this.employeeForm.value)
  52. .subscribe((data) => {
  53. this._router.navigate(['/fetch-employee']);
  54. }, error => this.errorMessage = error)
  55. }
  56. }
  57. cancel() {
  58. this._router.navigate(['/fetch-employee']);
  59. }
  60. get name() { return this.employeeForm.get('name'); }
  61. get gender() { return this.employeeForm.get('gender'); }
  62. get department() { return this.employeeForm.get('department'); }
  63. get city() { return this.employeeForm.get('city'); }
  64. }

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.shared.module.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 ngOnInit estamos realizando duas operações
  1. Estamos buscando a lista de cidades chamando o método getCityList do nosso serviço. Vamos vincular a lista de cidades a uma lista suspensa na nossa página html. Como estamos chamando o método getCityList em ngOnInit, a lista suspensa será preenchida conforme a página é carregada.
  2. Vamos verificar se o ID está definido, então vamos mudar o título para "Editar", obter 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 em se é uma operação Add ou uma operação Edit, ele chamará o método correspondente de nosso serviço e, depois, com sucesso, redirecionará de volta para o componente fetch-employee.

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. <select class="form-control" data-val="true" formControlName="city">
  40. <option value="">--Select City--</option>
  41. <option *ngFor="let city of cityList"
  42. value={{city.cityName}}>
  43. {{city.cityName}}
  44. </option>
  45. </select>
  46. </div>
  47. <span class="text-danger" *ngIf="city.invalid && formDir.submitted">
  48. City is required
  49. </span>
  50. </div>
  51. <div class="form-group">
  52. <button type="submit" class="btn btn-default">Save</button>
  53. <button class="btn" (click)="cancel()">Cancel</button>
  54. </div>
  55. </form>

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.

Para vincular a lista suspensa, estamos usando a   propriedade cityList que preenchemos da tabela tblCities chamando o método getCityList de nosso serviço dentro do método ngOnInit do  arquivo addemployee.component.ts  .

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

Abra o   arquivo /app/app.shared.module.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 a rota para nossa aplicação como abaixo

  • home - que redirecionará para o componente home
  • fetch-employee - para exibir todos os dados do funcionário usando o componente fetchemployee
  • cadastro-funcionário - para adicionar novo cadastro de funcionário utilizando o componente createemployee
  • employee / edit /: id - para editar o registro de funcionário existente usando o componente createemployee 
Uma última coisa é definir o menu de navegação para o nosso aplicativo. Abra o   arquivo /app/components/navmenu/navmenu.component.html e coloque o código a seguir


  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>

E é isso. Criamos nossa primeira aplicação ASP.NET Core usando a primeira abordagem do banco de dados principal Angular 5 e Entity Framework.

Demonstração de Execução

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, estamos vazios.

Clique em  CreateNew  para navegar para a página  / register-employee  . Adicione um novo registro de funcionário, conforme mostrado na imagem abaixo. Você pode observar que o   campo Cidade é uma lista suspensa, contendo todos os nomes das cidades que inserimos na tabela tblCities.

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 a cidade do empregado Rahul de Hyderabad para Chennai. 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 Swati 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 exclusão.

Assim que clicarmos no botão Excluir, o funcionário com o nome Swati será removido do nosso registro e você poderá 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 . 

Depois disso, siga as mesmas etapas mencionadas em Implantando um aplicativo Blazor no IIS

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