ASP.NET छवि NuGet के साथ पहले से कहीं ज्यादा आसान है

मैंने सोचा, जब से नुगेट पैकेज मैनेजर की साइट पैकेज से भरने लगी है , तो यह विशेष रूप से मूल्यवान पैकेजों को चुनने का समय है। ऐसे पैकेज जो वास्तव में उपयोगी चीजें करते हैं, लेकिन डेवलपर्स द्वारा छोड़े जा सकते हैं। मैं सबसे उपयोगी ओपन सोर्स प्रोजेक्ट के बीच ऐसे पैकेज की तलाश करने जा रहा हूं। मैं यह समझने जा रहा हूं कि इन पैकेजों को कैसे इकट्ठा किया जाता है, क्या उनके व्यावहारिक अनुप्रयोग के संदर्भ में कुछ विशेष रूप से दिलचस्प है।

स्प्राइट और छवि अनुकूलन पूर्वावलोकन 3

इसके साथ शुरू करने के लिए, स्प्राइट और इमेज ऑप्टिमाइज़ेशन फ्रेमवर्क को पूर्वावलोकन 3 में अपग्रेड किया गया है। यह फ्रेमवर्क इस बात का एक उदाहरण है कि Microsoft भविष्य में ASP.NET के लिए क्या योजना बना सकता है, और साथ ही साथ आप आज का उपयोग करने का प्रयास कर सकते हैं। और यह ढांचा और भी आसान हो गया है क्योंकि यह नुगेट में दिखाई दिया है।



ये दोनों पैकेज अच्छी तरह से व्यवस्थित हैं। वास्तव में, तीन पैकेज हैं, जिनमें से दो मुख्य कोर पैकेज पर निर्भर हैं।

• AspNetSprites कोर
• AspNetSprites-WebFormsControl
• AspNetSprites-MvcAndRazorHelper

ये पैकेज स्वचालित रूप से सीएसएस स्प्राइट और एम्बेडेड इमेज (डेटा: इमेज; बेस 64) उत्पन्न करने के लिए एक एपीआई हैं। यह एपीआई उपलब्ध है और दोनों WebForms परियोजनाओं और ASP.NET MVC और WebPages के लिए काम करता है। यह बहुत उपयोगी है जब आप स्प्राइट एपीआई के आधार पर अपनी खुद की लाइब्रेरी बनाते हैं, जो तीनों प्रकार की परियोजनाओं में काम करना चाहिए। स्प्राइट एंड इमेज ऑप्टिमाइज़ेशन प्रोजेक्ट ओपन सोर्स प्रकाशित किया गया है, जो इस लिंक पर उपलब्ध है।

स्प्राइट्स का विचार आपकी साइट पर प्रस्तुत छोटी छवियों के लिए सैकड़ों महंगा HTTP अनुरोधों से छुटकारा पाने के लिए है और इसके बजाय सभी छोटी छवियों को एक बड़ी छवि में संयोजित करें, जो एक अनुरोध में अनुरोध किया गया है। फिर सीएसएस और एक बड़ी छवि का उपयोग करके पेज पर वांछित छवि प्रदर्शित करें। हालांकि, आमतौर पर, स्प्राइट बनाने की पूरी प्रक्रिया को व्यवस्थित करना और उनके साथ पृष्ठों पर काम करना एक परेशानी भरा व्यवसाय है।

आपके लिए मर्ज की गई छवि बनाना पर्याप्त नहीं है, इसके लिए आपको एक बड़ी छवि में शामिल सभी छोटी छवियों के सापेक्ष निर्देशांक के साथ एक सीएसएस फ़ाइल बनाने की आवश्यकता है।

इसके अलावा, आप मार्कअप में बेस -64 एन्कोडिंग और एम्बेडिंग इमेज के साथ काम करने के लिए ब्राउज़र की क्षमताओं का उपयोग करके इमेज कंटेंट को एम्बेड करने के फंक्शन का उपयोग करना चाह सकते हैं।

ASP.NET WebForms में स्प्राइट्स

फ्रेमवर्क के रचनाकारों में पैकेज में एक उपयोगी रीडमी फ़ाइल शामिल थी, जिसे App_Sprites फ़ोल्डर में पाया जा सकता है, जो पैकेज स्थापित होने पर बनाया जाता है। इस फ़ाइल का पाठ नीचे प्रस्तुत किया गया है, यह पहले से ही सुखद है कि इसमें वास्तव में वह सब कुछ है जो आपको फ्रेमवर्क के काम के बारे में जानना है। आपको आश्चर्य होगा कि कुछ पैकेज इस अभ्यास का पालन कैसे करते हैं। याद रखें, आपके नगेट पैकेज का उपयोगकर्ता या तो पहले से ही विजुअल स्टूडियो में है या कहीं इसके पास है, और चूंकि NuGet मौजूद है ताकि टूल की खोज बंद हो सके, अपने उपयोगकर्ता को रीडमी विवरण जैसी चीजों की तलाश करना बंद कर दें।

