.NET Core 2.0, Angular 4 and MySQL. Delete Actions

View: 373    Dowload: 0   Comment: 0   Post by: admin   Category: ASP.NET Framework   Fields: Other

Download  net-core-2-0-angular-4-and.zip (117.24 KB)

You need to Sign In to download the file net-core-2-0-angular-4-and.zip
If you do not have an account then Sign up for free here

To finalize the coding part of the series, we are going to implement the logic for deleting the entity. To do that, we are going to create a form to support this action and send the DELETE request towards our server.

So, let’s dive right into it.

If you want to see all the basic instructions and complete navigation for the .NET Core series, check out the following link: Introduction of the .NET Core series.

For the complete navigation and all the basic instructions of the Angular series, check out: Introduction of the Angular series.

For the previous part check out: Creating Angular4 client side – Angular Update Actions

The source code is available at GitHub .NET Core, Angular 4 and MySQL. Part 15 – Source Code

This post is divided into several sections:

Folder Structure and Routing

Execute the Angular CLI command, which is going to create the required folder structure. Moreover, it is going to import OwnerDelete component inside the owner.module.ts file:

ng g component owner/owner-delete

In addition, we have to modify the owner.module.ts file to enable routing for this component:

RouterModule.forChild([
      { path: 'list', component: OwnerListComponent },
      { path: 'details/:id', component: OwnerDetailsComponent },
      { path: 'create', component: OwnerCreateComponent },
      { path: 'update/:id', component: OwnerUpdateComponent},
      { path: 'delete/:id', component: OwnerDeleteComponent }
    ])
  ]

Furthermore, let’s modify the owner-list.component.html file and owner-list.component.ts file to enable navigation to the delete page:

<button type="button" id="delete" class="btn btn-danger" 

(click)="redirectToDeletePage(owner.id)">Delete</button>

 

public redirectToDeletePage(id){
  let deleteUrl: string = `/owner/delete/${id}`;
  this.router.navigate([deleteUrl]);
}

Handling Angular Delete Actions in the HTML File

To create HTML part of the component, let’s start with the wrapper code:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 well">

    </div>
  </div>
  <br>
</div>

Inside the div with the col-md-10 well classes, we are going to show all the details from the entity we want to delete:

<div class="row">
  <div class="col-md-3">
    <label for="name" class="control-label">Owners name:</label>
  </div>
  <div class="col-md-7">
    <span name="name">
      {{owner?.name}}
    </span>
  </div>
</div>

<div class="row">
  <div class="col-md-3">
    <label for="dateOfBirth" class="control-label">Date of birth:</label>
  </div>
  <div class="col-md-7">
    <span name="dateOfBirth">
     {{owner?.dateOfBirth | date: 'MM/dd/yyyy'}}
    </span>
  </div>
</div>

<div class="row">
  <div class="col-md-3">
    <label for="address" class="control-label">Address:</label>
  </div>
  <div class="col-md-7">
    <span name="address">
      {{owner?.address}}
    </span>
  </div>
</div>

Right below the <br/> tag, let’s add the buttons:
<div class="row">
  <div class="col-md-offset-8 col-md-1">
    <button type="submit" class="btn btn-info" 

    (click)="deleteOwner()">Delete</button>
  </div>
  <div class="col-md-1">
    <button type="button" class="btn btn-danger" 

    (click)="redirectToOwnerList()">Cancel</button>
  </div>
</div>

Finally, we are going to add our custom modal components:

<app-success-modal [modalHeaderText]="'Success message'" 

  [modalBodyText]="'Action completed successfully'" 

  [okButtonText]="'OK'"

  (redirectOnOK)="redirectToOwnerList()"></app-success-modal>

<app-error-modal [modalHeaderText]="'Error message'" 

  [modalBodyText]="errorMessage" 

  [okButtonText]="'OK'"></app-error-modal>

Excellent!

Our HTML part of the component is ready. All we have to do is to implement the business logic.

Handling Angular Delete Actions in the Component File

Modify owner-delete.copmonent.ts file, by importing all the necessary resources and by injecting services in the constructor:

import { Component, OnInit } from '@angular/core';
import { ErrorHandlerService } from 'app/shared/services/error-handler.service';
import { RepositoryService } from 'app/shared/services/repository.service';
import { Owner } from './../../_interfaces/owner.model';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-owner-delete',
  templateUrl: './owner-delete.component.html',
  styleUrls: ['./owner-delete.component.css']
})
export class OwnerDeleteComponent implements OnInit {
  public errorMessage: string = '';
  public owner: Owner;

constructor(private repository: RepositoryService, 
            private errorHandler: ErrorHandlerService, private router: Router,
  private activeRoute: ActivatedRoute) { }

}

Below the constructor, we are going to add the logic for fetching the owner and redirecting to the owner-list component:

ngOnInit() {
  this.getOwnerById();
}

private getOwnerById() {
  let ownerId: string = this.activeRoute.snapshot.params['id'];
  let ownerByIdUrl: string = `api/owner/${ownerId}`;

  this.repository.getData(ownerByIdUrl)
    .subscribe(res => {
      this.owner = res as Owner;
    },
    (error) => {
      this.errorHandler.handleError(error);
      this.errorMessage = this.errorHandler.errorMessage;
    })
}

public redirectToOwnerList() {
  this.router.navigate(['/owner/list']);
}

Finally, let’s implement the delete logic right below the redirectToOwnerList function:

public deleteOwner() {
  let deleteUrl: string = `api/owner/${this.owner.id}`;
  this.repository.delete(deleteUrl)
    .subscribe(res => {
      $('#successModal').modal();
    },
    (error) => {
      this.errorHandler.handleError(error);
      this.errorMessage = this.errorHandler.errorMessage;
    })

That is it! We have finished our Angular part of this application. As a result, we have a fully functional application ready for deployment. Therefore, all we have left to do is to prepare Angular files for the production and to deploy the complete application to the Windows and Linux environment.

Conclusion

By reading this post, you have learned:

  • How to create HTML part of the delete action
  • How to send the DELETE request to the server

Thank you for reading the post, hopefully, it was helpful to you.

In the next part of the series, we are going to publish this complete application on the Windows environment by using the IIS.

If you have enjoyed reading this article, please leave a comment in the comments section below, and if you want to receive notifications about the freshly published content, we encourage you to subscribe to our blog.

The post .NET Core 2.0, Angular 4 and MySQL. Delete Actions appeared first on Code Maze.

.NET Core 2.0, Angular 4 and MySQL. Delete Actions

To finalize the coding part of the series, we are going to implement the logic for deleting the entity. To do that, we are going to create a form to support this action and send the DELETE request towards our server.

Posted on 26-04-2018 

Comment:

To comment you must be logged in members.

Files with category

 
File suggestion for you
File top downloads
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd