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

Question

I'm trying to pass an array of checkbox values from an Ajax form in MVC to a controller action. Here's my code:

The form (in a modal):

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

}

Some jQuery that gets an array of checkbox values:

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());

and the function I'm using to submit:

$("#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");
        }
        });
    });

and then the controller signature:

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

It works fine if I pass in a single value but if I pass in multiple values the controller just gets 'null'. Think I'm missing something simple here. Thanks in advance.

Answer 1

I would suggest not changing default option values unless you need. Create you parameters as a JSON object and pass it to $.ajax .

From jQuery API for AJAX

processData (default: true)

Type: Boolean

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

Setting this value to false will cause problems when attempting to pass more than one value to the action unless you do the processing within the controller function.

 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"); } });

Answer 2

Please try this:

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

The format is: index:value

Answer 3

Since you are not passing class but array so your data string should be like:

   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"
      ],

Also try adding FromBody in ActionMethod like:

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