Start Free Trial

asked on

ASP.NET 4.5 VS2012 Bundling & Optimization

Hello Experts,

I need help with bundling 2 .css files and at least 7 .js files. I have had multiple people send me tutorials but they have not worked. When I say not worked I mean that I'm unable to bundle my .css and .js files according to how they are telling me. Also, the dates on the tutorials are all before final release of VS 2012.

All of my .css files are located in a folder called "css" of the main root. My .js files are located in a folder called "Scripts" of the main root.

So my question is how can I make it only load 2 requests. One for all my .css files and another for all my .js files?

Thanks in advance.

Do you mean this?
http://www.sitepoint.com/asp-net-4-5-bundling-and-minification-support/

ASKER

Hi GaryC123,

Yes, I have tried that multiple time but with no luck. I put all my css inside of a folder called "content/css" and all my javascript inside of a folder called "scripts/js" as the tutorial explains. But, I'm not able to use the code they suggest for the Application_Start for the global.asax page. It does not support that line of code. This maybe were my problem is. When VS 2012 launched it has the following line of code already in the Application_Start section, see below.

void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
BundleConfig.RegisterBundles(BundleTable.Bundles);
AuthConfig.RegisterOpenAuth();
}

In 4.5 on creating a new MVC application you have two ways to use bundling and minification.
One way is /Folder/FileExtension. For example:

<link rel="stylesheet" type="text/css" href="~/Content/css" />

Another way is registering an identifier with specific files which can be found on the BundleConfig in the App_Start folder.

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

Then you can write it out on the page like so:

@Styles.Render("~/Content/css")

ASKER

Hi stephanonline,
Im using 4.5 web forms and not mvc. Can you provide me the coding I should use to bundle specific JavaScript and CSS files? I'm using modernizer, jquery 1.8.0, plugins, and main java scripts files. I have read that it's best to place JavaScript files at the bottom of the page but modernizer needs to be ran at the top I believe. So where would I place the script.render("scripts/js")?

Also, do I need to make changes to the bundle.config file and the global.asax files and if so can you tell me what I need to add?

Thanks, sorry to ask so many question but I'm really stumped on what I need to do.

You probably installed the Microsoft ASP.NET Optimization Framework.

You need to add the following line on the global.asax

BundleTable.EnableOptimizations = true;

After that, you can add the following line on your page:

<%: Scripts.Render("~/Scripts/js") %>

And for CSS

<%: Styles.Render("~/Content/css") %>

You can place it on the end of your page because it is better practice.

Here is an blog about it:
http://igorzelmanovich.blogspot.nl/2012/09/using-aspnet-bundling-and-minification.html

ASKER

Ok, so I just need to place only the files I want to use in those specific folders then? I don't need to make changes to the bundle.config file then. I will attempt your solution. I'm away now but will be back at my computer in 6 hours. I will post the results then. Thank you do much for your help...

ASKER

Hi stephanonline,

Ok, I made the changes to the global.asax page along with adding the <%: Styles.Render("~/Content/css") %> and the <%: Scripts.Render("~/Scripts/js") %> but when I run nothing happens, my page is not styled with the css and modernizer must not be getting called because it's a .js file located in the Scripts/js directory and it's needed to display HTML5 elements and that's not working. I'm going to attach my page so you can see what I have.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="SHORTCUT ICON" href="img/shapeup.ico" type="image/x-icon" />

    <%: Styles.Render("~/Content/css") %>
    <%: Scripts.Render("~/Scripts/js") %>

