CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-4bundling-and-minification
amateur
amateur

Reputation: 44605

mvc bundling, one per view

I am working with mvc4 and exploring how bundling of css and javascript works. I have a question that I need assistance with.

For every page (view) I render I would like to just have one js and css file. This is a culmination of the multiple files that are required for that view. From what I have seen, I can create bundles of files but I did not see a way of creating a bundle for each view.

Could someone help me out with this, if it is possible to achieve what I outlined?

Upvotes: 3

Views: 1101

Answers (2)

RoyceBautista
RoyceBautista

Reputation: 100

What you need to do is go to Static>App_Start>BundleConfig.cs :

Bundle Config path

and then create a bundle for each view you have:

public class BundleConfig
{
    // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/GlobalScripts")
                            .Include("~/Static/Scripts/jquery-1.10.2.js"
                                    , "~/Static/Scripts/json2.js"
                                    , "~/Static/Scripts/jquery-ui-1.10.4.js"
                                    //, "~/Static/Scripts/jquery.layout-1.3.0.js"
                                    //, "~/Static/Scripts/jquery.layout.state.js"
                                    , "~/Static/Scripts/helper.mainlayout.js"));
    }
}

just keep adding your script path in .Include() for every javascript in the view and keep doing bundles.add(new ScriptBundle(<bundle path>)) for every view you have.

you will do the similar steps with CSS bundles, but instead of using ScripBundle you will use StyleBundle

To lessen the repetition of codes try creating a list of strings for every javascripts that are dependent to one another and do a union on them:

List<string> jqGridScripts = new List<string>
                             {"~/Static/Scripts/jquery.jqGrid.src.js"
                             , "~/Static/Scripts/i18n/grid.locale-en.js"
                             , "~/Static/Scripts/helper.jqgrid.js"};
List<string> jqStopwatch = new List<string> 
                             { "~/Static/Scripts/jquery.stopwatch.js" };

bundles.Add(new ScriptBundle("~/bundles/viewName")
                             .Include(jqGridScripts
                                     .Union(jqStopwatch).ToArray()));

Just remember that the order in which they appear on the array is the same order in which they will appear on the HTML or be bundled and minified.

Code in View:

@section scripts{
    @Scripts.Render("~/bundles/viewName");
}

Resultant Code in HTML

<script src="/WDCSS/bundles/viewName?v=T3IlBuvfGTiz62pwDuiPogFX1jQoxVC2tmp3K6wffBQ1"></script>

My Opinion

I don't really know if we should do this or not. For me I separate scripts that are used in all pages in a separate bundle so that it would be cached. and then create another bundle for the scripts used in a view. What I am trying to say is that we should achieve a balance between bundling, minification, and caching.

Upvotes: 1

Dmitry Efimenko
Dmitry Efimenko

Reputation: 11203

Be more specific with your question. Show us what you tried. You have to create each of the bundles manually. If you want a bundle to be used on a specific view, create such a bundle and specify in a view that you will use that bundle there just like you specify in a view that you will be using a css file there.

Upvotes: 1

Related Questions