Ajax js modificación para ajax Asp .net mvc

Muchos programadores novatos de C # ASP .NET MVC (en lo sucesivo denominados mvc) se enfrentan a la tarea de enviar datos utilizando Ajax. Pero en la práctica esta tarea no es tan fácil.

En mi trabajo, trato de cumplir con ciertos principios de desarrollo de software. Una de ellas es minimizar la escritura de código y la creación de clases y funciones universales. Fue este principio el que sugirió el uso de jquery.unobtrusive-ajax.js y la clase Ajax para mvc .

En este artículo, estamos directamente interesados ​​en Ajax.BeginForm.

Un ejemplo:

@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> } 

Ante el hecho de que Ajax.BeginForm no pasa la entrada [type = file], realicé una búsqueda global para encontrar una solución a este problema. El antiguo stackoverflow favorito en cada solución ofrecía lo mismo. No use Ajax.BeginForm, use FormData, cree un controlador php e incluso más nubes de consejos para aumentar el código del programa.

Como dije antes, en mis productos me adhiero a los principios y como no se encontró la respuesta que satisfaría mis requisitos, tuve que hacer todo por mí mismo.

Lo primero que se requería era determinar qué función en jquery.unobtrusive-ajax.js es responsable de generar datos.

 $(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()) }); }); 

Estamos interesados ​​en la función $ (this) .serializeArray () . En la variable $ (this), nuestro formulario <form /> entra y luego se implementa en una matriz. Al probarlo en la consola, así como su serialización analógica (), se determinó que estas funciones no cargan archivos en principio. De ahí la decisión de reescribirlo.

Pero primero debe resolver el problema con la descarga del archivo, para esto usamos la clase 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 poco sobre el código.

Primero, vinculamos el evento de cambio de entrada, la elección recayó en "cambio".

Luego verifique si el archivo está seleccionado.

Si se selecciona el archivo, comenzamos a descargarlo. El problema era que los datos debían almacenarse en algún lugar, en el ejemplo escribiremos los datos en el atributo del objeto mismo.

Bloquee el botón de confirmación hasta que se descargue el archivo.

En caso de error, escriba esto en la consola. Esta no es la versión final de la función, todos pueden actualizarla para satisfacer sus necesidades.

Después de crear la carga de los datos del archivo, procedemos a la modernización de la serialización.

 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; } 

Y usamos esta función en la función principal.

 $(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()) }); }); 

Una vez completado, debe agregar un procesador y un analizador de datos. A toda prisa, se ve algo así.

Manejador

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

Ayudante

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

Analizador

 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); } 

Felicidades Ahora puede cargar archivos usando Ajax estándar para mvc.