</head>
<body>
    <form id="form1" runat="server">
        <div id="page">
            <header>
                <img src="img/logo-orange.png" alt="Shape-Up Logo" />
                <nav>
                    <ul>
                        <li><a href="index.aspx">Home</a></li>
                        <li><a href="information/index.aspx">Information</a></li>
                        <li class="no-border"><a href="contact/index.aspx">Contact</a></li>
                        <li class="rgt"><asp:Label ID="lblFullNameSession" runat="server" CssClass="rgtlabel"></asp:Label><asp:LinkButton ID="lb_logout" OnClick="lb_logout_Click" runat="server">logout</asp:LinkButton></li>
                    </ul>
                </nav>
            </header>
  
            <article>
                <h1>Home</h1>
                <p>Welcome to the Shape-Up Reporting System. Please use the links to the left to start the reporting process.</p>
                <p>Thank you, <br /><i>The Shape-Up Team</i></p>
            </article>

            <section>
                <h2>Start Here</h2>
                <ul>
                    <li><a href="newuser/index.aspx">New User</a></li>
                    <li><a href="application/index.aspx">Login</a></li>
                </ul>
            </section>

            <footer>
                <%--<p><a href="#">Privacy Policy</a></p>--%>
            </footer>
        </div>
    </form>
</body>
</html>

Open in new window

ASKER

stephanonline,

I'm also attaching my global.asax code as well.

<%@ Application Language="C#" %>
<%@ Import Namespace="ShapeUpReporting_12_13" %>
<%@ Import Namespace="System.Web.Optimization" %>

<script runat="server">

    void Application_Start(object sender, EventArgs e)
    {
        // Code that runs on application startup
        BundleTable.EnableOptimizations = true;
        
        BundleConfig.RegisterBundles(BundleTable.Bundles);
        AuthConfig.RegisterOpenAuth();
    }
    
    void Application_End(object sender, EventArgs e)
    {
        //  Code that runs on application shutdown
    }

    void Application_Error(object sender, EventArgs e)
    {
        // Code that runs when an unhandled error occurs
    }

</script>

Open in new window

ASKER

Also, not sure if you need it but I'm also attaching my bundle.config code below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;

namespace ShapeUpReporting_12_13
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254726
        public static void RegisterBundles(BundleCollection bundles)
        {
            BundleTable.EnableOptimizations = true;

            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"));

             //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-*"));
        }
    }
}

Open in new window

Do you see a link and can you open it? Maybe is the location wrong.

You could also add a new config in your bundleconfig and use that identifier.

ASKER

Hi stephanonline,

Ok, I believe with your help I was able to get it working late last night. Please see what I had to do though in order to get it to work and please let me know if I need to make any changes or if what I have is ok to use for production use.

I'm attaching my bundle.config code below. Notice the lines that I had to comment out that were there by default and notice what I added.

    void Application_Start(object sender, EventArgs e)
    {
        // Code that runs on application startup
        BundleTable.EnableOptimizations = true;

        BundleTable.Bundles.Add(new StyleBundle("~/bundle/css")
            .Include("~/Content/css/main.css")
            .Include("~/Content/css/ie8.css")
            .Include("~/Content/css/jquery-ui-1.8.22.custom.css"));

        BundleTable.Bundles.Add(new StyleBundle("~/bundle/js")
            .Include("~/Scripts/js/modernizr-2.6.1.min.js")
            .Include("~/Scripts/js/jquery-1.7.2.js")
            .Include("~/Scripts/js/jquery-ui-1.8.22.custom.js")
            .Include("~/Scripts/js/plugins.js")
            .Include("~/Scripts/js/main.js"));
        
        //BundleConfig.RegisterBundles(BundleTable.Bundles);
        //AuthConfig.RegisterOpenAuth();
    }

Open in new window

I'm attaching the HTML Markup below.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Reporting System - Home</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="SHORTCUT ICON" href="img/eup.ico" type="image/x-icon" />

    <%: Styles.Render("~/bundle/css") %> 
</head>
<body>
    <form id="form1" runat="server">
        <div id="page">
            <header>
                <img src="img/logo-orange.png" alt="Logo" />
                <nav>
                    <ul>
                        <li><a href="index.aspx">Home</a></li>
                        <li><a href="information/index.aspx">Information</a></li>
                        <li class="no-border"><a href="contact/index.aspx">Contact</a></li>
                        <li class="rgt">
                            <asp:Label ID="lblFullNameSession" runat="server" CssClass="rgtlabel"></asp:Label><asp:LinkButton ID="lb_logout" OnClick="lb_logout_Click" runat="server">logout</asp:LinkButton></li>
                    </ul>
                </nav>
            </header>

            <article>
                <h1>Home</h1>
                <p>Reporting System. Please use the links to the left to start the reporting process.</p>
                <p>Thank you,
                    <br />
                    <i>The Shape-Up Team</i></p>
            </article>

            <section>
                <h2>Start Here</h2>
                <ul>
                    <li><a href="newuser/index.aspx">New User</a></li>
                    <li><a href="application/index.aspx">Login</a></li>
                </ul>
            </section>

            <footer>
                <%--<p><a href="#">Privacy Policy</a></p>--%>
            </footer>
        </div>
    </form>

    <!-- JavaScript at the bottom for fast page loading -->
    <%: Scripts.Render("~/bundle/js") %>

