Skip to content
This repository

A resource loader for ASP.NET MVC 3 applications. Support for script/css concatenation, minification and CDN support.

branch: master
README.markdown

Mvc.ResourceLoader

This project has been discontinued and re-developed as an IIS module. See https://github.com/vincpa/RxLoader

Gloals

Provide a library that gives developers flexibility when loading multiple resources (JavaScript/CSS) in to pages rendered by the ASP.NET MVC framework that is extendable.

Getting started

  • Install Mvc.ResourceLoader via the NuGet package manager.
  • Fork the code on GitHub and have a play.
  • Get involved in the project by by grabbing a task from the Trello board

Quick Start

Basic registration 1 (within Global.asax.cs)

    Resources.Css()
             .RegisterResource("~/css/reset.css")
             .RegisterResource("~/css/site.css");
             .ForAllRequests();

    Resources.JavaScript()
             .RegisterResource("~/scripts/jquery.latest.js")
             .RegisterResource("~/scripts/jquery.ui.latest.js")
             .ForAllRequests();

Rendering the output within a view (_layout.cshtml, _layout.vbhtml) in a MVC application using default options.

    @Resources.Css().Render(); 
    @Resources.JavaScript().Render();

Rendered output:

    <link href="/css/reset.css" rel="stylesheet" type="text/css" />
    <link href="/css/site.css" rel="stylesheet" type="text/css" />
    <script src="/scripts/jquery.latest.js" type="text/javascript"></script>
    <script src="/scripts/jquery.ui.latest.js" type="text/javascript"></script>

Output options

  1. UseCdn - Content Delivery Network mode. Used in a production environment.
  2. MinifyInMemory - Local scripts are combined, minified and concatenated. The results are cached in memory.
  3. UsePreMinified - Will load scripts that have been previously minified and combine them with the output.
  4. None. Used during development.

Changing output options

Changing options can be done in code or configuration.

Configuration

    <mvc.resouceLoader renderingMode="minifyinmemory" />

Code

    Resources.Options.RenderingMode = Mvc.ResourceLoader.RenderingMode.MinifyInMemory;

Rendered output which combines both CSS files and both JavaScript files:

    <link href="2493838903_resource.axd" rel="stylesheet" type="text/css" />
    <script src="1040317454_resource.axd" type="text/javascript"></script>

Basic registration 2 - Groupings

You can register your resources in to logical groups. Groups are usually specific to a page or reusable across many pages and as such, will never be combined. For example, if the rendering mode is set to MinifyInMemory, then all resources in the same group will be combined.

    Resources.Css()
             .RegisterResourceGroup(new[] {
                new CssResource("~/css/reset.css"){
                    CdnPath="http://cdnserver.com/css/reset.css",
                    MinifiedPath="~/css/reset.min.css"
                },
                new CssResource("~/css/site.css"){
                    MinifiedPath="~/css/site.min.css"
                },
                new CssResource("~/css/mobile.css") {
                    MinifiedPath="~/css/mobile.min.css"
                }
            })
            .ForAllRequests();

    Resources.Css()
             .RegisterResource("~/css/ie7hacks.css")
             .WhenRequestUrlContains("/aboutus/");

    Resources.JavaScript()
             .RegisterResourceGroup(new[] {
                new JavaScriptResource("~/scripts/jquery.latest.js"){
                    CdnPath="http://cdnserver.com/jquery.latest.js"   
                },    
                new JavaScriptResource("~/scripts/jquery.ui.latest.js"){
                    CdnPath="http://cdnserver.com/jquery.ui.latest.js"   
                }
            })
            .ForAllRequests();

    Resources.JavaScript()
             .RegisterResourceGroup(new[] {
                new JavaScriptResource("~/scripts/jquery.plugins.js"){
                    MinifiedPath = "~/scripts/jquery.plugins.min.js"
                }
            })
            .WhenRequestUrlContains("/new-member-registration/");

Rendering the output within a view (_layout.cshtml, _layout.vbhtml) with default options.

    @Resources.Css().Render(); 
    @Resources.JavaScript().Render();

