How to call webapi httpdelete action from view

[Route("api/[controller]/[action]")]
   [ApiController]
   public class UserController : Controller
   {
       private readonly IUserRepository _userRepository;

       public UserController(IUserRepository userRepository)
       {
           _userRepository = userRepository;
       }

       [HttpGet]
       public JsonResult Get()
       {
           var users = _userRepository.GetAllSync();
           return new JsonResult(users);
       }

       [HttpPost]
       public JsonResult Add([FromBody]User user)
       {
           if (!new UserSpecification().IsSatisfiedBy(user))
           {
               throw new ArgumentException("User not valid.");
           }
           if (_userRepository.AnySync(x =>
               x.Email == user.Email ||
               x.UserName == user.UserName))
           {
               throw new ArgumentException("User email or username already taken.");
           }
           _userRepository.AddSync(user);
           return new JsonResult(new { success = true, responseText = "User successfully added!" });
       }

       [HttpPatch]
       public JsonResult Change(string id, [FromBody]User user)
       {
           _userRepository.ReplaceOneSync(id, user);
           return new JsonResult(new { success = true, responseText = "User successfully modified!" });
       }

       [HttpDelete]
       public JsonResult Delete(string id)
       {
           _userRepository.DeleteSync(x => x.Id == id);
           return new JsonResult(new { success = true, responseText = "User successfully deleted!" });
       }
   }

<div class="text-center">
    <h1 class="display-4">Users</h1>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Username</th>
                <th>E-mail</th>
                <th>Phone</th>
                <th>Address</th>
                <th>Edit</th
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var user in Model.Users)
            {
                <tr class="user" data-userid="@user.Id">
                    <td>@user.Name</td>
                    <td>@user.UserName</td>
                    <td>@user.Email</td>
                    <td>@user.PhoneNumber</td>
                    <td>@user.Address</td>
                    <td><a class="btn btn-lg" asp-route-userId="@user.Id" asp-controller="Home" asp-action="CreateUser">class="glyphicon glyphicon-edit"__^</a></td>
                    <form method="post" >
                        <td><button type="submit" asp-route-id="@user.Id" asp-controller="Home" asp-action="Post">^__i class="glyphicon glyphicon-trash"__^</i></button></td>
                    </form>
                    <form>
                        <td> <a onclick="callDelete(@user.Id)">^__i class="glyphicon glyphicon-trash"></a></td>
                    </form>

                    
                    



                    @*<form method="delete" action="Home/Delete/{{user.id}}">
                        <td><button type="submit">^__i class="glyphicon glyphicon-trash"></button></td>
                    </form>
        <td>
            <button id="btnDelete" type="submit">^__i class="glyphicon glyphicon-trash"></button>
            <script>
                $('#btnDelete').click(function () {
                    $.ajax({
                        url: '@Url.Action("Delete", "Home",@user.Id)',
                        data: { Id: $("#txtName").val() },
                        type: 'Delete',
                        success: function (data) {
                            $("#divContent").html(data);
                        }
                    });
                });
            </script>
        </td>*@
        @*@using (Html.BeginForm("Delete","Home",@user.Id,FormMethod.Get));
                    <form method="post">
                        <td><button type="submit">delete</button></td>

                        @using (Html.BeginForm("Delete", "Home"){
                        @Html.HttpMethodOverride(HttpVerbs.Delete)
                        }
                            </form>*@
                </tr>
            }
        </tbody>
    </table>
    <div id="divContent"></div>
    <a class="btn btn-primary">Add New</a>
    <div id="userModal">

    </div>


</div>
<script>
    function callDelete(id) {
        var cuisines = ["Unknown", "Mexican", "Italian", "Indian"];

        $.ajax("/Home/Delete/" + id,
                { method: "DELETE" })
            .then(function(response) { $("#divContent").text = response.text; });
    };
</script>