</body>
</html>

Open in new window

Does everything look ok to you?

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Hi stephanonline,

Ok, i'm a little confused on what you mean about your post. I never made changes to the actual bundle.config file. I only added the lines of code mentioned above to the global.asax page and modified the HTML works fine. But, I saw your last post above and thought that it would make more sense to modify the bundle.config file and not add the code in the global.asax page. So I did that and now it's not loading my css/js. Please see what I did to the bundle.config file below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;

namespace ShapeUpReporting_12_13
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254726
        public static void RegisterBundles(BundleCollection bundles)
        {
            BundleTable.EnableOptimizations = true;

            BundleTable.Bundles.Add(new StyleBundle("~/bundle/css")
            .Include("~/Content/css/main.css, ~/Content/css/ie8.css, ~/Content/css/jquery-ui-1.8.22.custom.css,"));

            BundleTable.Bundles.Add(new StyleBundle("~/bundle/js")
            .Include("~/Scripts/js/modernizr-2.6.1.min.js, ~/Scripts/js/jquery-1.7.2.js, ~/Scripts/js/jquery-ui-1.8.22.custom.js, ~/Scripts/js/plugins.js, ~/Scripts/js/main.js"));


            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"));

             //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-*"));
        }
    }
}

Open in new window

You did enable the following line on the global.asax?
BundleConfig.RegisterBundles(BundleTable.Bundles);

ASKER

Yes, I removed what I had before and added it back. Please see my current global.asax code below.

<%@ Application Language="C#" %>
<%@ Import Namespace="ShapeUpReporting_12_13" %>
<%@ Import Namespace="System.Web.Optimization" %>

<script runat="server">

    void Application_Start(object sender, EventArgs e)
    {        
        // Code that runs on application startup
        BundleConfig.RegisterBundles(BundleTable.Bundles);
        AuthConfig.RegisterOpenAuth();
    }
    
    void Application_End(object sender, EventArgs e)
    {
        //  Code that runs on application shutdown
    }

    void Application_Error(object sender, EventArgs e)
    {
        // Code that runs when an unhandled error occurs
    }

</script>

Open in new window

ASKER

Ok, I made the changes to the bundle.config file below and now it works. It appears that I can't add all css/js files within one include. Or did I do it wrong above?

            BundleTable.Bundles.Add(new StyleBundle("~/bundle/css")
            .Include("~/Content/css/main.css")
            .Include("~/Content/css/ie8.css")
            .Include("~/Content/css/jquery-ui-1.8.22.custom.css"));

            BundleTable.Bundles.Add(new StyleBundle("~/bundle/js")
                .Include("~/Scripts/js/modernizr-2.6.1.min.js")
                .Include("~/Scripts/js/jquery-1.7.2.js")
                .Include("~/Scripts/js/jquery-ui-1.8.22.custom.js")
                .Include("~/Scripts/js/plugins.js")
                .Include("~/Scripts/js/main.js"));

Open in new window

The code you first provided (see below) has an error:

BundleTable.Bundles.Add(new StyleBundle("~/bundle/css")
            .Include("~/Content/css/main.css, ~/Content/css/ie8.css, ~/Content/css/jquery-ui-1.8.22.custom.css,"));

Open in new window

You need to stringify each location like so:

BundleTable.Bundles.Add(new StyleBundle("~/bundle/css")
            .Include("~/Content/css/main.css", "~/Content/css/ie8.css", "~/Content/css/jquery-ui-1.8.22.custom.css"));

