jQuery AJAX 调用控制器动作传递值数组答案

【问题标题】：jQuery AJAX call to Controller action passing array of valuesjQuery AJAX 调用控制器动作传递值数组
【发布时间】：2018-09-26 18:28:58
【问题描述】：

我正在尝试将一组复选框值从 MVC 中的 Ajax 表单传递到控制器操作。这是我的代码：

形式（模态）：

@using (Ajax.BeginForm("GetPrintableProject", "Project", null, new AjaxOptions { HttpMethod = "POST"}, new { @id = "PrintProjectFormId"))
 {
 <input type="hidden" name="projectId" id="projectId" value="">

}

一些获取复选框值数组的 jQuery：

selectedProjects = projectsGrid.$('input[type="checkbox"]').serializeArray();

var projects = [];

$(selectedProjects).each(function (i, field) {
    projects.push(field.value);
});
//the hidden field in a modal I'm using
$('#projectId').val(projects.toString());

以及我用来提交的函数：

$("#PrintProjectFormId").submit(function (event) {

event.preventDefault();
event.stopImmediatePropagation();

var action = $("#PrintProjectFormId").attr("action");
var dataString = new FormData($("#PrintProjectFormId").get(0));

$.ajax({
   type: "POST",
   url: action,
   data: dataString,
   dataType: "json",
   contentType: false,
   processData: false,
   success: function (result) {
            //stuff I'll get to later
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("There was a problem retrieving this project");
        }
        });
    });

然后是控制器签名：

[HttpPost]
public JsonResult GetPrintableProject(Guid[] projectId)

如果我传入一个值，它工作正常，但如果我传入多个值，控制器只会得到“空”。认为我在这里遗漏了一些简单的东西。提前致谢。

【问题讨论】：

除非你有特定的理由覆盖dataType contentType 或processData 的默认值（你似乎没有这样做）我建议你保留它们的默认值。

标签： javascript jquery ajax model-view-controller

【解决方案1】：

除非您需要，否则我建议不要更改默认选项值。将参数创建为JSON 对象并将其传递给$.ajax。

来自jQuery API for AJAX

processData（默认：true）

类型：布尔值

默认情况下，作为对象（从技术上讲，除了字符串之外的任何内容）传入 data 选项的数据将被处理并转换为查询字符串，适合默认的内容类型“application/x-www-form -urlencoded”。如果要发送 DOMDocument 或其他未处理的数据，请将此选项设置为 false。

将此值设置为 false 会在尝试将多个值传递给操作时导致问题，除非您在控制器函数中进行处理。

var action = $("#PrintProjectFormId").attr("action");

//fill projects array

$.ajax({
  type: "POST",
  url: action,
  data: {
    projectId: $("#PrintProjectFormId").val(),
    "projects": projects
  },
  success: function(result) {
    //stuff I'll get to later
  },
  error: function(jqXHR, textStatus, errorThrown) {
    alert("There was a problem retrieving this project");
  }
});

【讨论】：

这似乎是朝着正确方向迈出的一步。控制器实际上得到了一些东西，但它只是一个空 guid 00000-000000-00000-00000
这让我到了那里：数据：{ projectId：项目}，谢谢！

【解决方案2】：

请试试这个：

 type: "POST",
   url: action, 
   data: {dataString:dataString, dataString1:dataString2, dataString2:dataString2},

格式为：索引：值

【讨论】：

传入数据：{ dataString: dataString }，控制器仍然看到null。

【解决方案3】：

由于你不是传递类而是数组，所以你的数据字符串应该是这样的：

   type: "POST",
   url: action, 
   data:
      [
        "6ccf7071-9b73-4e61-8736-58a842c131d0",
        "9e6c2748-18b5-4a53-a306-eb539c8b7dee",
        "5aa8901a-2c03-42d3-bf06-89f66e3797a4",
        "da5556bf-32aa-4f41-a64a-6e95fa2595c1"
      ],

还可以尝试在 ActionMethod 中添加 FromBody，例如：

[HttpPost]
public JsonResult GetPrintableProject([FromBody]Guid[] projectId)

【讨论】：