locked
how to append list of data to formdata and pass to the controller in mvc RRS feed

  • Question

  • User140010582 posted

    I have list like: 

    var orderItems = [];
    the orderItems list contains following data:
    0:{DebitAcHead:"323",Amount:32,Description:"des"}
    1:{DebitAcHead:"fd",Amount:33,Description:"df"}

    and form data as:  

      var model = new FormData();
    

    I want to append list of orderItems data to model FormData how can I get this?

    I have write following code but it is giving me null:

                  
       model.append('proposedExpensVms',orderItems);
                    

    'proposedExpensVms' is collection what I want to get through parameter:

            public  ICollection<ProposedExpensVm> proposedExpensVms { get; set; }
    

    Sunday, June 7, 2020 4:38 PM

Answers

  • User-474980206 posted

    FormData only supports name/value pairs (and files). You must name items according to MVC binding rules. you just need to add the property prefix and index it  similar to sample given you.

              for (var i = 0; i < orderItems.length;i++) {
                    model.append("proposedExpensVms[" + i + "].DebitAcHead", orderItems[i].DebitAcHead);
                    model.append("proposedExpensVms[" + i + "].Amount", orderItems[i].Amount);
                    model.append("proposedExpensVms[" + i + "].Description", orderItems[i].Description);
                }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 8, 2020 2:52 PM

All replies

  • User1686398519 posted

    Hi,  sandesh pokhrel

    I made an example according to your needs, please refer to it.

    Model

        public class ProposedExpensVm
        {
            public string DebitAcHead { get; set; }
            public int Amount { get; set; }
            public string Description { get; set; }
        }
        public class Test
        {
            public ICollection<ProposedExpensVm> proposedExpensVms { get; set; }
        }

    Controller

            public ActionResult formdataTest()
            {
                return View();
            }
            [HttpPost]
            public ActionResult formdataTest(FormCollection formCollection)
            {
                Test test = new Test();
                test.proposedExpensVms = new List<ProposedExpensVm>();
                for (int i = 0; i < formCollection.Count/3; i++)
                {
                    ProposedExpensVm p = new ProposedExpensVm();
                    p.Amount = Int32.Parse(formCollection["Amount[" + i + "]"]);
                    p.DebitAcHead = formCollection["DebitAcHead[" + i + "]"];
                    p.Description = formCollection["Description[" + i + "]"];
                    test.proposedExpensVms.Add(p);
                }
                return Json(test.proposedExpensVms, JsonRequestBehavior.AllowGet);
            }

    formdataTest

    <button>SUBMIT</button>
    @section scripts{
        <script>
            $("button").click(function () {
                var orderItems = [{ DebitAcHead: "323", Amount: 32, Description: "des" },
                    { DebitAcHead: "fd", Amount: 33, Description: "df" }];
                var model = new FormData();
                for (var i = 0; i < orderItems.length;i++) {
                    model.append("DebitAcHead[" + i + "]", orderItems[i].DebitAcHead);
                    model.append("Amount[" + i + "]", orderItems[i].Amount);
                    model.append("Description[" + i + "]", orderItems[i].Description);
                }
                $.ajax({
                    url: "/Home/formdataTest",
                    type: 'POST',
                    data: model,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        console.log(data);
                    }
                });
    
            });
        </script>
    } 

    Here is the result.

     
    Best Regards,

    YihuiSun

    Monday, June 8, 2020 8:53 AM
  • User140010582 posted

    Hello YihuiSum ,

    Thank you for your reply In FormData I am not only sending orderItems I am also sending following flowing data also file.

     var model = new FormData();          
     model.append('MemoDate', $("#memodate").val());
     model.append('MemoType', $("#memotype").val());
     model.append('Month', $("#month").val());
     model.append('FiscalYear', $("#fiscalyear").val());
    var totalFiles = document.getElementById("fileattachment").files.length;
    for (var i = 0; i < totalFiles; i++) {
    var file = document.getElementById("fileattachment").files[i];
     model.append("httpPostedFileBases", file);
    }
    
    

    I am also sending collection of ProposedExpensVm  like:

                 
     model.append("proposedExpensVms", orderItems);
                   

    and ajax request goes like:

                     $.ajax({                    
                        type: 'POST',
                        url: '/ExpenditureReq/save',
                        data: model,
                        dataType: 'json',
                        contentType: false,
                        processData: false,

    In controller I am receiving like:

            [HttpPost]
            public JsonResult save(ExpenditureRequestVm vm)
            {

    In ExpenditureRequestVm I have :

        public class ExpenditureRequestVm
        {
            public string MemoCode { get; set; }
            public string BranchCode { get; set; }
            public Nullable<System.DateTime> MemoDate { get; set; }
            public string MemoType { get; set; }
            public Nullable<int> Month { get; set; }
            public string FiscalYear { get; set; }
            public string MemoSubject { get; set; }
            public Nullable<decimal> Amount { get; set; }
            public Nullable<int> AccountHead { get; set; }
            public string MemoDetails { get; set; }
            public string Justification { get; set; }
            public string CreatedBy { get; set; }
            public Nullable<System.DateTime> CreatedDate { get; set; }
            public Nullable<int> Status { get; set; }
            public string AccountNumber { get; set; }
            public Nullable<int> StepNo { get; set; }
            public Nullable<int> FlowId { get; set; }
            public IEnumerable<HttpPostedFileBase> httpPostedFileBases { get; set; }
            public  ICollection<ProposedExpensVm> proposedExpensVms { get; set; }
        }
    

    I have received all data I am not unable to receive only proposedExpensVms  list data:- by using above code I can able to receive data but what about files

    -thanks you

    Monday, June 8, 2020 9:48 AM
  • User-474980206 posted

    FormData only supports name/value pairs (and files). You must name items according to MVC binding rules. you just need to add the property prefix and index it  similar to sample given you.

              for (var i = 0; i < orderItems.length;i++) {
                    model.append("proposedExpensVms[" + i + "].DebitAcHead", orderItems[i].DebitAcHead);
                    model.append("proposedExpensVms[" + i + "].Amount", orderItems[i].Amount);
                    model.append("proposedExpensVms[" + i + "].Description", orderItems[i].Description);
                }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 8, 2020 2:52 PM
  • User140010582 posted

    thanks bruce it works. you guys are awesome.

    Monday, June 8, 2020 3:13 PM