Open in new window

ASKER

Sorry, I saw what I was doing wrong. I changed my bundle.config file to the following below and now it works fine. Do I need to change anything else befor I go live? Also, do I need to have the othe bundle's there or can I remove/comment them out?

            BundleTable.Bundles.Add(new StyleBundle("~/bundle/css").Include(
                  "~/Content/css/main.css",
                  "~/Content/css/ie8.css",
                  "~/Content/css/jquery-ui-1.8.22.custom.css"));

            BundleTable.Bundles.Add(new StyleBundle("~/bundle/js").Include(
                  "~/Scripts/js/modernizr-2.6.1.min.js",
                  "~/Scripts/js/jquery-1.7.2.js",
                  "~/Scripts/js/jquery-ui-1.8.22.custom.js",
                  "~/Scripts/js/plugins.js",
                  "~/Scripts/js/main.js"));

Open in new window

You don't need to change things. If you don't use the other bundles, just remove them.

ASKER

Ok, I can even comment them out then? Also, is what I have ok to use now for production use?

Sure, why not

ASKER

Hi stephanonline,

I was just getting ready to close this post and I thought let me try it in production to make sure. When I did my css and js did not load. The only thing that I can think of is that I'm using SSL for the entire site and when I was testing it I was not using SSL.

It seems that SSL does not like the following below. Any idea how I can get it to work with SSL and the following below?

<%: Styles.Render("~/bundle/css") %>
<%: Scripts.Render("~/bundle/js") %>

ASKER

I also testing it on FF and Chrome and they display it fine. IE for some reason will not use the following tags I mentioned above when using SSL.

Give me a few minutes, i'm going to try reproducing this.

ASKER

Ok, I even tried using the following below which work fine in FF and Chrome but not IE8 or IE9. Very weird why IE was not load this.

<link href="bundle/css" rel="stylesheet" />
<script src="bundle/js"></script>

I cannot reproduce the issue at this time. Maybe you could create a separate project and repro the issue and if so. Send it?

ASKER

Well, I was playing around and if I add that site as a "Trusted Site" in the internet options -> security tab then it's fine. But if not then it does not display my page correctly. The other thing is that it displays fine in FF and Chrome without doing anything.

Is it a valid ssl? It could be that IE prevents loading if it could be insecure

ASKER

Yes, it's a valid SSL cert from GoDaddy.

ASKER

If I run the page locally it's fine. But if I run it in production with IE8 or IE9 with SSL then it does not work well. But it works fine in FF and Google Chrome.

Do you have a link or could you check if you enter the url directly?

ASKER

I have tried entering the URL manually and even running it on the server with IE8 and IE9 and no luck. I have tried entering http://subdomain.mydomain.com and https://subdomain.mydomain.com and still no luck with IE 8 or 9. But FF and chrome are fine.

Is it receiving a 404, 500....? This is pretty hard for me to guess what seems to be the problem.

ASKER

No, I'm not recieving any error numbers or error messages. It's just not loading my css and js. My layout is broken if I use SSL. If I don't use SSL then it's fine. If I test it with just the local IP on the destication server with SSL the site is fine. But if I use the DNS name then I get a page that now where the css and js are not supported.

What I mean is if you enter the URL directly like: https://subdomain.mydomain.com/bundles/css

If you open the Developers tools from IE open (F12) and on the profiler tab "Start profiling".
When you go to the page, what statuscode of the page is given back? a 404, 403, 401, 500 ?

ASKER

Ok, sorry. When I do that I get a 200 status code for CSS. But when I do that for js I get a status code of 404.

I have no clue what is going on. So you are saying that the CSS is rendered but the javascript is not.

I do see a few posts back from you that you are adding a StyleBundle for js files. maybe you could use Bundle instead of StyleBundle.

ASKER

Yes, I see that to. So I should use Bundle instead of StyleBundle. Or is there a ScriptBundle instead of StyleBundle

ASKER

Ok, I believe I got it workin to how it should be :)

