Unable to pass array of objects to controller using ajax

Question

I am trying to pass array of objects from my view to controller but i am not succeeding in it. Uploaded file is successfully passed from view to controller but array doesn't.

My java script code is like below:

$("#Btn_ConfirmUpload").click(function (e) {

            e.preventDefault();
            debugger;

            var formData = new FormData();
            var uploadeddocument = [];

            var deptid = $("#Drp_DepartmentId").find('option:selected').val();
            var doctypeid = $("#Drp_DocumentTypeVal").find('option:selected').val();
            var doctypename = $("#DocumentTypeText").val();
            var jobid = $("#Txt_JobId").val();
            var files = $("#DocumentUploader").get(0).files[0];

            uploadeddocument.push({

                JobId: jobid,
                Department: deptid,
                DocumentType: doctypename,
                DocTypeId: doctypeid,

            });

            formData.append('UploadedDocument', JSON.stringify(uploadeddocument));

            formData.append('DocumentUploader', files);

            $.ajax({
                url: '@Url.Action("UploadDocument", "Job")',
                type: 'POST',
                dataType: 'json',
                data: formData,
                processData: false,
                contentType: false, 
                success: function (data) {

                }        
            });
        });

My controller code is this:

[HttpPost]
    public ActionResult UploadDocument(JobModel data)
    {
        return View();
    }

My model is this:

public class JobModel
{
    public List<JobDTO> listofallJobs { get; set; }
    public List<TaskDTO> listofallTask { get; set; }
    public TaskDTO[] taskdetail { get; set; }
    public Dictionary<int?, string> tasktypeandaction { get; set; }
    public SelectList DepartmentList { get; set; }

    public DocumentLatestDTO[] DocumentDetails { get; set; }

    public List<DocumentLatestDTO> ListOfDocuments { get; set; }

    public SelectList DocumentTypeList { get; set; }

    public DocumentLatestDTO[] UploadedDocument { get; set; }

    public HttpPostedFileBase[] DocumentUploader { get; set; }
}

Please help. Thanks in advance.

Your using `FormData` and `contentType: false` so you cannot stringify data, or pass arrays. Assuming `DocumentLatestDTO` contains properties `JobId`, `Department` etc, then you need to use `formData.append('UploadedDocument[0].JobId', jobid);`, `formData.append('UploadedDocument[0].Department', deptid);` etc — , Sep 08 '16 at 11:34
Have a look in the Network tab for using the developer tools in your browser. The controller should be able to handle form encoded data or json data, but not a mix of the two — ste-fu, Sep 08 '16 at 11:35
But if you have generated you view correctly based on your model, then you can simply use `var formdata = new FormData($('form').get(0));` to serialize everything inside the form tags including your file inputs — , Sep 08 '16 at 11:36
Thanks a lot @StephenMuecke It's working but i don't understand what you are talking about `var formdata = new FormData($('form').get(0));` — Jitender Singh, Sep 08 '16 at 11:41
As I noted, all you need is `formdata = new FormData($('form').get(0));` which will include everything. You do not need to append anything if you have generated your view correctly - refer [how to append whole set of model to formdata and obtain it in MVC](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Sep 08 '16 at 11:43

score 0 · Answer 1 · answered Sep 08 '16 at 12:14

Change your Controller code as below:

public JsonResult Save()
{
     var formData = Request.Form[0];
     JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
     CenterEntity centerModel = javaScriptSerializer.Deserialize<CenterEntity>(formData);
     ........
 }

Unable to pass array of objects to controller using ajax

1 Answers1