کار با درخواستهای Delete در Angular - آموزش برنامه نويسی و طراحی سايت اكسپرت ماركت

برای تمام کردن قسمت کد نویسی این آموزش گام به گام، می خواهیم logic حذف entity را پیاده سازی کنیم. برای انجام این کار، ما قصد داریم یک form برای پشتیبانی از این عمل و ارسال درخواست DELETE به سرور ایجاد کنیم.

اگر می خواهید تمام آموزشهای لازم و پایه مربوط به آموزش گام به گام Angular را ببینید ، لطفاً روی این لینک کلیک کنید: مقدمه آموزش گام به گام Angular.

ساختار پوشه و Routing

با اجرای دستور Angular CLI شروع میکنیم، که ساختار پوشه مورد نیاز را ایجاد می کند. علاوه بر این، این دستور، کامپوننت OwnerDelete را در فایل owner.module.ts ایمپورت می کند:

ng g component owner/owner-delete --skip-tests

1	ng g component owner/owner-delete --skip-tests

علاوه بر این، باید فایل owner-routing.module.ts را برای فعال کردن routing برای این component تغییر دهیم:

const routes: Routes = [
  { path: 'list', component: OwnerListComponent },
  { path: 'details/:id', component: OwnerDetailsComponent },
  { path: 'create', component: OwnerCreateComponent },
  { path: 'update/:id', component: OwnerUpdateComponent },
  { path: 'delete/:id', component: OwnerDeleteComponent }
];

const routes: Routes = [

{ path: 'list', component: OwnerListComponent },

{ path: 'details/:id', component: OwnerDetailsComponent },

{ path: 'create', component: OwnerCreateComponent },

{ path: 'update/:id', component: OwnerUpdateComponent },

{ path: 'delete/:id', component: OwnerDeleteComponent }

];

علاوه بر این، فایل owner-list.component.html را به این صورت نیز اصلاح میکنیم:

<td><button type="button" id="delete" class="btn btn-danger"
  (click)="redirectToDeletePage(owner.id)">Delete</button></td>

1 2	<td><button type="button" id="delete" class="btn btn-danger" (click)="redirectToDeletePage(owner.id)">Delete</button></td>

و فایل owner-list.component.ts برای فعال کردن navigation به صفحه delete:

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

public redirectToDeletePage = (id) => {

const deleteUrl: string = `/owner/delete/${id}`;

this.router.navigate([deleteUrl]);

}

آماده سازی صفحه برای اقدامات Delete در Angular

برای ایجاد قسمت HTML کامپوننت، با این کد wrapper شروع میکنیم:

<div class="container">
  <div class="row">
    <div class="col-md-10 card card-body bg-light mb-2 mt-2">
      
    </div>
  </div>
</div>

</div>

در داخل عنصر div با کلاس col-md-10، می‌خواهیم تمام جزئیات مربوط به entity را که می‌خواهیم حذف کنیم را نشان دهیم:

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

<label for="name" class="control-label">Owners name:</label>

</div>

</span>

</div>

<label for="dateOfBirth" class="control-label">Date of birth:</label>

</div>

</span>

</div>

<label for="address" class="control-label">Address:</label>

</div>

</span>

</div>

درست زیر آخرین عنصر div، دکمه ها را اضافه میکنیم:

<br>
<div class="row">
  <div class="offset-md-3 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>

<br>

<button type="submit" class="btn btn-info" (click)="deleteOwner()">Delete</button>

</div>

<button type="button" class="btn btn-danger" (click)="redirectToOwnerList()">Cancel</button>

</div>

در حال حاضر قست HTML کامپوننت آماده است. تنها کاری که باید انجام دهیم این است که business logic را پیاده سازی کنیم.

مدیریت اقدامات Delete در فایل Component

با دستورهای import در فایل owner-delete.copmonent.ts شروع میکنیم:

import { HttpErrorResponse } from '@angular/common/http';
import { Router, ActivatedRoute } from '@angular/router';
import { ErrorHandlerService } from './../../shared/services/error-handler.service';
import { OwnerRepositoryService } from './../../shared/services/owner-repository.service';
import { Owner } from './../../_interfaces/owner.model';
import { Component, OnInit } from '@angular/core';
import { BsModalRef, ModalOptions, BsModalService } from 'ngx-bootstrap/modal';
import { SuccessModalComponent } from 'src/app/shared/modals/success-modal/success-modal.component';

import { HttpErrorResponse } from '@angular/common/http';

import { Router, ActivatedRoute } from '@angular/router';

import { ErrorHandlerService } from './../../shared/services/error-handler.service';

import { OwnerRepositoryService } from './../../shared/services/owner-repository.service';

import { Owner } from './../../_interfaces/owner.model';

import { Component, OnInit } from '@angular/core';

import { BsModalRef, ModalOptions, BsModalService } from 'ngx-bootstrap/modal';

