Ajax js Modifikation für Ajax Asp .net mvc

Viele unerfahrene C # ASP .NET MVC-Programmierer (im Folgenden als mvc bezeichnet) stehen vor der Aufgabe, Daten mit Ajax zu senden. In der Praxis ist diese Aufgabe jedoch nicht so einfach.

Bei meiner Arbeit versuche ich, bestimmte Prinzipien der Softwareentwicklung einzuhalten. Eine davon besteht darin, das Schreiben von Code und die Erstellung universeller Klassen und Funktionen zu minimieren. Dieses Prinzip schlug die Verwendung von jquery.unobtrusive-ajax.js und der Ajax-Klasse für mvc vor .

In diesem Artikel interessieren wir uns direkt für Ajax.BeginForm.

Ein Beispiel:

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

Angesichts der Tatsache, dass Ajax.BeginForm keine Eingabe [type = file] übergibt, führte ich eine globale Suche durch, um eine Lösung für dieses Problem zu finden. Der alte bevorzugte Stackoverflow für jede Lösung bot dasselbe. Verwenden Sie nicht Ajax.BeginForm, verwenden Sie FormData, erstellen Sie einen PHP-Handler und noch mehr Wolken von Tipps, um den Programmcode zu erhöhen.

Wie ich bereits sagte, halte ich mich bei meinen Produkten an die Grundsätze, und da die Antwort, die meine Anforderungen erfüllen würde, nicht gefunden wurde, musste ich alles selbst tun.

Als erstes musste ermittelt werden, welche Funktion in jquery.unobtrusive-ajax.js für die Generierung von Daten verantwortlich ist.

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

Wir interessieren uns für die Funktion $ (this) .serializeArray () . In der Variablen $ (this) kommt unser Formular <form /> herein und wird dann in ein Array implementiert. Beim Testen in der Konsole sowie bei der analogen Serialisierung () wurde festgestellt, dass diese Funktionen im Prinzip keine Dateien laden. Daher die Entscheidung, es neu zu schreiben.

Aber zuerst müssen Sie das Problem beim Herunterladen der Datei lösen. Dazu verwenden wir die FileReader- Klasse.

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

Ein bisschen über den Code.

Zuerst binden wir das Eingabeänderungsereignis, die Auswahl fiel auf "Änderung".

Überprüfen Sie dann, ob die Datei ausgewählt ist.

Wenn die Datei ausgewählt ist, beginnen wir mit dem Herunterladen. Das Problem war, dass die Daten irgendwo gespeichert werden mussten. Im Beispiel werden die Daten in das Attribut des Objekts selbst geschrieben.

Sperren Sie die Bestätigungsschaltfläche, bis die Datei heruntergeladen wurde.

Schreiben Sie dies im Fehlerfall in die Konsole. Dies ist nicht die endgültige Version der Funktion, jeder kann sie an seine Bedürfnisse anpassen.

Nachdem wir das Laden der Dateidaten erstellt haben, fahren wir mit der Modernisierung der Serialisierung fort.

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

Und wir verwenden diese Funktion in der Hauptfunktion.

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

Nach Abschluss müssen Sie einen Prozessor und einen Datenparser hinzufügen. In Eile sieht es ungefähr so ​​aus.

Handler

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

Helfer

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

Parser

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

Glückwunsch! Jetzt können Sie Dateien mit Standard-Ajax für MVC hochladen.