अजाक्स एस्प .net mvc के लिए अजाक्स जेएस संशोधन

कई नौसिखिए सी # एएसपी .NET एमवीसी प्रोग्रामर (बाद में एमवीसी के रूप में संदर्भित) का सामना करना पड़ता है, जो मोम का उपयोग करके डेटा भेजने के कार्य के साथ होता है। लेकिन व्यवहार में यह कार्य इतना आसान नहीं है।

अपने काम पर, मैं सॉफ्टवेयर विकास के कुछ सिद्धांतों का पालन करने की कोशिश करता हूं। उनमें से एक कोड के लेखन और सार्वभौमिक वर्गों और कार्यों के निर्माण को कम करना है। यह वह सिद्धांत था जिसने पीवीसी के लिए jquery.unobtrusive-ajax.js और अजाक्स वर्ग के उपयोग का सुझाव दिया था।

इस लेख में, हम सीधे Ajax.BeginForm में रुचि रखते हैं।

एक उदाहरण:

@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 इनपुट [प्रकार = फ़ाइल] पास नहीं करता है, मैंने इस समस्या का समाधान खोजने के लिए एक वैश्विक खोज की। प्रत्येक समाधान पर पुराने पसंदीदा स्टैकओवरफ़्लो ने एक ही चीज़ की पेशकश की। 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()) }); }); 

हम फ़ंक्शन $ (यह) .serializeArray () में रुचि रखते हैं। चर $ (यह) में, हमारा फॉर्म </ /> आता है और फिर इसे एक सरणी में लागू किया जाता है। कंसोल में इसका परीक्षण करने के साथ-साथ इसके अनुरूप क्रमबद्ध (), यह निर्धारित किया गया था कि ये कार्य सिद्धांत रूप में फ़ाइलों को लोड नहीं करते हैं। इसलिए इसे फिर से लिखने का निर्णय।

लेकिन पहले आपको फ़ाइल को डाउनलोड करने के साथ समस्या को हल करने की आवश्यकता है, इसके लिए हम फ़ाइलरियर वर्ग का उपयोग करते हैं।

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

बधाई! अब आप mvc के लिए मानक Ajax का उपयोग करके फ़ाइलें अपलोड कर सकते हैं।