🤦🏿 🧑🏼‍🤝‍🧑🏻 👨🏻‍🎓 ASP.NET वेब फॉर्म्स में बंडलिंग और न्यूनतम जोड़ें 🚱 🤠 🤾🏾

मैं आपके लिए रिक एंडरसन के लेख "वेब फॉर्म में बंडलिंग और मिनिमेशन को जोड़ना" का अनुवाद प्रस्तुत करता हूं ।

मेरा बंडलिंग और न्यूनतम ट्यूटोरियल ASP.NET बंडलिंग और न्यूनतम (बाद में बी / एस) की सुविधाओं और प्रमुख लाभों के लिए एक अच्छा परिचय प्रदान करता है। इस उत्पाद की मुख्य विशेषताओं से परिचित होने के लिए आपको यह मैनुअल पढ़ना चाहिए। ASP.NET MVC में B / M का उपयोग करने पर मेरे B / M ट्यूटोरियल के विपरीत, यह लेख ASP.NET वेब फॉर्म के साथ संयोजन में B / M का उपयोग करने पर केंद्रित होगा।

अनुवादक द्वारा ध्यान दें। ASP.NET बंडलिंग और मिनिमेशन को अन्य नामों से भी जाना जाता है: Microsoft ASP.NET वेब ऑप्टिमाइज़ेशन फ्रेमवर्क, System.Web.Optimization, Microsoft.Web.Optimization और ASP.NET ऑप्टिमाइज़ेशन - बंडलिंग।

.NET फ्रेमवर्क 4.5 को लक्षित करते हुए एक नया ASP.NET वेब फॉर्म एप्लिकेशन बनाएं।

ASP.NET Web Forms 4.5

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

Script F12 Developer Tools

आप जावास्क्रिप्ट फ़ाइलों में से एक का चयन कर सकते हैं और इसकी सामग्री को बाएं फलक में देख सकते हैं। कृपया ध्यान दें कि फ़ाइलों के पूर्ण (कम से कम) संस्करणों का उपयोग नहीं किया जाता है।

JQuery के बंडल बनाना

App_Start क्लास में jQuery, jQuery UI और jQuery सत्यापन जोड़ें, जो App_Start निर्देशिका में स्थित है। निम्न कोड वर्ग का अंतिम संस्करण दिखाता है:

 using System.Web.Optimization; public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include( "~/Scripts/WebForms/WebForms.js", "~/Scripts/WebForms/WebUIValidation.js", "~/Scripts/WebForms/MenuStandards.js", "~/Scripts/WebForms/Focus.js", "~/Scripts/WebForms/GridView.js", "~/Scripts/WebForms/DetailsView.js", "~/Scripts/WebForms/TreeView.js", "~/Scripts/WebForms/WebParts.js")); bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include( "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js", "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js", "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js", "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js")); bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); } }

बंडल पंजीकरण

Visual Studio वेब एप्लिकेशन टेम्प्लेट स्वचालित रूप से कोड उत्पन्न करता है जो Global.asax फ़ाइल के Application_Start पद्धति में बंडल को पंजीकृत करता है:

 void Application_Start(object sender, EventArgs e) { BundleConfig.RegisterBundles(BundleTable.Bundles); AuthConfig.RegisterOpenAuth(); }

बंडलों के लिए लिंक जोड़ना

निम्न कोड में दिखाए गए अनुसार <asp:PlaceHolder /> बंडल को <asp:PlaceHolder /> नियंत्रण में जोड़ें:

 <asp:PlaceHolder runat="server"> <%: Scripts.Render("~/bundles/modernizr") %> <%: Scripts.Render("~/bundles/jquery") %> <%: Scripts.Render("~/bundles/jqueryui") %> </asp:PlaceHolder>

ScriptManager jQuery लिपियों के लिंक बाहर टिप्पणी करें, जैसा कि नीचे दिखाया गया है:

 <body> <form runat="server"> <asp:ScriptManager runat="server"> <Scripts> <%-- <asp:ScriptReference Name="jquery" /> <asp:ScriptReference Name="jquery.ui.combined" /> --%> </Scripts> </asp:ScriptManager> <header>

सीएसएस बंडल

Bundle.config फ़ाइल की जांच करें, जिसमें सीएसएस बंडल (स्टाइल बंडल) बनाने के लिए कोड है।

 <?xml version="1.0" encoding="utf-8" ?> <bundles version="1.0"> <styleBundle path="~/Content/css"> <include path="~/Content/Site.css" /> </styleBundle> <styleBundle path="~/Content/themes/base/css"> <include path="~/Content/themes/base/jquery.ui.core.css" /> <include path="~/Content/themes/base/jquery.ui.resizable.css" /> <include path="~/Content/themes/base/jquery.ui.selectable.css" /> <include path="~/Content/themes/base/jquery.ui.accordion.css" /> <include path="~/Content/themes/base/jquery.ui.autocomplete.css" /> <include path="~/Content/themes/base/jquery.ui.button.css" /> <include path="~/Content/themes/base/jquery.ui.dialog.css" /> <include path="~/Content/themes/base/jquery.ui.slider.css" /> <include path="~/Content/themes/base/jquery.ui.tabs.css" /> <include path="~/Content/themes/base/jquery.ui.datepicker.css" /> <include path="~/Content/themes/base/jquery.ui.progressbar.css" /> <include path="~/Content/themes/base/jquery.ui.theme.css" /> </styleBundle> </bundles>