import { SuccessModalComponent } from 'src/app/shared/modals/success-modal/success-modal.component';

سپس، ویژگی های لازم را ایجاد کرده و service ها را در داخل سازنده inject میکنیم:

export class OwnerDeleteComponent implements OnInit {
  owner: Owner;
  bsModalRef?: BsModalRef;

  constructor(private repository: OwnerRepositoryService, private errorHandler: ErrorHandlerService,
    private router: Router, private activeRoute: ActivatedRoute, private modal: BsModalService) { }
}

export class OwnerDeleteComponent implements OnInit {

owner: Owner;

bsModalRef?: BsModalRef;

constructor(private repository: OwnerRepositoryService, private errorHandler: ErrorHandlerService,

private router: Router, private activeRoute: ActivatedRoute, private modal: BsModalService) { }

}

در زیر سازنده، می‌خواهیم logic مربوط به fetch کردن owner و هدایت به کامپوننت owner-list را اضافه کنیم:

ngOnInit(): void {
  this.getOwnerById();
}

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

  this.repository.getOwner(apiUri)
  .subscribe({
    next: (own: Owner) => this.owner = own,
    error: (err: HttpErrorResponse) => this.errorHandler.handleError(err)
  })
}

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

ngOnInit(): void {

this.getOwnerById();

}

private getOwnerById = () => {

const ownerId: string = this.activeRoute.snapshot.params['id'];

const apiUri: string = `api/owner/${ownerId}`;

this.repository.getOwner(apiUri)

.subscribe({

next: (own: Owner) => this.owner = own,

error: (err: HttpErrorResponse) => this.errorHandler.handleError(err)

})

}

redirectToOwnerList = () => {

this.router.navigate(['/owner/list']);

}

همه چیز اینجا با توجه به پست های قبلی آشنا به نظر میرسد.

در نهایت، delete logic را درست در زیر تابع redirectToOwnerList پیاده سازی میکنیم:

deleteOwner = () => {
  const deleteUri: string = `api/owner/${this.owner.id}`;

  this.repository.deleteOwner(deleteUri)
  .subscribe({
    next: (_) => {
      const config: ModalOptions = {
        initialState: {
          modalHeaderText: 'Success Message',
          modalBodyText: `Owner deleted successfully`,
          okButtonText: 'OK'
        }
      };

      this.bsModalRef = this.modal.show(SuccessModalComponent, config);
      this.bsModalRef.content.redirectOnOk.subscribe(_ => this.redirectToOwnerList());
    },
    error: (err: HttpErrorResponse) => this.errorHandler.handleError(err)
  })
}

deleteOwner = () => {

const deleteUri: string = `api/owner/${this.owner.id}`;

this.repository.deleteOwner(deleteUri)

.subscribe({

next: (_) => {

const config: ModalOptions = {

initialState: {

modalHeaderText: 'Success Message',

modalBodyText: `Owner deleted successfully`,

okButtonText: 'OK'

}

};

this.bsModalRef = this.modal.show(SuccessModalComponent, config);

this.bsModalRef.content.redirectOnOk.subscribe(_ => this.redirectToOwnerList());

error: (err: HttpErrorResponse) => this.errorHandler.handleError(err)

})

}

تمام. ما قسمت Angular خود در این اپلیکیشن را به پایان رساندیم. در نتیجه، در حال حاضر، ما یک برنامه کاملا کاربردی آماده برای استقرار داریم. بنابراین، تنها کاری که باید انجام دهیم این است که فایل های Angular را برای تولید آماده کرده و برنامه تکمیل شده را مستقر کنیم.

نتیجه گیری

با خواندن این پست یاد گرفتید:

نحوه ایجاد قسمت HTML اکشن delete
نحوه ارسال درخواست DELETE به سرور

در قسمت بعدی این آموزش گام به گام، قصد داریم با استفاده از IIS، این اپلیکیشن را در محیط ویندوز منتشر کنیم.

لغو پاسخ

سلام من تازه شروع کردم با لینوکس کار کردن و پروژه دات نت نوشتم و می خوام اون رو روی…

سلام آقای ابراهیمی عزیز همانطور که از عنوان مقاله مشخصه، این ویژگیها، ویژگیهای جدیدیه که از نسخه ۲۰۱۷ به بعد…

ممنون از توضیحاتتون همانطور که گفتم این یک cms است که بر اساس asp.net core ساخته شده که در خود…

سلام وقتتون بخیرباشه . ممنون از مقاله خوب و جذابتون . میخواستم بپرسم که چطوری اون نقطه های توی ویژیوال…

من فکر می کنم منظور ایشان فریم ورک وبی هست که با آن Elanat CMS ساخته شده. https://github.com/elanatframework/Code_behind یک سری…

ساختار پوشه و Routing

آماده سازی صفحه برای اقدامات Delete در Angular

مدیریت اقدامات Delete در فایل Component

نتیجه گیری

نویسنده

لغو پاسخ