Comment envoyer un fichier téléchargé via HttpPostedFileBase avec un ViewModel?

J’ai un énorme object de données dans lequel devrait mapper un modèle de vue via le paramètre du contrôleur. J’ai également une liste de fichiers (photos) que j’ai besoin de capturer dans un tableau dans l’object de données susmentionné.

Mon modele:

public class TestPerson { public int Id { get; set; } public ssortingng Name { get; set; } public ssortingng Place { get; set; } public int Age { get; set; } public byte[] File { get; set; } //[FileSize(10240)] //[FileTypes("jpg,jpeg,png")] //public HttpPostedFileBase File { get; set; } }

Ma méthode de contrôleur:

  public void SavePersonData(HttpPostedFileBase personPhoto, TestPerson person) { var dataObject = Request.Form["person"]; var serializer = new JavaScriptSerializer(); TestPerson personReport = serializer.DeserializeObject(dataObject, typeOf(TestPerson)); System.Console.WriteLine("dummy line"); }

Ma page .cshtml:

     Name:  Place: 
 Age: 
  
    
  $(document).ready(function () { $(document).ready(function () { var element = document.getElementById("testKo"); ko.applyBindings(viewModel, element); $("#submitForm").on("click", function () { var vmData = ko.toJSON(viewModel); //$("#personId").val({ person: vmData }); var formData = new FormData($("#photoForm")[0]); formData.append("person", vmData, "person"); //var data = new FormData(); //data.append("vmData", vmData); //data.append("photo", $("#personPhoto").get(0).files[0]) $.ajax({ type: "POST", url: '@Url.Action("SavePersonData", "Home")', //cache: false, //async: false, contentType: false, processData: false, enctype: "multipart/form-data", dataType: "json", //data: { // testPerson: vmData //}, //data: { // personPhoto: formData, // person: vmData //}, data: formData, success: function (data) { alert("success!"); } }); }); }); function generatedViewModel() { var self = this; self.Id = ko.observable("1"); self.Name = ko.observable(); self.Place = ko.observable(); self.Age = ko.observable(); self.File = ko.observable(); } var viewModel = new generatedViewModel(); });

Existe-t-il un moyen de recevoir les deux parameters dans la méthode d’action de mon contrôleur avec ce code? Ou dois-je le modifier de quelque manière que ce soit? J’ai juste besoin d’envoyer tout le contenu, y compris les données de téléchargement de fichier / image et l’object de données non-formulaire à ma méthode de contrôleur.

Toute aide serait grandement appréciée !.

Eh bien, la meilleure solution serait de faire 2 appels ajax synchronisés l’un dans l’autre. Envoyez d’abord les données “personPhoto”, puis convertissez-les en tableau d’octets et définissez-les comme variable de session. Dans l’événement success de cet appel ajax, effectuez un autre appel ajax à la méthode main, dans laquelle vous traitez les données de formulaire / modèle et utilisez Objet de session mis en cache pour “personPhoto”.

Remplacez votre code ajax par le suivant:

  var data = new FormData($("#photoForm").get(0)); $.ajax({ type: "POST", url: '@Url.Action("CacheUploads", "Home")', data: data, processData: false, contentType: false, dataType: "json", success: function () { var vmData = ko.toJS(viewModel); $.ajax({ type: "POST", url: '@Url.Action("SavePersonData", "Home")', data: { person: vmData }, success: function (data) { } }); } });

Et remplacez vos méthodes de contrôleur par les suivantes:

  public void SavePersonData(TestPerson person) { // You no longer need to deserialize as you'll have data properly mapped to the TestPerson object. //var dataObject = Request.Form["person"]; //var serializer = new JavaScriptSerializer(); //object personReport = serializer.DeserializeObject(dataObject); person.File = (byte[])Session["UploadedPhoto"]; System.Console.WriteLine("dummy line"); } public JsonResult CacheUploads(HttpPostedFileBase personPhoto) { byte[] photoAsBytes = null; using (var binaryReader = new BinaryReader(personPhoto.InputStream)) { photoAsBytes = binaryReader.ReadBytes(personPhoto.ContentLength); } Session.Add("UploadedPhoto", photoAsBytes); return Json(new { success = true }, JsonRequestBehavior.AllowGet); }

Il n’ya pas d’autre moyen de gérer ensemble les données FormData et ViewModel hors formulaire dans un seul appel ajax. C’est ce que je peux obtenir de plus près du sharepoint vue de la solution Bonne chance!.

utilisez ceci.

 @using (Html.BeginForm("Action", "Controller", System.Web.Mvc.FormMethod.Post, new { @id = "formid", enctype = "multipart/form-data" })) { @Html.AntiForgeryToken()    }