تعديل Ajax js لـ ajax Asp .net mvc

يواجه العديد من المبرمجين المبتدئين C # ASP .NET MVC (يشار إليهم فيما بعد بـ mvc) مهمة إرسال البيانات باستخدام Ajax. لكن من الناحية العملية ، هذه المهمة ليست بهذه السهولة.

في عملي ، أحاول الالتزام بمبادئ معينة لتطوير البرمجيات. أحدها هو تقليل كتابة التعليمات البرمجية وإنشاء فئات ووظائف عالمية. كان هذا المبدأ هو الذي اقترح استخدام jquery.unobtrusive-ajax.js وفئة Ajax لـ mvc .

في هذه المقالة ، نحن مهتمون مباشرة بأياكس.

مثال:

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

في مواجهة حقيقة أن Ajax.BeginForm لا يمر الإدخال [type = file] ، أجريت بحثًا عالميًا لإيجاد حل لهذه المشكلة. قدم تدفق مكدس القديم المفضل على كل حل نفس الشيء. لا تستخدم Ajax.BeginForm ، استخدم FormData ، قم بإنشاء معالج php ، والمزيد من السحب من النصائح لزيادة كود البرنامج.

كما قلت سابقًا ، في منتجاتي ، ألتزم بالمبادئ وبما أنه لم يتم العثور على الإجابة التي تلبي متطلباتي ، كان علي أن أفعل كل شيء بنفسي.

أول شيء كان مطلوبًا هو تحديد الوظيفة في jquery.unobtrusive-ajax.js المسؤولة عن توليد البيانات.

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

نحن مهتمون بالوظيفة $ (this) .serializeArray () . في المتغير $ (هذا) ، يأتي النموذج <form /> الخاص بنا ثم يتم تنفيذه في مصفوفة. من خلال اختباره في وحدة التحكم ، وكذلك التسلسل التمثيلي التناظري () ، تم تحديد أن هذه الوظائف لا تقوم بتحميل الملفات من حيث المبدأ. ومن هنا جاء قرار إعادة كتابته.

ولكن عليك أولاً حل المشكلة مع تنزيل الملف ، لذلك نستخدم فئة 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); } }); 

قليلا عن الرمز.

أولاً ، قمنا بربط حدث تغيير المدخلات ، ووقع الاختيار على "التغيير".

ثم تحقق من تحديد الملف.

إذا تم تحديد الملف ، فإننا نبدأ في تنزيله. كانت المشكلة أنه يجب تخزين البيانات في مكان ما ، في المثال سنكتب البيانات إلى سمة الكائن نفسه.

قفل زر التأكيد حتى يتم تنزيل الملف.

في حالة حدوث خطأ ، اكتب هذا إلى وحدة التحكم. هذه ليست النسخة النهائية من الوظيفة ، يمكن للجميع ترقيتها لتناسب احتياجاتهم.

بعد إنشاء تحميل بيانات الملف ، ننتقل إلى تحديث التسلسل.

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

ونستخدم هذه الوظيفة في الوظيفة الرئيسية.

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

عند الانتهاء ، تحتاج إلى إضافة معالج ومحلل بيانات. في عجلة من أمرنا ، يبدو شيء من هذا القبيل.

معالج

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

مساعد

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

محلل

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

مبروك! يمكنك الآن تحميل الملفات باستخدام Ajax القياسي لـ mvc.