Ajax js modifikasi untuk ajax Asp .net mvc

Banyak programmer C # ASP .NET MVC pemula (selanjutnya disebut mvc) dihadapkan dengan tugas mengirim data menggunakan Ajax. Namun dalam praktiknya tugas ini tidak begitu mudah.

Di tempat kerja saya, saya mencoba mematuhi prinsip-prinsip tertentu pengembangan perangkat lunak. Salah satunya adalah untuk meminimalkan penulisan kode dan penciptaan kelas dan fungsi universal. Prinsip inilah yang menyarankan penggunaan jquery.unobtrusive-ajax.js dan kelas Ajax untuk mvc .

Pada artikel ini, kami secara langsung tertarik pada Ajax.BeginForm.

Contoh:

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

Menghadapi kenyataan bahwa Ajax.BeginForm tidak lulus input [type = file], saya melakukan pencarian global untuk menemukan solusi untuk masalah ini. Stackoverflow favorit lama pada setiap solusi menawarkan hal yang sama. Jangan gunakan Ajax.BeginForm, gunakan FormData, buat handler php, dan bahkan lebih banyak awan tips untuk meningkatkan kode program.

Seperti yang saya katakan sebelumnya, dalam produk saya saya mematuhi prinsip-prinsip dan karena jawaban yang akan memenuhi persyaratan saya tidak ditemukan, saya harus melakukan semuanya sendiri.

Hal pertama yang diperlukan adalah menentukan fungsi mana di jquery.unobtrusive-ajax.js yang bertanggung jawab untuk menghasilkan data.

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

Kami tertarik dengan fungsi $ (ini) .serializeArray () . Dalam variabel $ (ini), formulir kami <form /> masuk dan kemudian diimplementasikan ke dalam array. Dengan mengujinya di konsol, serta analog serialize (), ditentukan bahwa fungsi-fungsi ini tidak memuat file pada prinsipnya. Karena itu keputusan untuk menulis ulang.

Tetapi pertama-tama Anda harus menyelesaikan masalah dengan mengunduh file, untuk ini kami menggunakan kelas 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); } }); 

Sedikit tentang kodenya.

Pertama, kami mengikat acara perubahan input, pilihan jatuh pada "perubahan".

Kemudian periksa apakah file tersebut dipilih.

Jika file dipilih, maka kami mulai mengunduhnya. Masalahnya adalah bahwa data perlu disimpan di suatu tempat, dalam contoh kita akan menulis data ke atribut objek itu sendiri.

Kunci tombol konfirmasi hingga file diunduh.

Jika terjadi kesalahan, tulis ini ke konsol. Ini bukan versi final dari fungsi, semua orang dapat memutakhirkannya sesuai dengan kebutuhan mereka.

Setelah kami membuat pemuatan data file, kami melanjutkan ke modernisasi serialisasi.

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

Dan kami menggunakan fungsi ini di fungsi utama.

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

Setelah selesai, Anda perlu menambahkan pengolah dan pengurai data. Terburu-buru, terlihat seperti ini.

Handler

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

Helper

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

Selamat! Sekarang Anda dapat mengunggah file menggunakan Ajax standar untuk mvc.