MVC - 多参数 Ajax 调用答案

【问题标题】：MVC - Multiple Parameter Ajax CallMVC - 多参数 Ajax 调用
【发布时间】：2018-11-19 16:12:36
【问题描述】：

我正在尝试使用 ajax 调用从视图向控制器发送 2 个参数。当我只使用 1 个参数时，此功能较早时有效，但由于我添加了第二个参数，它不再有效。

带有ajax的Javascript：

function DeleteRole(roleId) {
    var confirmation = confirm("Are you sure you want Delete this Role");
    if (confirmation) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("Delete_Role", "Admin")',
            dataType: 'json',
            data: JSON.stringify({
                roleId: roleId,
                applicationId: $('#AppList').val()
            })
        }).success(function (response) {
            if (response.success) {
                alert(response.responseText);
                $(".k-grid").data("kendoGrid").dataSource.read();
            }else {
                alert(response.responseText);
            }
        }).error(function() {
            alert("Error on Deletion");
        });
    }
}

MVC - 控制器方法（这里根本没有信息）

   [HttpPost]
    public JsonResult Delete_Role(Guid rowId, Guid applicationId)
    {
        var users = new UserStore().ReadForAppRole(applicationId, rowId);

        if (users.Any())
        {
            return Json(new { success = false, responseText = "Users's Currently Exist Within this Role" },
                JsonRequestBehavior.AllowGet);
        }

        new RoleStore().RemoveRole(applicationId, rowId);

        return Json(new { success = true, responseText = "Role Successfully Deleted" },
            JsonRequestBehavior.AllowGet);
    }

【问题讨论】：

你有一个 rowId vs roleId 变量名需要匹配也不确定如果传递了无效的 guid 会发生什么 - 认为它可能只是作为 null 出现
您是否尝试将最终 URL 更改为虚假位置或控制台使用获取全局帖子记录 ajax 请求？ @Pete 他的评论也很合适 - 参数也可能是一个问题，但我个人会首先尝试找出帖子是否发生然后继续
您正在发送 JSON 字符串，但没有通过内容类型告诉服务器。 OTOH 没有特别需要将其作为 JSON 发送，如果您只是删除 stringify 操作，那么 jQuery 将为您对其进行形式编码，MVC 阅读它应该没有任何问题。
不应该删除使用[HttpDelete]？

标签： javascript ajax asp.net-mvc

【解决方案1】：

两个问题

1) 你的action方法参数名是rowId，但是你发送的是roleId

2) JSON.stringify 方法创建您传递给它的 JavaScript 对象的字符串表示形式。使用此方法，您将发送对象的 JSON 字符串作为 $.ajax 方法选项的 data 属性。发送 JS 对象的 JSON 字符串时，应将选项的contentType 属性指定为application/json。

$.ajax({
    type: "POST",
    url: '@Url.Action("Delete_Role", "Admin")',
    dataType: 'json',
    data: JSON.stringify({
        rowId: '@Guid.NewGuid()', // dummy GUID for testing
        applicationId: '@Guid.NewGuid()'
    }),
    contentType:"application/json"
}).done(function (response) {
    console.log(response);
}).fail(function() {
    console.log("Error on Deletion");
});

现在$.ajax 会将请求标头Content-Type 添加到值为application/json 的调用中。作为模型绑定的一部分，默认模型绑定器将读取此请求标头值，然后决定从请求正文（请求有效负载）中读取数据。

此外，由于您没有发送复杂对象，因此您不需要发送 JSON 字符串版本。只需将 JavaScript 对象作为 data 属性传递，$.ajax 就会将其作为表单数据发送。

$.ajax({
    type: "POST",
    url: '@Url.Action("Delete_Role", "Admin")',
    data: {
        rowId: '@Guid.NewGuid()',  // dummy GUID for testing
        applicationId: '@Guid.NewGuid()'
    }
}).done(function (response) {
    console.log(response);
}).fail(function() {
    console.log("Error on Deletion");
});

在这种情况下，$.ajax 将发送 application/x-www-form-urlencoded 作为 Content-Type 请求标头值，模型绑定器将能够正确读取它并将其映射到您的参数。

您还可以删除 ajax 调用中的dataType（我在第二个代码 sn-p 中所做的）。 jQuery ajax 将从响应头中猜测正确的类型，并使用它来进一步解析从服务器调用接收到的数据。在您的情况下，您正在调用 Json 方法以从您的操作方法返回 JSON 响应，这会将 application/json 作为 Content-Type 标头值发送。

【讨论】：