Delete key composed of a table with angular and Asp.net core

Question

You guys all clear? next I’m having problems with composite key in my project and I wanted your help because I’m still not quite sure about it, I’m doing the front in Angular and the backend with Asp.net core mvc (using web API), basically the project is a CRUD, I can already list it cute but I can’t delete, it always presents me a mistake.

Here is the delete in the controller:

        [HttpDelete("{id}")]
        public async Task<ActionResult<Access>> DeleteAccess(string Entity, decimal SystemCode)
        {
            var access = await _context.Access.FindAsync(Entity, SystemCode);

            if (access == null)
            {
                return NotFound();
            }

            _context.Access.Remove(access);
            await _context.SaveChangesAsync();

            return access;
        }

I do not know if it is correct, if this is really how the composite key passes (in this case the composite keys are Entity and Systemcode).

And in Angular I did the following, in HTML I put a button where the (click) from it I pass a method called delete for a parameter called row, see below:

<button [tooltip]="'Delete Access'" (click)="delete(row)" class="btn btn-danger btn-sm btn-color" type="button" [tooltipAppendToBody]><i class="fa fa-trash"></i></button>

Already in the Component I did the following in my method:

  delete(row) {
    this.accessService.delete(row.Entity)
    .then(data => this.getAll());
  }

I know my Commissioner is missing pass the Systemcode in delete but I have no idea how to do that.

In the browser when I see in the console it passes this error:

DELETE http://localhost:52434/access/teste 404 (Not Found)

ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":404,"statusText":"Not Found","url":"http://localhost:52434/access/teste","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://localhost:52434/access/teste: 404 Not Found","error":{"type":"https://tools.ietf.org/html/rfc7231#section-6.5.4","title":"Not Found","status":404,"traceId":"|924b0f7-47c01b3e49c595d5."}}
    at resolvePromise (zone.js:836)
    at resolvePromise (zone.js:795)
    at zone.js:897
    at ZoneDelegate.invokeTask (zone.js:431)
    at Object.onInvokeTask (core.js:27338)
    at ZoneDelegate.invokeTask (zone.js:430)
    at Zone.runTask (zone.js:198)
    at drainMicroTaskQueue (zone.js:611)
    at ZoneTask.invokeTask [as invoke] (zone.js:517)
    at invokeTask (zone.js:1671)

Can anyone help this poor intern solve this problem? hahah

Answer 1

Good gentlemen, I managed to solve and I will leave my contribution here for those with the same error ;D

Basically the backend was correct, just having to change the id for Entity, because the same was returning ERROR 404, ie was not finding the way. I just changed:

de [HttpDelete("{id}")], para [HttpDelete("{Entity}")]

So the backend stayed:

        [HttpDelete("{Entity}")]
        public async Task<ActionResult<Access>> DeleteAccess(string Entity, decimal SystemCode)
        {
            var access = await _context.Access.FindAsync(Entity, SystemCode);

            if (access == null)
            {
                return NotFound();
            }

            _context.Access.Remove(access);
            await _context.SaveChangesAsync();

            return access;
        }

Quiet, backend solved! now how did the frontend? how did I pass the composite keys? I did the following:

  delete(row) {
    const params = new HttpParams().set('SystemCode', row.SystemCode);
    this.accessService.delete(row.Entity, `Do you want to remove?`, params)
      .then(data => this.getAll());
  }

in delete I only used the HttpParams passing the other row that I needed ;D