Telerik Extensions for ASP.NET MVC
Contents

Web assets represent the JavaScript and CSS files which you are using in your ASP.NET MVC application.

Telerik Extensions for ASP.NET MVC helps you manage your web assets easily by providing the following features:

Combination

Combining web assets allows you to decrease the total number of requests made to the web server, in order to improve the page loading time.
Important
Combined scripts are served by the WebAssetHttpHandler, so it must be registered in the web.config of your ASP.NET MVC application.

Grouping

Arranging web assets in groups will combine related assets in a single request. This is beneficial if you have web assets required by all pages, and some other assets required by a specific page. The common JavaScript files (such as jQuery) are served in all pages and can be groupped together. Page-specific JavaScript files can be also groupped together (but not with the site-specific ones).

Consider the following example:

Standalone JavaScript files
http://example.com/listhttp://example.com/view/3http://example.com/edit/3
  1. jquery-1.4.2.js
  2. jquery-ui-1.7.2.custom.js
  3. jquery.template.js
  4. jquery.pagination.js
  5. Utility.js
  6. Search.js
  7. List.js
  1. jquery-1.4.2.js
  2. jquery-ui-1.7.2.custom.js
  3. jquery.template.js
  4. jquery.pagination.js
  5. Utility.js
  6. View.js
  1. jquery-1.4.2.js
  2. jquery-ui-1.7.2.custom.js
  3. jquery.validate.js
  4. jquery.form.js
  5. jqery.watermark.js
  6. Utility.js
  7. Edit.js

We can arrange those scripts in the following groups:

jQueryBase
  • jquery-1.4.2.js
  • jquery-ui 1.7.2.custom.js
ListView
  • jquery.template.js
  • jquery.pagination.js
Form
  • jquery.validate.js
  • jquery.form.js
  • jquery.watermark.js
ListLocal
  • Utility.js
  • Search.js
  • List.js
ViewLocal
  • Utility.js
  • View.js
EditLocal
  • Utility.js
  • Edit.js

Now the scripts will be output like this:

Groupped and combined JavaScript files
http://example.com/listhttp://example.com/view/3http://example.com/edit/3
  1. jQueryBase
  2. ListView
  3. ListLocal
  1. jQueryBase
  2. ListView
  3. ViewLocal
  1. jQueryBase
  2. Form
  3. EditLocal

The benefits of grouping and combining over using individual files or a single combined file are:

  1. Sending less requests to the web server (as the files are now grouped and combined).
  2. Not downloading the same files between page visits (as when a single combined file is used and there are different components on each page).
  3. Downloading only the files that are required for the current page.

Compression

Telerik Extensions for ASP.NET MVC web asset support allows you to compress your JavaScript and CSS files. Compressed web assets will save traffic bandwidth and speed up page loading time.
Important
Compression works only for combined web assets (or asset groups), because it requires the HTTP handler which combines web assets.
Note
Most modern browsers support compression. The only notable exception is Internet Explorer 6.0 - some older minor versions do not properly support compressed JavaScript. As a result, the web asset HTTP handler will not serve compressed output to Internet Explorer 6.

Caching

Telerik Extensions for ASP.NET MVC web asset support allows you to configure the time duration for which the browser should cache the files.
Important
Caching works only for combined web assets (or asset groups), because it requires the HTTP handler, which combines web assets, to output the HTTP caching headers.

Content Delivery Network Support

Content Delivery Networks (CDN) improve the overal performance and latency of a web site by hosting commonly used static resources (JavaScript, CSS and images). Telerik Extensions for ASP.NET MVC web asset support allows you to transparently use CDN for your web assets. Once your ASP.NET MVC application is ready, you can upload a web asset group to a CDN provider of your choice and then enable CDN support for it. Here is how easy is that:

CopyC#
<%= Html.Telerik().ScriptRegistrar()
    .Scripts(script => script.AddGroup( "jQueryBase", group => 
        group.Add("~/Scripts/jquery-1.4.2.js")
            .Add("~/Scripts/jquery-ui-1.7.2.custom.js")
            .ContentDeliveryNetworkPath("http://mycdn.com/jQueryBase.js")
    )
%>
Important
If CDN support is enabled, then combination, compression and caching settings of the asset group will not be taken into account by the ScriptRegistrar. The CDN provider will control those settings.

See Also