How to Append Whole Set of Model to Formdata and Obtain It in MVC

How to append whole set of model to formdata and obtain it in MVC

If your view is based on a model and you have generated the controls inside <form> tags, then you can serialize the model to FormData using

var formdata = new FormData($('form').get(0));

This will also include any files generated with <input type="file" name="myImage" .../>

and post it back using

$.ajax({
  url: '@Url.Action("YourActionName", "YourControllerName")',
  type: 'POST',
  data: formdata,
  processData: false,
  contentType: false,         
});

and in your controller

[HttpPost]
public ActionResult YourActionName(YourModelType model)
{
}

or (if your model does not include a property for HttpPostedFileBase)

[HttpPost]
public ActionResult YourActionName(YourModelType model, HttpPostedFileBase myImage)
{
}

If you want to add additional information that is not in the form, then you can append it using

formdata.append('someProperty', 'SomeValue');

Ajax FormData append list object

Because Folder is a collection of objects, you have to add each one of them with an index.

var index = 0;
for(var pair of folderss){
    var folder = pair[key];
    formData.append("Folders[" + index + "].Id", folder.Id);
    index++;
}

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

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 additional data in FormData to web api

You can use Same like

 data.append("file1" + x, files[x]);

Ex:

 formdata.append('Key', 'Value');

To fetch the data

[HttpPost]
public async Task<JsonResult> saveEvaluationFile(FileModel model)
{
  foreach (string image in model.images)
  {
     HttpPostedFileBase hpf =  model.images[image ] as HttpPostedFileBase;
    // nesasary save part
  }

add file to Model

 public class FileModel
 {
 ...
 public HttpPostedFileBase File1 { get; set; }//one file
 public IEnumerable<HttpPostedFileBase> images {get;set;}//file collection
 }

---

Related Topics