Rendered output (assuming the request Url is http://acmeworks.com/aboutus)

    <link href="/css/reset.css" rel="stylesheet" type="text/css" />
    <link href="/css/site.css" rel="stylesheet" type="text/css" />
    <link href="/css/mobile.css" rel="stylesheet" type="text/css" />
    <link href="/css/ie7hacks.css" rel="stylesheet" type="text/css" />
    <script src="/scripts/jquery.latest.js" type="text/javascript"></script>
    <script src="/scripts/jquery.ui.latest.js" type="text/javascript"></script>

If the rendering mode was set to UseCdn, then the rendered resources would look like:

    <link href="http://cdnserver.com/css/reset.css" rel="stylesheet" type="text/css" />
    <link href="/css/site.css" rel="stylesheet" type="text/css" />
    <link href="/css/mobile.css" rel="stylesheet" type="text/css" />
    <link href="/css/ie7hacks.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnserver.com/jquery.latest.js" type="text/javascript"></script>
    <script src="http://cdnserver.com/jquery.ui.latest.js" type="text/javascript"></script>

Using multiple modes

The best feature of this library is it's ability output resources based on a combination of running modes. For the example above, if the rendering mode is set to UseCdn,MinifyInMemory then the output would be:

    <link href="http://cdnserver.com/css/reset.css" rel="stylesheet" type="text/css" />
    <link href="2493838903_resource.axd" rel="stylesheet" type="text/css" />  <!--/css/site.css && /css/mobile.css-->
    <link href="3454456435_resource.axd" rel="stylesheet" type="text/css" />  <!--/css/ie7hacks.css-->
    <script src="http://cdnserver.com/jquery.latest.js" type="text/javascript"></script>
    <script src="http://cdnserver.com/jquery.ui.latest.js" type="text/javascript"></script>

This could help immensely in testing scenarios where you want to test CDN resources working along side resources local to your web server for performance or debugging purposes.

If the rendering mode is set to UseCdn,MinifyInMemory,UsePreMinified the resources output are:

    <link href="http://cdnserver.com/css/reset.css" rel="stylesheet" type="text/css" />
    <link href="/css/site.min.css" rel="stylesheet" type="text/css" />
    <link href="/css/mobile.min.css" rel="stylesheet" type="text/css" />
    <link href="3454456435_resource.axd" rel="stylesheet" type="text/css" />  <!--/css/ie7hacks.css-->
    <script src="http://cdnserver.com/jquery.latest.js" type="text/javascript"></script>
    <script src="http://cdnserver.com/jquery.ui.latest.js" type="text/javascript"></script>

Even though reset.css has a local pre-minified and CDN version registered, the CDN version is output instead. CDN registered resources have the highest priority. Pre-minified resources have the next highest priority.

Variables

Variables can be declared within configuration or code. Varialbes might be used to specify directories, attributes or anything else you can think of. Take the following example where we register a variable that represents our base JavaScript directory and a few custom attributes.

<mvc.resouceLoader renderingMode="none">
    <variables>
        <variable name="jsDir" value="/website1/scripts/" />
        <variable name="cdnServer" value="http://cdnserver.com/" />
        <variable name="attr1" value="data-attribute" />
        <variable name="attrVal1" value="foobar" />
    </variables>
</mvc.resouceLoader>

Registering our JavaScript file:

Resources.JavaScript()
             .RegisterResourceGroup(new[] {
                new JavaScriptResource("{jsDir}jquery.plugins.js"){
                    MinifiedPath = "{jsDir}jquery.plugins.min.js",
                    CdnPath = "{cdnServer}jquery.plugins.min.js",
                    Attributes = {
                         { "charset", "utf8" },
                         { "{attr1}", "{attrVal1}" }
                     }
                }
            })
            .ForAllRequests();

Rendered output:

    <script src="/website1/scripts/jquery.plugins.js" type="text/javascript" charset="utf8" data-attribute="foobar"></script>

See the Wiki for more information. Please don't hesitate to improve the quality of the documentation, everyone benefits.

Something went wrong with that request. Please try again.