• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2647
  • Last Modified:

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.
0
asp_net2
Asked:
asp_net2
  • 36
  • 24
  • 2
1 Solution
 
asp_net2Author Commented:
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();
    }
0
 
StephanLead Software EngineerCommented:
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")
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
asp_net2Author Commented:
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.
0
 
StephanLead Software EngineerCommented:
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
0
 
asp_net2Author Commented:
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...
0
 
asp_net2Author Commented:
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

0
 
asp_net2Author Commented:
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

0
 
asp_net2Author Commented:
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

0
 
StephanLead Software EngineerCommented:
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.
0
 
asp_net2Author Commented:
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?
0
 
StephanLead Software EngineerCommented:
Hi,

This should work. According to your code you are saying:

If I reference ~/bundle/css on my page, the following files needs to be merged:

~/Content/css/main.css
~/Content/css/ie8.css
~/Content/css/jquery-ui-1.8.22.custom.css

Instead of using .Include(file).Include(file2).Include(file3)... etc..
You can do Include(file, file2, file3....)

The BundleConfig class is only a separation from the global.asax and the global.asax is calling the register method.

You can move the below code inside your BundleConfig class

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


And enable the code you have commented out.
0
 
asp_net2Author Commented:
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

0
 
StephanLead Software EngineerCommented:
You did enable the following line on the global.asax?
BundleConfig.RegisterBundles(BundleTable.Bundles);
0
 
asp_net2Author Commented:
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

0
 
asp_net2Author Commented:
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

0
 
StephanLead Software EngineerCommented:
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

0
 
asp_net2Author Commented:
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

0
 
StephanLead Software EngineerCommented:
You don't need to change things. If you don't use the other bundles, just remove them.
0
 
asp_net2Author Commented:
Ok, I can even comment them out then? Also, is what I have ok to use now for production use?
0
 
StephanLead Software EngineerCommented:
Sure, why not
0
 
asp_net2Author Commented:
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") %>
0
 
asp_net2Author Commented:
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.
0
 
StephanLead Software EngineerCommented:
Give me a few minutes, i'm going to try reproducing this.
0
 
asp_net2Author Commented:
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>
0
 
StephanLead Software EngineerCommented:
I cannot reproduce the issue at this time. Maybe you could create a separate project and repro the issue and if so. Send it?
0
 
asp_net2Author Commented:
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.
0
 
StephanLead Software EngineerCommented:
Is it a valid ssl? It could be that IE prevents loading if it could be insecure
0
 
asp_net2Author Commented:
Yes, it's a valid SSL cert from GoDaddy.
0
 
asp_net2Author Commented:
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.
0
 
StephanLead Software EngineerCommented:
Do you have a link or could you check if you enter the url directly?
0
 
asp_net2Author Commented:
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.
0
 
StephanLead Software EngineerCommented:
Is it receiving a 404, 500....? This is pretty hard for me to guess what seems to be the problem.
0
 
asp_net2Author Commented:
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.
0
 
StephanLead Software EngineerCommented:
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 ?
0
 
asp_net2Author Commented:
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.
0
 
StephanLead Software EngineerCommented:
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.
0
 
asp_net2Author Commented:
Yes, I see that to. So I should use Bundle instead of StyleBundle. Or is there a ScriptBundle instead of StyleBundle
0
 
asp_net2Author Commented:
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

0
 
StephanLead Software EngineerCommented:
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.
0
 
asp_net2Author Commented:
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?
0
 
asp_net2Author Commented:
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.
0
 
StephanLead Software EngineerCommented:
I need to take a look on my machine. Im on my mobile ahead to home.
0
 
asp_net2Author Commented:
Ok, I appreciate it.
0
 
asp_net2Author Commented:
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?
0
 
StephanLead Software EngineerCommented:
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?
0
 
asp_net2Author Commented:
>> 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.
0
 
StephanLead Software EngineerCommented:
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?
0
 
asp_net2Author Commented:
>> 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.
0
 
StephanLead Software EngineerCommented:
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?
0
 
asp_net2Author Commented:
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.
0
 
StephanLead Software EngineerCommented:
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.
0
 
asp_net2Author Commented:
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
0
 
StephanLead Software EngineerCommented:
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.
0
 
StephanLead Software EngineerCommented:
When you have any privacy reasons you also could mail it to stephan[at]stephanonline[dot]nl
0
 
asp_net2Author Commented:
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...
0
 
asp_net2Author Commented:
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

0
 
asp_net2Author Commented:
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.
0
 
StephanLead Software EngineerCommented:
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?
0
 
asp_net2Author Commented:
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?
0
 
asp_net2Author Commented:
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.
0
 
GaryCommented:
What issue are you still having - the comments are confusing.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 36
  • 24
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now