I had to make the changes to the bundle for js as you had mentioned above. Please see what I changed it to and let me know if that is ok. Also, I came across something called the ResolveBundleURL() method. Please see the following link http://www.codeguru.com/csharp/.net/net_asp/using-bundling-and-minification-features-of-asp.net-4.5.htm for additional info. But do I need to implement that in my HTML markup or is that the same as I'm using now to call the js and css files?

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;

namespace ShapeUpReporting_12_13
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254726
        public static void RegisterBundles(BundleCollection bundles)
        {
            BundleTable.EnableOptimizations = true;

            BundleTable.Bundles.Add(new StyleBundle("~/bundle/css").Include(
                  "~/Content/css/main.css",
                  "~/Content/css/ie8.css",
                  "~/Content/css/jquery-ui-1.8.22.custom.css"));

            BundleTable.Bundles.Add(new ScriptBundle("~/bundle/js").Include(
                  "~/Scripts/js/modernizr-2.6.1.min.js",
                  "~/Scripts/js/jquery-1.7.2.js",
                  "~/Scripts/js/jquery-ui-1.8.22.custom.js",
                  "~/Scripts/js/plugins.js",
                  "~/Scripts/js/main.js"));

            //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"));

             //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-*"));
        }
    }
}

Open in new window

The ResolveBundleURL is when you just want to get the URL that is being generated and the Scripts.Render does thesame and renders with the correct syntax with. If it is working now, this should be fine.

ASKER

Hi stephanonline,

Ok, well I got everything to work. BUT discovered a bigger issue. Now when I make changes to any css file it's not taking effect on the pages. If I remove this line <%: Styles.Render("~/bundle/css") %> and then add this line <link href="../../css/main.css" rel="stylesheet" /> it's fine. But if I just use this line <%: Styles.Render("~/bundle/css") %> only then any changes I have to the css DONT take effect. Any idea how I can correct this?

ASKER

Hi stephanonline,

Are you able to determine why when I make changes to my css that they do not take effect? I have read somewhere that the way we are doing this is caches the site for a year. But not sure how to fix it.

I need to take a look on my machine. Im on my mobile ahead to home.

ASKER

Ok, I appreciate it.

ASKER

Also, when I upload my site to my production server it's not working with my js. If I navigate to http://subdomain.mydomain.com/bundles/js I get and error code 404.

I'm using IIS 7.5 and I tested it locally on my laptop using the same IIS and it's fine. But my production site is using SSL. That is the only difference I can think of. Does SSL do something to bundles such as what I'm tryhing to do?

For the caching part, did you see ?v=blablabla after the /bundles/js ?

And about the JS error, I thought we fixed this problem after we changed the StyleBundle To ScriptBundle?

ASKER

>> For the caching part, did you see ?v=blablabla after the /bundles/js ?

Yes, I do see that. If I make changes to the CSS then my changes do not take effect.

>> And about the JS error, I thought we fixed this problem after we changed the StyleBundle To ScriptBundle?

Well, I thouhgt it was fine but now that I uploaded everything to the intranet production server it's not running the scripts but it runs the css. I'm using SSL for the entire site and I'm guessing it's somehow blocking the scripts from running.

the ?v= should change value when changing files. Can you validate?

Is it only when using SSL or also on NON-SSL and you were saying that it was on IE only?

ASKER

>> the ?v= should change value when changing files. Can you validate?

I apologize, I was uploading the CSS file in the wrong directory.

>> Is it only when using SSL or also on NON-SSL and you were saying that it was on IE only?

It's only when using SSL and IE that I have the problem. FF is fine using SSL. If a user enters http they get redirected to use https. I also tested it with chrome and it's fine using chrome and SSL.

It's only when using SSL and IE that I have the problem. FF is fine using SSL. If a user enters http they get redirected to use https. I also tested it with chrome and it's fine using chrome and SSL.

Can you reproduce the issue by adding a self-signed certificate on your local IIS and run the application through ssl?

So that you have thesame sort of environment as on production?

ASKER

Ok, I took the SSL cert from my production server and applied it to my local IIS and when I ran the page in https it was fine. But the cert displayed a red label that said "certificate error" that the certificate was registered to a different sites address.

