使用 ajax 将数据发布到控制器答案

【问题标题】：Posting data to controller using ajax使用 ajax 将数据发布到控制器
【发布时间】：2018-10-01 12:13:19
【问题描述】：

首先，作为 win 表单开发人员，我在 Web 开发方面没有太多经验。我正在努力掌握它的窍门

我有两个表 TOURNAMENTS_M（主）和 TOURNAMENTS_D（详细），带有脚手架控制器和视图。

我已经编辑了主表创建/编辑视图，以便我也能够显示子记录

当我按下删除按钮时，我调用以下函数

function DeleteDetail(pId) {
    const con = confirm("are you sure ?");


    if (con === true) {

        $.ajax({
            url: "/TOURNAMENTS_M/Delete",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data:
                { id: pId }
            })
            .done(function (result) {
                alert("Succeed");
            })
            .fail(function (result) {
                alert("I failed :'( ");
            });

    }
}

但我得到的只是失败消息:(我在这里错过了什么？我真的很感谢任何帮助，我已经尝试了几个小时来完成这项工作

PS 我正在使用 mvc 核心

更新：

public async Task<IActionResult> Delete(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }

        var tOURNAMENTS_M = await _context.TOURNAMENTS_M
            .FirstOrDefaultAsync(m => m.TM_ROWID == id);
        if (tOURNAMENTS_M == null)
        {
            return NotFound();
        }

        return View(tOURNAMENTS_M);
    }

这就是我调用函数的方式

@if (Model != null)
{

    var i = 0;
    foreach (var detail in Model.TOURNAMENTS_D)
    {

    <tr>

        <td> <input type='hidden' name="TD_LEVEL" id='@("TD_LEVEL")@i' value="@detail.TD_LEVEL" />@detail.TD_LEVEL </td>

        <td> <input type='hidden' name="TD_SB" id='@("TD_SB")@i' value="@detail.TD_SB" />@detail.TD_SB </td>

        <td> <input type='hidden' name="TD_BB" id='@("TD_BB")@i' value="@detail.TD_BB" />@detail.TD_BB </td>


        <td>
            <a asp-action="Edit" asp-route-id="@detail.TD_ROWID">Edit</a> |

            <button onclick="DeleteDetail(@detail.TD_ROWID) "  class="btn btn-primary">Remove</button>

        </td>
    </tr>
        i++;
    }

    //"<td><a id ='myRemove' data-itemId='0'  class='btn btn-primary'>Remove</a ></td> ";
}

【问题讨论】：

首先，删除contentType: "application/json; charset=utf-8",（或使用data: JSON.stringify({ id: pId })）。如果这不能解决错误，您需要向控制器代码显示实际错误是什么（使用浏览器工具 - 网络选项卡 - 检查响应
查看您的 MVC 控制器操作也会很有帮助。它真的被击中了吗？
我已经相应地更新了我的问题，删除操作没有被命中，在收到失败消息后它会在我的控制器中命中编辑操作
您的浏览器控制台有任何错误吗？它是如何击中编辑控制器的？也许我们首先需要看看 DeleteDetail() 是如何被调用的。它是从属于表单一部分的元素调用的吗？
将type="button" 添加到您的<button> 元素（默认情况下它是一个提交按钮）。或者，您可以添加return false; 作为脚本的最后一行。

标签： jquery ajax asp.net-core-mvc

【解决方案1】：

根据我在 cmets 中的建议，我将提供更多信息：

由于您使用的是开箱即用的 MVC Web Api，它是 a RESTful API，因此 the method types 非常重要。

您正在尝试根据 RESTful API 指南执行需要“删除”类型请求的删除操作。 MVC Web Api 将此方法映射到开箱即用的Delete 方法，而不使用[HttpDelete] 属性。

总的来说，只需将 ajax 调用的方法类型更改为“DELETE”：

function DeleteDetail(pId) {
  const con = confirm("are you sure ?");

  if (con === true) {
     $.ajax({
        ...
        type: "DELETE",
        ...
        });
  }
}

【讨论】：