Ajax js für ajax Asp .net mvc ändern

Viele unerfahrene C # ASP .NET MVC-Programmierer (im Folgenden als "mvc" bezeichnet) stehen vor der Aufgabe, Daten mit Ajax zu senden. Das ist nur in der Praxis so einfach.

In meiner Arbeit versuche ich, bestimmte Prinzipien der Softwareentwicklung einzuhalten. Eine davon ist die Minimierung des Schreibens von Code und das Erstellen von universellen Klassen und Funktionen. Dieses Prinzip ging von jquery.unobtrusive-ajax.js und der Ajax-Klasse für mvc aus .

In diesem Artikel sind wir direkt an Ajax.BeginForm interessiert.

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. Alter Favoriten Stackoverflow jede Lösung bietet die gleiche Sache. Verwenden Sie nicht Ajax.BeginForm, verwenden Sie FormData, erstellen Sie einen PHP-Handler und weitere Cloud-Tipps zum Erhöhen des Codes.

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

Als Erstes musste festgestellt werden, welche Funktion in jquery.unobtrusive-ajax.js für die Generierung der 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 sind an der Funktion $ (this) .serializeArray () interessiert . In der $ (this) -Variable kommt unser Formular <form /> ins Spiel und wird dann an ein Array verkauft. Nach dem Test in der Konsole sowie seiner analogen serialize () wurde festgestellt, dass diese Funktionen grundsätzlich keine Dateien laden. Daher die Entscheidung, es neu zu schreiben.

Zuerst müssen Sie jedoch das Problem mit dem 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 wenig über den Code.

Zuerst binden wir die Eingabe für die Ereignisänderung, die Wahl fiel auf «Änderung».

Dann prüfen wir, 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 sollten. In dem Beispiel werden die Daten in das Attribut des Objekts selbst geschrieben.

Sperren Sie die Bestätigungstaste, bis die Datei heruntergeladen ist.

Bei Fehlern schreiben Sie dies auf die Konsole. Dies ist nicht die endgültige Version der Funktion, jeder kann sie nach ihren Bedürfnissen aktualisieren.

Wenn wir den Dateidownload erstellt haben, gehen Sie zum Serialisierungsupgrade.

functionselfFormSerializeArray(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 werden ein Handler und ein Datenparser benötigt. In aller Eile sieht es so aus.

Handler

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

Helfer

publicstaticboolLoadAvatarImage(string data)
        {
            try
            {
                var file = AjaxFile.Create(data);
                returntrue;
            }
            catch (Exception ex)
            {
                returnfalse;
            }

Parser

publicAjaxFile(string data)
        {
            var infos = data.Split(',');
            this.Type = infos[0].Split(';')[0].Split(':')[1].Split('/')[1];
            this.Source = Convert.FromBase64String(infos[1]); ;
        }
        publicstatic AjaxFile Create(string data)
        {
            returnnew AjaxFile(data);
        }

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

Jetzt auch beliebt: