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

Question

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 ?

I have had similar situations where putting proper content type worked for me — shakib, Oct 30 '16 at 14:14
I doubt I can receive multiple objects , I think Json.Stringfy puts them in one object.. — Hana, Oct 30 '16 at 14:20
I tried to change the content type now I am receiving the second object only :) — Hana, Oct 30 '16 at 14:22
Can you confirm AppSettingsView is not null in client side? Try debugging in browser. If sent, it should bind to the model. — shakib, Oct 30 '16 at 14:26
You need to add the other values to the `FormData` object using `.append()` and the ajax option must be `data: formdata,` (refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681)) although of your element with `id="supportedLanguages"` is inside the form, then its already been added to the `FormData` object anyway. — , Oct 30 '16 at 21:10
@StephenMuecke I used the append function now I can see that the data sent contains 'Content-Disposition: form-data; name="SelectedLanguages" 1,2 ' but when I receive it on the server it becomes empty array — Hana, Oct 31 '16 at 08:47
You need to do its as `formdata.append('SelectedLanguages', 1);` `formdata.append('SelectedLanguages', 2);` — , Oct 31 '16 at 09:05

score 6 · Accepted Answer · answered Nov 02 '16 at 02:00

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

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

1 Answers1

Linked