Send FormData With ajax to ASP.NET MVC Controller

Question

I Try to send FormData() to ASP.NET MVC Controller but same data is null.ExternalProjects, CertificateUniverSitys,...

$('#Controller').on('click', '#SaveProfile', function() {
  debugger;

  var CertificateInstitutions = JSON.parse(localStorage.getItem("CertificateInstitutionsListLocal"));
  var CertificateUniverSitys = JSON.parse(localStorage.getItem("CertificateUniverSitysListLocal"));
  var ExternalProjects = JSON.parse(localStorage.getItem("ExProjectListLocal"));

  var soical = {
    GithubId: $('#GithubId').val(),
    StackowerflowId: $('#StackowerflowId').val(),
    TweiterId: $('#TweiterId').val()
  }

  var SkillList = $('select.tagit-hiddenSelect :selected').map(function() {
    return this.value;
  }).get();

  var form = $('#CreateProfileForm');
  var token = $('input[name="__RequestVerificationToken"]', form).val();
  var file_data = $("#Image").prop("files")[0];
  var fd = new FormData();

  fd.append("isFirst", true);
  fd.append("token", token);
  fd.append("image", file_data);
  fd.append("soical", soical);
  fd.append("SkillList", SkillList);
  fd.append("ExternalProjects", ExternalProjects);
  fd.append("CertificateUniverSitys", CertificateUniverSitys);
  fd.append("CertificateInstitutions", CertificateInstitutions);

  $.ajax({
    url: '@postUrl',
    method: "POST",
    contentType: false,
    processData: false,
    data: fd
  });
});

public virtual async Task<ActionResult> CreatePrfile(CreateFreelancerProfileViewModel viewModel, bool isFirst, HttpPostedFileBase image)

    public class CreateFreelancerProfileViewModel : BaseViewModel
    {


    #region Collocations


    public ExternalProjectViewModel[] ExternalProjects { get; set; }

    public CertificateUniverSityViewModel[] CertificateUniverSitys { get; set; }

    public CertificateInstitutionsViewModel[] CertificateInstitutions { get; set; }

    public SoicalViewModel Soical { get; set; }

    #endregion

    }

You cannot `.append()` objects to `FormData` - you need to append each property separately (and you have not shown your model so we don't even know what your trying to bind to) — , Feb 27 '17 at 09:06
Then you need `fd.append("soical.GithubId", $('#GithubId').val());` etc and for the collection properties, they need indexers - `fd.append("ExternalProjects[0].somePropertyName", someValue);` etc — , Feb 27 '17 at 09:15
if use `fd.append("ExternalProjects[0].somePropertyName", someValue);` my code be larg, you have not better way to do this? thanks @StephenMuecke. — Soheil Alizadeh, Feb 27 '17 at 09:23
There is no other way - but is really hard to understand what your doing here. First is you have generated you view correctly using the strongly typed `HtmlHelper` methods, then its simply `var formdata = new FormData($('form').get(0));` to serialize all your inputs (refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) for more detail. — , Feb 27 '17 at 09:26
But why are you adding values from `localStorage` - what are they are why are they there? — , Feb 27 '17 at 09:26
@StephenMuecke I For create wizard register(step to step) form and send list of `ExternalProjects` use `localStorage`, i do not use cookie and session for do this. — Soheil Alizadeh, Feb 27 '17 at 09:31
if your function parameter is not FormCollection or form-data, and you are using a ViewModel, its better to create an object in JS instead of a formdata object and push items into the object and post it! The object should resemble the viewmodel! — Prashanth Benny, Feb 27 '17 at 09:48
@SoheilAlizadeh - You must use `FormData` if you posting a file. — , Feb 27 '17 at 09:58
@StephenMuecke yes I want post file with other data.problem is post lists. — Soheil Alizadeh, Feb 27 '17 at 10:00
You just need to generate the name values correctly as per my 2nd comment. — , Feb 27 '17 at 10:01

Soheil Alizadeh · Accepted Answer · 2017-09-02T12:18:55.830

3

Add ExternalProjects with for loop :

 var fd = new FormData();

 for (var i = 0; i < ExternalProjects.length ; i++) 
     {
        fd.append("ExternalProjects["+i+"].Name",ExternalProjects[i].Name);
        fd.append("ExternalProjects["+i+"].Body",ExternalProjects[i].Body);
        fd.append("ExternalProjects["+i+"].Url",ExternalProjects[i].Url);
     }

edited Sep 02 '17 at 12:18

answered Feb 27 '17 at 11:28

Soheil Alizadeh

2,936
11
29
56

Send FormData With ajax to ASP.NET MVC Controller

1 Answers1