如何在 Asp.net MVC 中使用 Ajax 命中控制器动作？

Question

在这里，我试图在 AJAX 调用上单击按钮删除数据。 但问题是，即使操作的参数，即来自 ajax 的 id 具有值，单击按钮时也不会点击控制器操作。
下面是我的 AJAX

<script>
 $(document).ready(function () {
    $("button#btnDeleteContestant").click(function () {
        debugger;
        var contstantId = $("#contestantId").val();
        var parameter = { id: contstantId };

        $.ajax({
            url: "/Contestant/DeleteConfirm",
            type: "POST",
            dataType: "html",
            data: parameter,
            success: function (data) {
                debugger;
                $("div.modal-content").empty();
                $("div.modal-content").html(data);
                $("#myModal").modal();

            }
        });
    });
});
</script>

以下是我在控制器中的操作

  [HttpPost]
    public ActionResult DeleteConfirm(int id)
    {
        try
        {
            _contestantService.Delete(id);
            return RedirectToAction("Index");
        }
        catch
        {
            return View();
        }
    }

Answer 1

我在这里看到的唯一问题是 url 可能不正确，所以你可以做的是利用Url.Action方法来为控制器操作方法生成正确的 url：

url: "@Url.Action("DeleteConfirm","Contestant")"

希望对你有效。

Answer 2

有很多事情可能与您现在拥有的方式有关。 我建议你使用 $.post 因为它假设了一些你必须自己指定的东西。 所以我建议这样做：

$("button#btnDeleteContestant").click(function () {
    var contstantId = $("#contestantId").val();
    $.post('@Url.Action("DeleteConfirm","Contestant")', { id: contstantId }, function(data){
        // success handler code here...
    });
});

$.post 确保您在使用 $.ajax 时必须明确说明您正在执行的表单发布。 确保您的控制器操作使用 HttpPost 属性进行修饰。 还要确保操作的参数名称是“id”以匹配您在 JSON 对象中的内容。 如果您的代码已经在 razor 视图中，您应该使用 @Url.Action 帮助器为您的按钮单击构建 url。

如果它仍然不起作用，请使用浏览器的 Web 工具来验证单击是否确实发出了请求，然后查看它发出的请求以及您收到的响应类型（如果有）。

如果你想坚持使用 $.ajax 那么我认为你还需要将内容类型指定为 'application/json; charset=utf-8' 并将您的 json 字符串化：

$.ajax({
    url: '@Url.Action("DeleteConfirm","Contestant")',
    type: "POST",
        dataType: "html",
        data: JSON.stringify(parameter),
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            debugger;
            $("div.modal-content").empty();
            $("div.modal-content").html(data);
            $("#myModal").modal();
        }
    });