Hana Hana - 1 month ago 14
Ajax Question

How to send Array with the formdata in ajax request to mvc action

I was trying to send array with the form data to an action with Ajax request but whenever I do I receive both the form data and the array empty

$scope.SubmitForm = function () {
var sLangs = $("#supportedLanguages").data("kendoMultiSelect").value();

var formdata = new FormData($('#frmAppSettings').get(0));

alert(formdata.SelectedLanguages);

var data = new FormData(document.getElementById("frmAppSettings"));
$.ajax({
type: "POST",
url: "/AppMenuMaker/AppSettings",
data: JSON.stringify({ AppSettingsView: formdata, SelectedLangs: sLangs }),
processData: false,
contentType: false,
success: function () {

}
});
}`


I have my action as following

[HttpPost]
[Authorize]
public ActionResult AppSettings( ApplicationSettingsViewModel AppSettingsView, int[] SelectedLangs)
{

}


Any help ?

Answer

FormData is a set of name/value pairs representing form controls and their values, and is sent as multipart/form-data, You cannot stringify() it and/or send it with separate objects. You need to append name/value pairs to it.

If the element with id="supportedLanguages" is inside the form with id="frmAppSettings", then your code

var formdata = new FormData($('#frmAppSettings').get(0));

will correctly add the values of the <select> to the FormData object. If not, then you need to append each value in the array, for example

var formdata = new FormData($('#frmAppSettings').get(0));
$.each($("#supportedLanguages").val(), function(index, item) {
    formdata .append('SelectedLangs', item);
});

and then the ajax options need to be

$.ajax({
    type: "POST",
    url: '@Url.Action("AppSettings", "AppMenuMaker")', // use @Url.Action() to generate your url's
    data: formdata,
    processData: false,
    contentType: false,
    success: function () {
    }
});
Comments