13

को अपग्रेड करने के बाद एमवीसी 4 प्रोजेक्ट्स में नया एएसपी.नेट वेब ऑप्टिमाइज़ेशन फ्रेमवर्क जोड़ना एमएसवी 4 using these instructions पर मैन्युअल रूप से एएसपी.नेट एमवीसी प्रोजेक्ट को अपग्रेड करने के बाद, आप फिर नए सीएसएस और जावास्क्रिप्ट एसेट बंडलिंग और कम करने की सुविधाओं को कैसे सेट अप करते हैं एमवीसी 4 में एएसपी.नेट वेब अनुकूलन फ्रेमवर्क? डिफ़ॉल्ट टेम्पलेट्स ने यह सब सेट अप किया है, लेकिन आप इसे हाथ से कैसे करते हैं?मैन्युअल रूप से उन्हें

उत्तर

31
  • राइट क्लिक करें संदर्भ तो NuGet पैकेज का प्रबंधन और "Microsoft.AspNet.Web.Optimization" जोड़ने (या NuGet कंसोल में Install-Package Microsoft.AspNet.Web.Optimization टाइप)।
  • अपनी वेब.कॉन्फिग फ़ाइल में, निम्नलिखित को <system.webServer> पर जोड़ें, जिससे मिनी बंडलों को विस्तारित URL के साथ परोसा जा सके।
<handlers> 
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" /> 
<remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" /> 
<remove name="ExtensionlessUrlHandler-Integrated-4.0" /> 
<add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" /> 
<add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" /> 
<add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
</handlers> 
  • अपने App_Start फ़ोल्डर में, एक नया वर्ग BundleConfig.cs बुलाया जोड़ें।
  • :
using System.Web; 
using System.Web.Optimization; 

namespace MvcApplication1 
{ 
    public class BundleConfig 
    { 
     // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 
     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*")); 

      // Use the development version of Modernizr to develop with and learn from. Then, when you're 
      // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 
      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
         "~/Scripts/modernizr-*")); 

      bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); 

      bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
         "~/Content/themes/base/jquery.ui.core.css")); 
     } 
    } 
} 
  • संपादित स्क्रिप्ट और स्टाइलशीट बंडलों आप तो खंड और Application_Start Global.asax.cs में उपयोग करने के लिए निम्न पंक्तियां जोड़ें की आवश्यकता होती है जोड़ने के लिए ऊपर: यह कुछ इस तरह देखना चाहिए
//using section 
using System.Web.Optimization; 

//Application_Start 
BundleConfig.RegisterBundles(BundleTable.Bundles); 
  • @Styles.Render("~/Content/css") और @Scripts.Render("~/bundles/jquery"), replaci के लिए कॉल के साथ _Layout.cshtml में अपने सीएसएस और जावास्क्रिप्ट और टैग बदलें आपके द्वारा BundleConfig.cs में जोड़े गए बंडलों के नाम वाले पैरामीटर। सुनिश्चित करें कि किसी भी बंडलों को अपने प्रोजेक्ट में फ़ोल्डर के समान नहीं नाम दें।

अब आप पूरी तरह से तैयार होना चाहिए - कैसे पूर्ण featureset यहाँ का उपयोग करने के बारे में पढ़ें: http://www.asp.net/mvc/overview/performance/bundling-and-minification

0

हाँ नीचे दिए गए चरणों बंडल करने का पालन करें और कम करें जे एस और सीएसएस:

  • पहले खुला पैकेज प्रबंधक कंसोल और कमांड चलाएं, प्रोजेक्ट के रूप में अपना वेब ऐप चुनें।

स्थापित-पैकेज Microsoft.AspNet.Web.Optimization

  • जाओ राइट क्लिक करने और देखने कोड

  • Global.asax के लिए नीचे दिए गए कोड पेस्ट करें:

    public static void MinifyJavaScriptAndCSS() 
    { 
        var scripts1 = new ScriptBundle("~/bundles/customJSBundle"); 
        scripts1.Include("~/Scripts/script1.js"); 
        scripts1.Include("~/Scripts/script2.js"); 
        BundleTable.Bundles.Add(scripts1); 
    
        //Bundle Css 
        var css1 = new StyleBundle("~/bundles/customCSSBundle"); 
        css1.Include("~/Styles/style1.css"); 
        css1.Include("~/Styles/style2.css"); 
        BundleTable.Bundles.Add(css1); 
    } 
    
  • इसे एप्लिकेशन_स्टार्ट()

    में कॉल करें
    protected void Application_Start() 
    { 
        ApplicationHelper.MinifyJavaScript(); 
    } 
    
  • जाओ दृश्य में _Layout.cshtml को/साझा

  • सिर

    में पंक्ति जोड़ें @ ViewBag.Title - मेरी ASP.NET अनुप्रयोग @Styles।प्रस्तुत ("~/बंडलों/customCSSBundle")

  • इस जोड़े बॉडी टैग

    //your code 
        @Scripts.Render("~/bundles/customJSBundle") 
    </body> 
    
  • के समापन web.config में से पहले अगर आप संकलन डिबग = सच निर्धारित करते हैं, फ़ाइलों बंडल नहीं किया जाएगा। यदि आप इसे गलत के रूप में सेट करते हैं, तो फ़ाइलों को बंडल किया जाएगा।