如何在 Asp.Net MVC Core 3.1 c# 中實現 HttpDelete 和 HttpPut。 解決 HTTP 錯誤 405？

Question

技術信息：框架 = Asp.Net Core 3.1 IDE = VisualStudio 2019

問題：我有一個帶有更新和刪除操作方法的 controller。 我有 UpdateView 和 DeleteView 從我需要重定向到相應的 controller 的地方。 我已經實現了一個可以提交表單的按鈕。 我仍然面臨PUT & DELETE的HTTP ERROR 405問題。 有人可以幫我解決這個問題。 提前致謝
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");
    }

更新視圖：

@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>

刪除視圖：

<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

當前的 HTML5 不支持 forms 中的 PUT 或 DELETE。 您只能將它與 ajax 或 httpclient 一起使用。 或者，如果可能，您可以嘗試@Html.BeginForm razor 頁面模板。 @Html.BeginForm 有發布方法選擇。

現在從您的操作屬性中刪除 [ActionName("ModifyEmployee")]、[httpput] 和 [httpdelete]。 並改變

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

至：

public IActionResult ModifyEmployee(Employee employee)

因為您不使用也不需要emploeeId。 並從 ModifyEmployee 視圖中刪除 asp-route-employeeId="@Model.EmpId" 。

Answer 2

就像@Sergey 所說，您可以將它與 ajax 一起使用。下面是一個工作演示。

更新視圖：

    <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>
}

修改員工操作

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

刪除視圖：

 <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>
}

刪除員工操作

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

測試結果：