Deleting row by id not working in Asp.net core web API + Angular 9

Question

I am trying to delete the column by passing id from Angular 9+ to ASP.NET Core Web API, but I am not able to hit in the controller. What mistake I have done here? I am using table data to run SQL queries.

Controller

[Route("api/[controller]")]
[ApiController]
public class SettlementController : ControllerBase
{
    public IConfiguration Configuration { get; }
    private readonly DatabaseContext _context;

    public SettlementController(IConfiguration configuration, DatabaseContext context)
    {
        Configuration = configuration;
        _context = context;
    }

    // Delete settlement by id
    [Route("DeleteById")]
    [HttpDelete("{id}")]
    public IActionResult DeleteSettlementById([FromBody] SettlementModel model) //sealed class of having Id only
    {
        var tid = model.Id;

        try
        {
            string sConn = Configuration["ConnectionStrings:ServerConnection"];

            using (SqlConnection con = new SqlConnection(sConn))
            {
                List<Object> objList = new List<Object>();

                // This is the stored procedure. I pass in the "Id"
                string query = "ST_PRO_DELETESETTLEMENT"; 

                using (SqlCommand cmd = new SqlCommand(query))
                {
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.Add("@TID", SqlDbType.VarChar).Value = tid;

                    con.Open();
                    cmd.Connection = con;

                    using (SqlDataReader reader = cmd.ExecuteReader())
                    {
                        while (reader.Read())
                        {
                            objList.Add(new
                            {
                                //TID = reader[0].ToString(),
                            });
                        }
                    }

                    con.Close();
                }

                return Ok(objList);
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

settlementService.ts file:

 deleteSettlement(id) {
     console.log(id);
     return this.http.delete(this.BaseURL + 'Settlement/DeleteById/' + id);
 }

Typescript file:

deleteSettle(tid) {
    console.log(tid);  // getting tid in console

    if (confirm('Are you sure to delete this record ? TID: '+ tid)) {
        this.settlementService.deleteSettlement(tid).subscribe(
            (data: any) => {
                this.toastr.success("Successfully deleted");
            },
            err => {
               if (err.status == 400)
                  this.toastr.error('Server error or bad request', 'Error');
               else
                  this.toastr.error('Failed to check data', 'Server Error');
            }
      );
   }
}

Error:

DELETE https://localhost:44372/api/Settlement/DeleteById/355 404

Answer 1

Your route path has been overridden by this attribute [HttpDelete("{id}")]

So just remove the Route attribute and add your attribute like this

[HttpDelete("DeleteById/{id}")]

Next you need to remove the [FromBody] attribute in the method parameters and write like this

public IActionResult DeleteSettlementById(int id)

Hope it helps - Happy coding :)