How to Implement HttpDelete and HttpPut in Asp.Net MVC Core 3.1 c#. Resolve HTTP ERROR 405?

Question

Technology Info: Framework = Asp.Net Core 3.1 IDE = VisualStudio 2019

Problem: I have a controller with Update and Delete Action Methods. I have UpdateView and DeleteView from where I need to redirect to the respective controller. I have implemented a button that can submit the form. Still I'm facing HTTP ERROR 405 Issues with PUT & DELETE . Can somebody help me to resolve this issue. Thanks in advance
Controller:

    [HttpPut]
    [ActionName("ModifyEmployee")]
    public IActionResult ModifyEmployee(int employeeId, Malips.Data.Employee employee)
    {
        if (ModelState.IsValid)
        {
            Malips.Data.Employee employeeDetail = _hrService.EmployeeSystem.UpdateEmployee(employee);
            return View("GetEmployee", employeeDetail);
        }
        return View();
    }

    [HttpDelete]
    public IActionResult DeleteEmployee(int employeeId)
    {
        _hrService.EmployeeSystem.DeleteEmployee(employeeId);
        return View("Index");
    }

UpdateView:

@model Employee
@{
    ViewBag.Title = "Modify Employee";
}
<div>
    <form asp-controller="Hr" asp-action="ModifyEmployee" asp-route-employeeId="@Model.EmpId">
        <div class="form-group">
            <div asp-validation-summary="All" class="text-danger">
            </div>
        </div>
        @Html.HiddenFor(e => e.EmpId)
        <div class="form-group row">
            <label asp-for="FirstName" class="col-sm-2">First Name</label>
            <input asp-for="FirstName" class="col-sm-10" />
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div>
        <button type="submit" class="btn btn-info">Update</button>
    </form>
</div>

DeleteView:

<form asp-controller="Hr" asp-action="DeleteEmployee" asp-route-employeeId="@Model.EmpId">
    <div class="row card" style="width: 18rem;">
        <div class="card-body">
            <label hidden="hidden">@Model.EmpId</label>
            <h5 class="card-title">@Model.FirstName  @Model.LastName</h5>
            <p class="card-text">@Model.Salary </p>
            <button type="submit" class="btn btn-danger">Delete</button>
        </div>
    </div>
</form>

Answer 1

The current HTML5 does not support PUT or DELETE in forms. You can use it with ajax or httpclient only. Or you can try @Html.BeginForm razor page template if it is possible. @Html.BeginForm has post metod choice.

For now remove [ActionName("ModifyEmployee")], [httpput] and [httpdelete] from your action attributes. And change

public IActionResult ModifyEmployee(int employeeId, Malips.Data.Employee employee)

to:

public IActionResult ModifyEmployee(Employee employee)

since you don't use and don't need emploeeId. And remove asp-route-employeeId="@Model.EmpId" from ModifyEmployee view too.

Answer 2

Like @Sergey said,You can use it with ajax.Below is a working demo.

UpdateView:

    <div>
    <form id="update" asp-controller="Hr" asp-action="ModifyEmployee">
        <div class="form-group">
            <div asp-validation-summary="All" class="text-danger">
            </div>
        </div>
        @Html.HiddenFor(e => e.EmpId)
        <div class="form-group row">
            <label asp-for="FirstName" class="col-sm-2">First Name</label>
            <input asp-for="FirstName" class="col-sm-10" />
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div>
        <div class="form-group row">
            <label asp-for="LastName" class="col-sm-2">First Name</label>
            <input asp-for="LastName" class="col-sm-10" />
            <span asp-validation-for="LastName" class="text-danger"></span>
        </div>
        <button type="submit" id="submit" class="btn btn-info">Update</button>
    </form>
</div>
@section scripts
{
    <script>
        $("#submit").click(function (e) {
        e.preventDefault();
        var data = $('#update').serialize();
        $.ajax({
            type: "PUT",
            url: "/hr/Modifyemployee",
            data: data,
            success: function (response) {
                window.location.href = response.redirectToUrl;
            }
        });
    })
    </script>
}

ModifyEmployee Action

 [HttpPut]
 [ActionName("ModifyEmployee")]
 //remember add this.
 [ValidateAntiForgeryToken]
 public async Task<IActionResult> ModifyEmployee(Employee employee)
 {
        //....
        return new JsonResult(new { redirectToUrl = Url.Action("Index", "Hr") });
 }

DeleteView:

 <div>
    <form id="delete" asp-controller="Hr" asp-action="DeleteEmployee" asp-route-employeeId="@Model.EmpId">
        <div class="row card" style="width: 18rem;">
            <div class="card-body">
                <label hidden="hidden">@Model.EmpId</label>
                <h5 class="card-title">@Model.FirstName  @Model.LastName</h5>
                <button type="submit" id="submit" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </form>
</div>
@section scripts
{
    $("#submit").click(function (e) {
        e.preventDefault();
            $.ajax({
            type: "delete",
            url: "/hr/DeleteEmployee?id=" + @Model.EmpId,
            success: function (response) {
                window.location.href = response.redirectToUrl;
            }
        });
    })
    </script>
}

DeleteEmployee Action

[HttpDelete]
public async Task<IActionResult> DeleteEmployee(int id)
{
   //......
   return new JsonResult(new { redirectToUrl = Url.Action("Index", "hr") });
}

Test Result: