?
Solved

ASP.NET 4.5 Bundling and Optimization

Posted on 2012-08-17
21
Medium Priority
?
1,995 Views
Last Modified: 2012-08-30
Hello Experts,

I'm creating a web application using ASP.NET 4.5, HTML5, and CSS3. I noticed the new feature for ASP.NET 4.5 called Bundling and Optimization and I have a question on how to use it properly.

My question is do you need to reference your javascript, css, modernizer and etc.. files within the actual page itself or does the Bundingling and Optimization handle that for you?

Please see my HTML markup below. Before using ASP.NET 4.5 Bunding and Optimization I made a reference to all my css, javascript, and modernizer files below. But not sure if I need to remove those entries in my HTML markup if it's handled automatically by Bundingling and Optimization.


<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![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">

  <link rel="stylesheet" href="css/main.css">

  <script src="Scripts/modernizr-2.5.3.min.js"></script>
</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="lblFullName" runat="server" Text="Hello, Guest" CssClass="rgtlabel"></asp:Label></li>
                    </ul>
                </nav>
            </header>
 
            <article>
                <h1>Home</h1>
                <p>Welcome to the Your Domain. Please use the links to the left to start the reporting process.</p>
                <p>Your content will go here.</p>
                <p>Thank you</p>
            </article>

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

            <footer>
                <p>&copy; 2012 Your Domain | <a href="#">Privacy Policy</a></p>
            </footer>
        </div>
    </form>

  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="Scripts/jquery-1.7.2.js"></script>
  <script src="Scripts/jquery-ui-1.8.22.custom.min.js"></script>

  <!-- scripts concatenated and minified via build script -->
  <script src="Scripts/plugins.js"></script>
  <script src="Scripts/script.js"></script>
  <!-- end scripts -->

</body>
</html>
0
Comment
Question by:asp_net2
  • 12
  • 7
19 Comments
 
LVL 84

Expert Comment

by:David Johnson, CD, MVP
ID: 38308412
have you viewed this video http://www.asp.net/vnext/overview/videos/bundling-and-optimization ??

and what specific questions do you have?
0
 
LVL 4

Author Comment

by:asp_net2
ID: 38311309
Hi ve3ofa,

Yes, I have seen that video.

The specific question I have is how do you add a new javascript file to a website using the bundling and optimization. Do I need to modify the packages.config file and or the BundleConfig.cs file to add the new javascript file to my web site.
0
 
LVL 84

Expert Comment

by:David Johnson, CD, MVP
ID: 38312047
The specific question I have is how do you add a new javascript file to a website using the bundling and optimization. Do I need to modify the packages.config file and or the BundleConfig.cs file to add the new javascript file to my web site.

no, it is supposed to check the contents of the various configured folders and update accordingly.
0
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!

 
LVL 4

Author Comment

by:asp_net2
ID: 38312099
Ok, so If I need to add extra .css or .js files then what folder do I need to put them in?
0
 
LVL 84

Expert Comment

by:David Johnson, CD, MVP
ID: 38313389
scripts in the scripts.js folder
css in the styles.css folder

as you set it up originally for bundling and optimization

if you are replacing a file best to give it a new name
0
 
LVL 4

Author Comment

by:asp_net2
ID: 38313430
Hi ve3ofa,

Ok, please see my following HTML markup below. Please notice that I have two .css files and multipe .js files at the bottom of the page that I'm referencing. Do I need to reference the .css and .js files in my markup or do I just need to put those files in the appropriate folders as you mention above?

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![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">

  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/jquery-ui-1.8.22.custom.css">

  <script src="Scripts/modernizr-2.5.3.min.js"></script>
</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="lblFullName" runat="server" Text="Hello, Guest" CssClass="rgtlabel"></asp:Label></li>
                    </ul>
                </nav>
            </header>
 
            <article>
                <h1>Home</h1>
                <p>Welcome to the Reporting System. Please use the links to the left to start the reporting process.</p>
                <p>Should you have any questions relative to completion of the program or its reporting requirements.</p>
            </article>

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

            <footer>
                <p>&copy; 2012  | <a href="#">Privacy Policy</a></p>
            </footer>
        </div>
    </form>

  <!-- JavaScript at the bottom for fast page loading -->

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
  <script src="Scripts/jquery-1.7.2.js"></script>
  <script src="Scripts/jquery-ui-1.8.22.custom.min.js"></script>


  <!-- scripts concatenated and minified via build script -->
  <script src="Scripts/plugins.js"></script>
  <script src="Scripts/script.js"></script>
  <!-- end scripts -->

</body>
</html>
0
 
LVL 84

Expert Comment

by:David Johnson, CD, MVP
ID: 38313566
That looks correct

<script src="Scripts/plugins.js"></script>
 <script src="Scripts/script.js"></script>

to check it out load up the webpage and use the web developer tools and check your requests
0
 
LVL 4

Author Comment

by:asp_net2
ID: 38314543
Hi ve3ofa,

I guess my question now is do I still need to make those references in my HTML markup or do I just need to put the .js files in the scripts folder without referencing them in the HTML markup.
0
 
LVL 84

Expert Comment

by:David Johnson, CD, MVP
ID: 38314778
if you don't reference them they won't get used.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 38326712
Hi ve3ofa,

Ok, but how can I reduce the overall page load speeds if I'm loading in multiple .css and .js files? I thought it would have been 1 request for .css even if I had more than two .css files and I thought it would have been 1 request for .js files even though I have 10 .js files.
0
 
LVL 84

Accepted Solution

by:
David Johnson, CD, MVP earned 1500 total points
ID: 38326968
if your css is in styles folder then
<link href="styles/css" rel="stylesheet">

if scripts are in scripts folder
<script src="scripts/js"</script>
0
 
LVL 4

Author Comment

by:asp_net2
ID: 38327857
Hi ve3ofa,

Ok, please bare with me. I'm attaching my HTML markup for my main page. Based on what you posted for post ID: 38326968 can you make the changes that I need assuming all .css is in a directory called css and all .js files are in a directory called Scripts.

I'm just a little confused on how the application knows which .js file and or which .css file to load when I execute my pages. As you can see now I'm referencing the actual .css and .js files that i need to use but not sure how the page knows which files to use if I use your method above.

Thanks in advance!!!


HTML Markup:

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

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![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">

  <link rel="stylesheet" href="css/main.css">

  <script src="Scripts/modernizr-2.5.3.js"></script>
</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>&nbsp;&nbsp;<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 Reporting System. Please use the links to the left to start the reporting process.</p>
                <p>Thank you,</p>
            </article>

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

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

  <!-- JavaScript at the bottom for fast page loading -->
  <script src="Scripts/jquery-1.7.2.js"></script>


  <!-- scripts concatenated and minified via build script -->
  <script src="Scripts/plugins.js"></script>
  <script src="Scripts/script.js"></script>
  <!-- end scripts -->

</body>
</html>
0
 
LVL 4

Author Comment

by:asp_net2
ID: 38336478
@ve3ofa

Are you still able to assist?
0
 
LVL 84

Expert Comment

by:David Johnson, CD, MVP
ID: 38339474
it just does it by adding the references for you.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 38345475
Hi ve3ofa,

I guess I'm confused on how to make a reference in my HTML markup to Modernizer, multiple css files with different names, and multiple .js files with different names. I obvioslly can't use anything like the following below.

What I was using for .js files:
<script src="Scripts/jquery-1.7.2.js"></script>

<script src="Scripts/plugins.js"></script>
<script src="Scripts/script.js"></script>

What can I change it to now assuming those .js files are in the Scripts folder:


What I was using for .css files:
<link rel="stylesheet" href="../../css/main.css">
<link rel="stylesheet" href="../../css/jquery-ui-1.8.22.custom.css">

What can I change it to now assuming those .css files are in a folder named css:
0
 
LVL 4

Author Comment

by:asp_net2
ID: 38345481
Also, do I need to make a reference anywhere in the budle.config, package.config files?
0
 
LVL 4

Author Comment

by:asp_net2
ID: 38345487
See my bundle.config code below:

    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254726
        public static void RegisterBundles(BundleCollection bundles)
        {
            // remove if error occurs
            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
 
LVL 4

Author Comment

by:asp_net2
ID: 38345492
<?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>

Open in new window

0
 
LVL 4

Author Comment

by:asp_net2
ID: 38345522
Below is my packages.config file.

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="AspNet.ScriptManager.jQuery" version="1.7.1" targetFramework="net45" />
  <package id="AspNet.ScriptManager.jQuery.UI.Combined" version="1.8.20" targetFramework="net45" />
  <package id="DotNetOpenAuth.AspNet" version="4.0.3.12153" targetFramework="net45" />
  <package id="DotNetOpenAuth.Core" version="4.0.3.12153" targetFramework="net45" />
  <package id="DotNetOpenAuth.OAuth.Consumer" version="4.0.3.12153" targetFramework="net45" />
  <package id="DotNetOpenAuth.OAuth.Core" version="4.0.3.12153" targetFramework="net45" />
  <package id="DotNetOpenAuth.OpenId.Core" version="4.0.3.12153" targetFramework="net45" />
  <package id="DotNetOpenAuth.OpenId.RelyingParty" version="4.0.3.12153" targetFramework="net45" />
  <package id="EntityFramework" version="5.0.0" targetFramework="net45" />
  <!--<package id="jQuery" version="1.7.1.1" targetFramework="net45" />-->
  <package id="jQuery" version="1.7.2" targetFramework="net45" />
  <package id="jQuery.UI.Combined" version="1.8.20.1" targetFramework="net45" />
  <package id="Microsoft.AspNet.Membership.OpenAuth" version="1.0.0" targetFramework="net45" />
  <package id="Microsoft.AspNet.Providers.Core" version="1.1" targetFramework="net45" />
  <package id="Microsoft.AspNet.Providers.LocalDB" version="1.1" targetFramework="net45" />
  <package id="Microsoft.AspNet.ScriptManager.MSAjax" version="4.5.6" targetFramework="net45" />
  <package id="Microsoft.AspNet.ScriptManager.WebForms" version="4.5.6" targetFramework="net45" />
  <package id="Microsoft.AspNet.Web.Optimization" version="1.0.0" targetFramework="net45" />
  <package id="Microsoft.AspNet.Web.Optimization.WebForms" version="1.0.0" targetFramework="net45" />
  <package id="Microsoft.Web.Infrastructure" version="1.0.0.0" targetFramework="net45" />
  <package id="Modernizr" version="2.5.3" targetFramework="net45" />
  <package id="WebGrease" version="1.1.0" targetFramework="net45" />
</packages>

Open in new window

0

Featured Post

Veeam and MySQL: How to Perform Backup & Recovery

MySQL and the MariaDB variant are among the most used databases in Linux environments, and many critical applications support their data on them. Watch this recorded webinar to find out how Veeam Backup & Replication allows you to get consistent backups of MySQL databases.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
Simulator games are perfect for generating sample realistic data streams, especially for learning data analysis. It is even useful for demoing offerings such as Azure stream analytics, PowerBI etc.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question