Direct delete link from index view instead of going to delete page - asp.net-mvc

Question

I am trying to create a link that will delete one of the records without the need to go to the delete page.
My controller for delete section:
// GET: Cars/Delete/5
public async Task<ActionResult> Delete(Guid? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Car car = await db.Cars.FirstOrDefaultAsync();
if (car == null)
{
return HttpNotFound();
}
return View(car);
}
// POST: Cars/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public async Task<ActionResult> DeleteConfirmed(Guid id)
{
Car car = await db.Cars.FindAsync(id);
db.Cars.Remove(car);
await db.SaveChangesAsync();
return RedirectToAction("Index");
}
In the view I am trying to have a link to directly delete it like this:
<a href="#Url.Action("DeleteConfirmed", "Cars", new { id=item.Id })" class="btn btn-danger btn-sm" onclick = "return confirm('Are sure wants to delete?');">
<i class="fa fa-times" aria-hidden="true"></i>
</a>
The most common solution to do it is by creating a form and do it like this:
#using (Html.BeginForm("DeleteConfirmed", "Cars", new { id = item.Id }))
{
#Html.AntiForgeryToken()
<input type="submit" value="" class="btn btn-danger" onclick="return confirm('Are sure wants to delete?');" />
}
Is there is a way to make it without the need of using the form?

Answer 1

Yes. Please refer to the code below:
input type="button" id="btnDelete" class="btn btn-danger"
value="Delete" />
<script type="text/javascript">
$("#btnDelete").click(function () {
$.ajax({
url: "/Cars/Delete",
type: 'POST',
data: { id='-your-id' },
async: 'true',
dataType: 'html',
success: function (data) {
//Do your thing on Success if needed
}
});
});
</script>