आप अपने खुद के स्टाइल बंडलों को बंडल.कॉन्फिग फ़ाइल में जोड़ सकते हैं।

अनुवादक द्वारा ध्यान दें। मेरी राय में, बंडल का उपयोग करके स्टाइल बंडलों का निर्माण Bundle.config फ़ाइल डेवलपर को सीमित करती है। कस्टम बंडल जोड़ने की क्षमता ट्रांसफ़ॉर्म ( IBundleTransform इंटरफ़ेस को लागू करने वाली कक्षाएं) IBundleTransform । अब ऐसे परिवर्तनों के पूरे पुस्तकालय हैं (उदाहरण के लिए, बंडल ट्रांसफार्मर ) जो आपको LESS-, Sass-, SCSS- और कॉफीस्क्रिप्ट-कोड का अनुवाद करने की अनुमति देता है, साथ ही अन्य कोड न्यूनतमकरण एल्गोरिदम का उपयोग करता है (डिफ़ॉल्ट रूप से, Microsoft Ajax Minifier का कुछ संशोधन B / M में उपयोग किया जाता है) । इसलिए, BundleConfig क्लास (साथ ही साथ ASP.NET MVC) में स्टाइल बंडल बनाना बेहतर है। BundleConfig क्लास में सही तरीके से काम करने के लिए निर्दिष्ट सेटिंग्स के लिए, आपको bundles तत्व की सामग्री को Bundle.config फ़ाइल में टिप्पणी करने की आवश्यकता है।

निम्न कोड दिखाता है कि आप ASP.NET पेज के लेआउट में सीएसएस और जावास्क्रिप्ट बंडलों के लिंक कैसे जोड़ सकते हैं:

 <%: Styles.Render("~/Content/themes/base/css", "~/Content/css") %> <%: Scripts.Render("~/bundles/modernizr") %> <%: Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui") %>

ध्यान दें कि आप एक कॉल में कई बंडलों को Render विधि में निर्दिष्ट कर सकते हैं।

अनुवादक द्वारा ध्यान दें। लेखक ने <webopt:BundleReference /> नियंत्रण के बारे में कुछ भी उल्लेख नहीं किया है, जिसके साथ आप ASP.NET पृष्ठ के लेआउट में स्टाइल बंडलों के लिंक भी जोड़ सकते हैं। चूंकि यह नियंत्रण स्क्रिप्टेड बंडलों के लिंक को जोड़ने का समर्थन नहीं करता है और भ्रमित कर रहा है, मैं उन सभी स्थानों को खोजने की सलाह देता हूं जहां इसका उपयोग किया जाता है और इसे Styles.Render साथ प्रतिस्थापित किया जाता है। Styles.Render विधि।

UPD: हावर्ड डायरकिंग की प्रस्तुति देखने के बाद, "ASP.NET 4.5 के साथ आसानी से उच्च प्रदर्शन वाले HTML 5 अनुप्रयोगों का निर्माण करें", यह स्पष्ट हो गया कि <webopt:BundleReference /> नियंत्रण और Bundle.config फ़ाइल की Bundle.config । चूंकि BundleConfig क्लास में बनाई गई Bundle` केवल रनटाइम में उपलब्ध हो जाती हैं, उनमें निर्दिष्ट शैलियों को विज़ुअल स्टूडियो डिज़ाइनर विंडो ( डिज़ाइन और स्प्लिट डिस्प्ले मोड) में लागू नहीं किया जाता है। यह समस्या सिर्फ उपरोक्त उपकरणों द्वारा हल की गई है। ऐसा लगता है कि अब आपको BundleConfig क्लास और BundleConfig फ़ाइल में दोनों शैलियों को डुप्लिकेट करना होगा, और परिनियोजन से पहले, Bundle.config तत्व की सामग्री को Bundle.config फ़ाइल में Bundle.config । दुर्भाग्य से, यह अभी तक स्पष्ट नहीं है कि परियोजना में लेस, सैस या एससीएसएस का उपयोग करते समय क्या करने की आवश्यकता है (सबसे अधिक संभावना है, आपको परियोजना के निर्माण के दौरान कोड अनुवाद (संकलन) का उपयोग करना होगा या डिजाइनर के बिना करना होगा)।

ASP.NET वेब फॉर्म्स में बंडलिंग और न्यूनतम जोड़ें

JQuery के बंडल बनाना

बंडल पंजीकरण

बंडलों के लिए लिंक जोड़ना

सीएसएस बंडल

More articles: