Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Bo Jacobsen 448 posts 1829 karma points
    Oct 11, 2015 @ 13:46
    Bo Jacobsen
    0

    How to bundle .css and .js using System.Web.Optimization?

    Hello everyone.

    I want to be able to use @Scripts.Render("~/Script/js") and @Styles.Render("~/Content/css")

    After some research i came up with this.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Optimization;
    using Umbraco.Core;
    
    namespace MySolution.App_Code
    {
        public class CustomEventHandler : IApplicationEventHandler
        {
            public void OnApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
            {
                RegisterStyles(BundleTable.Bundles);
                RegisterJavascript(BundleTable.Bundles);
            }
    
            private static void RegisterStyles(BundleCollection bundles)
            {
                bundles.Add(new StyleBundle("~/Content/styles").Include(
                        "~/css/*.css"
                    )
                );
            }
    
            private static void RegisterJavascript(BundleCollection bundles)
            {
                bundles.Add(new ScriptBundle("~/Script/js").Include(
                        "~/scripts/jquery/*.js"
                    )
                );
            }
        }
    }
    

    1) Now System.Web.Optimization couldn't be found.

    2) Then i used : PM> Install-Package Microsoft.AspNet.Web.Optimization

    3) Now i got no errors in my built. BUT...

    4) Then i got a Newtonsoft.Json assembly error referance.

    WRN : Logging assemblybinding is disabled .
    Logging assemblybindingserror activated by setting the registry value [ HKLM \ Software \ Microsoft \ Fusion ! EnableLog ] ( DWORD ) at 1.
    Note The performance impaired by logging assemblybindingserror .
    This function is disabled by removing the registry value [ HKLM \ Software \ Microsoft \ Fusion ! EnableLog ] .
    

    I hope someone can help.

  • David Brendel 786 posts 2949 karma points MVP c-trib
    Oct 11, 2015 @ 17:56
    David Brendel
    0

    Not a real answer for your question but I Bad really good experience using Optimus package for bundling of CSS and JS files.

    Maybe that helps.

    Regards David

  • Bo Jacobsen 448 posts 1829 karma points
    Oct 12, 2015 @ 07:02
    Bo Jacobsen
    0

    I prefer to be able to make my own simple bundle code ;-)

    Regards Bo

    Edited: After a whole day trying to sholve the problem. My Umbraco Build now has 100 warnings and 2 errors. So my feelings for umbraco is at a very low place.

    But i got the Logging assemblybindingserror activated. Its just told me that there was 2 assembly referances of Newtonsoft.Json. But i could only find one.

  • Bo Jacobsen 448 posts 1829 karma points
    Oct 13, 2015 @ 19:00
    Bo Jacobsen
    100

    I finally managed to get it to work.

    1. Start a new empty asp.net project.
    2. Installing Microsoft ASP.NET Web Optimization & WebActivtor in PackageManager.
    3. Installing Umbraco via Package Manager PM> Install-Package UmbracoCms
    4. Adding a new folder in the solution, i called it helpers. You can name it whatever you like.
    5. Add a new class.cs in the new folder, i named it CustomEventHandler.cs. You can name it whatever you like.

    CustomHandlerEvent.cs

    using System.Web.Optimization;
    using Umbraco.Core;
    
    namespace MySolution.helpers
    {
    public class CustomEventHandler : IApplicationEventHandler
     {
            public void OnApplicationInitialized(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext) 
            { }
            public void OnApplicationStarting(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext) 
            { }
            public void OnApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
            {
                RegisterStyles(BundleTable.Bundles);
                RegisterJavascript(BundleTable.Bundles);
            }
            private static void RegisterStyles(BundleCollection bundles)
            {
                bundles.Add(new StyleBundle("~/bundle/styles.css").Include(
                        "~/css/*.css"
                    )
                );
            }
            private static void RegisterJavascript(BundleCollection bundles)
            {
                bundles.Add(new ScriptBundle("~/bundle/javascript.js").Include(
                        "~/scripts/jquery/*.js",
                        "~/scripts/*.js"
                    )
                );
            }
        }
    }
    

    Now you can use @Scripts.Render() and @Styles.Render in your .cshtml file.

    Layout.cshtml

    @using System.Web.Optimization
    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    <!DOCTYPE html>
    <html>
    <head>
        // Cleared for clarification
        @Styles.Render("~/bundle/styles.css")
    </head>
    <body>
        // Cleared for clarification
        @Scripts.Render("~/bundle/javascript.js")
    </body>
    </html>
    
  • Bo Jacobsen 448 posts 1829 karma points
    Oct 13, 2015 @ 19:28
    Bo Jacobsen
    0

    Adding Bundles Directly

    Taken from step 4 in my former reply.

    This time add a class file called BundleConfig.cs

    BundleConfig.cs

    using System.Web.Optimization;
    
    namespace MySolution.helpers
    {
      public static class BundleConfig
      {
        public static void RegisterBundles()
        {
            BundleTable.Bundles.Add(new Bundle("~/bundle/javascript.js").Include(
                "~/scripts/jquery/*.js",
                "~/scripts/*.js"
                            ));
    
    
            BundleTable.Bundles.Add(new Bundle("~/bundle/styles.css").Include(
                "~/css/*.css"
                            ));
    
            BundleTable.EnableOptimizations = true;
        }
      }
    }
    

    Now find your AssemblyInfo.cs. Its under Solution -> Properties -> AssemblyInfo.cs.

    Add in the top after the other usings.

    using MySolution.helpers;
    using WebActivatorEx;
    
    [assembly: PostApplicationStartMethod(typeof(BundleConfig), "RegisterBundles")]
    

    Now you can use @Scripts.Render() and @Styles.Render in your .cshtml file.

  • Biagio Paruolo 1494 posts 1635 karma points c-trib
    Jul 21, 2016 @ 07:42
  • Romix2017 23 posts 183 karma points
    Oct 11, 2017 @ 10:39
    Romix2017
    0

    using Umbraco.Core;

    using System.Web.Optimization; namespace Anturaz_new.EventHandlers { public class RegisterBundlesHandler: Umbraco.Core.ApplicationEventHandler

    {

    protected override void ApplicationStarted(UmbracoApplicationBase

    umbracoApplication, ApplicationContext applicationContext) { BundleConfig.RegisterBundles(BundleTable.Bundles); }

    }
    

    }

Please Sign in or register to post replies

Write your reply to:

Draft