ASP.NET स्प्राइट्स और इमेज ऑप्टिमाइजेशन फ्रेमवर्क की विस्तृत जानकारी के लिए, aspnet.codeplex.com/releases/view/69696 पर जाएं
त्वरित क्लिक करें:
1) अपनी छवियों को "App_Sprites" निर्देशिका में जोड़ें।
2) आपके आवेदन के प्रकार पर निर्भर करता है:
****************************
*** ASP.NET वेब फॉर्म 4 ****
****************************
<asp: ImageSprite ID = "Sprite1" runat = "सर्वर" ImageUrl = "~ / App_Sprites / your_IMAGE.jpg" />
**********************************
*** ASP.NET MVC 3 (ASPX दृश्य) ***
**********************************
<%: Sprite.ImportStylesheet ("~ / App_Sprites /")%>
<%: Sprite.Image ("~ / App_Sprites / your_IMAGE.jpg")%>
************************************************** ******
*** ASP.NET MVC 3 (रेजर दृश्य) या ASP.NET वेब पेज ***
************************************************** ******
स्प्राइट .ImportStylesheet ("~ / App_Sprites /")
स्प्राइट .Image ("~ / App_Sprites / your_IMAGE.jpg")

So. मैंने Visual Studio लॉन्च किया और एक नया ASP.NET WebForms प्रोजेक्ट बनाया। याद रखें, आप GUG से Visual Studio में, या Visual Studio से PowerShell कमांड विंडो का उपयोग करके कमांड लाइन से NuGet का उपयोग कर सकते हैं।

मैं प्रोजेक्ट विंडो (सॉल्यूशन एक्स्प्लोरर) में सन्दर्भ फ़ोल्डर पर राइट-क्लिक करता हूँ और Nuetet से एक पैकेज जोड़ने के लिए "लाइब्रेरी पैकेज संदर्भ जोड़ें" का चयन करता हूँ। ऑनलाइन उपलब्ध पैकेजों की सूची की विंडो में मैंने "स्प्राइट" शब्द के साथ खोज की। और AspNetSprites-WebFormsControl पैकेज स्थापित किया।



अब मैंने बस App_Sprites फ़ोल्डर में कुछ बुनियादी छोटी छवियां रखीं। यहाँ वे एक्सप्लोरर विंडो में हैं:



अगला, मैंने अभी एप्लिकेशन लॉन्च किया है। अब उसी फ़ोल्डर की सामग्री को देखें। नई sprite0.png फ़ाइल पर ध्यान दें? (बेशक, आप इस नाम को फिर से परिभाषित कर सकते हैं)। ध्यान दें कि नई स्प्राइट फ़ाइल सभी छोटी छवियों को जोड़ती है।



इसके अलावा, नई कक्षाओं के साथ सीएसएस-फाइलें वहीं स्थित हैं, जो छवियों तक पहुंचने के लिए आपके लिए उपयोगी हैं। कूल!



हालाँकि, WebForms में, मुझे इन फ़ाइलों के बारे में सोचना भी नहीं चाहिए। याद रखें कि WebForms का सार नियंत्रण में है। मैं सिर्फ एक नियंत्रण जोड़ सकता हूं और WebForms आवश्यकतानुसार IMG टैग को संसाधित करेगा:



और आउटपुट पर, हमारे पास अधिकतम अनुकूलता के लिए निम्नलिखित मार्कअप होगा:



वाह!

ASP.NET MVC में (रेजर हेल्पर के रूप में) स्प्राइट्स

अब, मैं पहले की तरह ही कदम उठाऊंगा , लेकिन अपने ASP.NET MVC एप्लिकेशन में AspNetSprites-MvcAndRazorHelper पैकेज स्थापित करें।

एमवीसी परियोजना के मामले में, मैं अपने _Layout.cntice/ के <head> में सीएसएस फाइलों के लिंक खुद जोड़ता हूं:

स्प्राइट .ImportStylesheet ("~ / App_Sprites /")

और फिर मैं उस छवि को सम्मिलित करने के लिए सहायक का उपयोग करता हूं जहां मुझे आवश्यकता है:

स्प्राइट .Image ("~ / App_Sprites / video.png")

और यह ठीक वैसा ही काम करता है जैसा कि वेबफ़ॉर्म के मामले में, केवल एमवीसी के लिए पारंपरिक तरीके से। और फिर से मैं जोड़ना चाहता हूं कि यह नगेट पैकेज वेबफार्म, एमवीसी और वेबपेज के लिए तुरंत उपलब्ध एक पुस्तकालय का एक शानदार उदाहरण है।