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) — user3559349
– user3559349, Commented Feb 27, 2017 at 9: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 — user3559349
– user3559349, Commented Feb 27, 2017 at 9: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
– Soheil Alizadeh, Commented Feb 27, 2017 at 9: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 for more detail. — user3559349
– user3559349, Commented Feb 27, 2017 at 9:26

Soheil Alizadeh · Accepted Answer · 2017-09-02 12:18:55Z

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 2, 2017 at 12:18

answered Feb 27, 2017 at 11:28

Soheil Alizadeh

3,06611 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Send FormData With ajax to ASP.NET MVC Controller

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related