Modification d'Ajax js pour ajax Asp .net mvc

De nombreux programmeurs novices C # ASP .NET MVC (appelés ci-après mvc) sont confrontés à la tâche d'envoi de données à l'aide d'Ajax. Mais dans la pratique, cette tâche n'est pas si facile.

Dans mon travail, j'essaie d'adhérer à certains principes du développement logiciel. L'un d'eux est de minimiser l'écriture de code et la création de classes et de fonctions universelles. C'est ce principe qui a suggéré l'utilisation de jquery.unobtrusive-ajax.js et de la classe Ajax pour mvc .

Dans cet article, nous nous intéressons directement à Ajax.BeginForm.

Un exemple:

@using (Ajax.BeginForm("UploadAvatarImage", "Dashboard", null, new AjaxOptions {HttpMethod = "POST", OnSuccess = "UpdateAvatars()", OnFailure = "document.refresh()" }, new {Id = "UploadAvatartForm", enctype = "multipart/form-data" })) { <div class="input-group pt-1 pl-1"> <input type="file" name="avatarFile" class="form-control" id="fileUploaderControl" accept=".jpg"/> </div> <button class="btn btn-sm btn-primary btn-block m-1" type="submit" ></button> } 

Face au fait que Ajax.BeginForm ne passe pas d'entrée [type = fichier], j'ai effectué une recherche globale pour trouver une solution à ce problème. L'ancien stackoverflow préféré sur chaque solution offrait la même chose. N'utilisez pas Ajax.BeginForm, utilisez FormData, créez un gestionnaire php et encore plus de nuages ​​de conseils pour augmenter le code du programme.

Comme je l'ai dit plus tôt, dans mes produits j'adhère aux principes et comme la réponse qui satisferait mes exigences n'a pas été trouvée, j'ai dû tout faire moi-même.

La première chose qui a été nécessaire était de déterminer quelle fonction dans jquery.unobtrusive-ajax.js est responsable de la génération de données.

 $(document).on("submit", "form[data-ajax=true]", function (evt) { var clickInfo = $(this).data(data_click) || [], clickTarget = $(this).data(data_target), isCancel = clickTarget && (clickTarget.hasClass("cancel") || clickTarget.attr('formnovalidate') !== undefined); evt.preventDefault(); if (!isCancel && !validate(this)) { return; } asyncRequest(this, { url: this.action, type: this.method || "GET", //     data: clickInfo.concat($(this).serializeArray()) }); }); 

Nous nous intéressons à la fonction $ (this) .serializeArray () . Dans la variable $ (this), notre formulaire <form /> entre, puis il est implémenté dans un tableau. En le testant dans la console, ainsi que son serialize analogique (), il a été déterminé que ces fonctions ne chargent pas de fichiers en principe. D'où la décision de le réécrire.

Mais vous devez d'abord résoudre le problème de téléchargement du fichier, pour cela, nous utilisons la classe FileReader .

 $(document).on("change", "form[data-ajax=true] input[type=file]", function (evt) { var form = $($(evt.target).parents("form")[0]); if (evt.target.files.length > 0) { var fileObj = evt.target.files[0]; var reader = new FileReader(); reader.onload = function () { evt.target.setAttribute("data-ajax-image-data", reader.result); form.find("button[type=submit]")[0].classList.remove("disabled"); } reader.onerror = function () { console.log("Error while loading"); form.find("button[type=submit]")[0].classList.remove("disabled"); } form.find("button[type=submit]")[0].classList.add("disabled"); reader.readAsDataURL(fileObj); } }); 

Un peu sur le code.

Tout d'abord, nous lions l'événement de changement d'entrée, le choix s'est porté sur «changement».

Vérifiez ensuite si le fichier est sélectionné.

Si le fichier est sélectionné, nous commençons à le télécharger. Le problème était que les données devaient être stockées quelque part, dans l'exemple, nous allons écrire les données dans l'attribut de l'objet lui-même.

Verrouillez le bouton de confirmation jusqu'à ce que le fichier soit téléchargé.

En cas d'erreur, écrivez ceci sur la console. Ce n'est pas la version finale de la fonction, tout le monde peut la mettre à jour pour l'adapter à ses besoins.

Après avoir créé le chargement des données du fichier, nous procédons à la modernisation de la sérialisation.

 function selfFormSerializeArray(form) { var array = form.serializeArray(); for (var i = 0; i < form[0].length; i++) { if (form[0][i].type === "file") { var fileObj = form[0][i]; var data = fileObj.getAttribute("data-ajax-image-data") || ""; if (data !== "") { array.push({ name: fileObj.name, value: data }); // console.log("SUCCESS"); } else { //console.log("ERROR"); } } } return array; } 

Et nous utilisons cette fonction dans la fonction principale.

 $(document).on("submit", "form[data-ajax=true]", function (evt) { var clickInfo = $(this).data(data_click) || [], clickTarget = $(this).data(data_target), isCancel = clickTarget && (clickTarget.hasClass("cancel") || clickTarget.attr('formnovalidate') !== undefined); evt.preventDefault(); if (!isCancel && !validate(this)) { return; } asyncRequest(this, { url: this.action, type: this.method || "GET", data: clickInfo.concat(selfFormSerializeArray($(this))) // clickInfo.concat($(this).serializeArray()) }); }); 

Une fois terminé, vous devez ajouter un processeur et un analyseur de données. Pressé, cela ressemble à quelque chose comme ça.

Gestionnaire

 public PartialViewResult UploadAvatarImage() { if (!ImageHelper.LoadAvatarImage(this.Request.Form["avatarFile"])) { return null; } return PartialView("Null"); } 

Aide

 public static bool LoadAvatarImage(string data) { try { var file = AjaxFile.Create(data); return true; } catch (Exception ex) { return false; } 

Analyseur

 public AjaxFile(string data) { var infos = data.Split(','); this.Type = infos[0].Split(';')[0].Split(':')[1].Split('/')[1]; this.Source = Convert.FromBase64String(infos[1]); ; } public static AjaxFile Create(string data) { return new AjaxFile(data); } 

Félicitations! Vous pouvez maintenant télécharger des fichiers en utilisant Ajax standard pour mvc.