So I'm not sure why it's not working in IE on the production side but it is fine with FF and chrome. Very odd.

The only thing I can come up with is that the location is different than you see in Firefox or Chrome. Is the ?v= changing on the js files as well when you make changes?
If it only shows /bundle/js it could be that something is wrong with the ScriptBundle or the indentifier for the bundle.

ASKER

I have not needed to make changes to the js files. I only needed to make changes to the CSS files. Also, the js files have that long string of text to it. Like I said before it runs on my laptop and even on the server without issues until I use ssl is when I have problems on the server

Maybe something is blocking the request for js file for being insecure (these are all just thoughts what it could be). For now I dont have any suggestions as far you provided the info. I think the only way I maybe could help you is to see the real deal (prod url). I`ll keep you posted if I have more ideas.

When you have any privacy reasons you also could mail it to stephan[at]stephanonline[dot]nl

ASKER

Hi stephanonline,

I understand, I can't figure out why it's not loading rendering correctly myself. Could you take a look at my BundleConfig.cs just to verify it's correct? My CSS is fine now and when I upload changes it's also fine.

Also, if I view the site using FF or Chrome then it displays as needed. If I view the page in IE9 using my VPN connection from home that's fine. But if I'm at the office using IE9 it sucks :(

Well, if I figure it out I will definetly let you know what I figured out. If you find a solution or have an idea I would appreciate it.

By the way, I saw your personal site and it's nice. It's also cool to work with people in the same field in another country. Congrats on all that you have achieved, keep it up...

ASKER

Hi stephanonline,

Ok, did some more testing and the only thing that I can think of is that it's not calling the modernizer.js file. That is needed for HTML5 which I'm using and I believe that FF and Chrome support those by default but IE7 and IE8 do not. But it seems that IE9 does. Any way, I meant to attach my BundleConfig.cs file above and forgot, please see below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Optimization;

namespace ShapeUpReporting_12_13
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254726
        public static void RegisterBundles(BundleCollection bundles)
        {
            BundleTable.EnableOptimizations = true;

            BundleTable.Bundles.Add(new StyleBundle("~/bundle/css").Include(
                  "~/Content/css/main.css",
                  "~/Content/css/ie8.css",
                  "~/Content/css/jquery-ui-1.8.22.custom.css"));

            BundleTable.Bundles.Add(new ScriptBundle("~/bundle/js").Include(
                  "~/Scripts/js/modernizr-2.6.1.min.js",
                  "~/Scripts/js/jquery-1.7.2.js",
                  "~/Scripts/js/jquery-ui-1.8.22.custom.js",
                  "~/Scripts/js/jquery-ui-1.8.20.min.js",
                  "~/Scripts/js/plugins.js",
                  "~/Scripts/js/main.js"));

            //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"));

            //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-*"));
        }
    }
}

Open in new window

ASKER

Ok, last but not least. I went to https://subdomain.mydomain.org/bundle/js and I was prompted to save the file called js. This only happens in IE8 and IE9 on and off. FF and Chrome do NOT do this.

By the way, I saw your personal site and it's nice. It's also cool to work with people in the same field in another country. Congrats on all that you have achieved, keep it up...

Thanks, if you have anything that cannot be done by EE, you could give me a message and may look into it.

From the looks of things on the BundleConfig.cs, it looks fine. I copied your code and used it in a temporary project and the only thing when it breaks is that it could not locate the files and then it gives me an empty result, there is no 404 and the ?v= is empty.

Are there any particular rules active on your office since it works through VPN?

ASKER

I checked with the Network Engineers this morning and they said there are no rules of any sort different from VPN to being in the office. I actuall called one of them last night and he had issues viewing it but I did not.

If I navigate to https://subdomain.mydomain.org/bundle/js I'm prompted to open the file on the server. If I do the same thing to css it opens the css. Could it be that the server is not executing the contents of the js folder for some reason?

ASKER

Ok, well, I found away around it for IE. If I add the site as a Trusted Site then it displays fine. If I remove it from Trusted Sites then id does not load the js.

What issue are you still having - the comments are confusing.