How to Include Multiple Javascript Files in .NET (Like they do in rails)

Question

I'm jealous of the rails guys. They can do this:

<%= javascript_include_tag "all_min" %>

... and I'm stuck doing this:

<script src="/public/javascript/jquery/jquery.js" type="text/javascript"></script>
<script src="/public/javascript/jquery/jquery.tablesorter.js" type="text/javascript"></script>
<script src="/public/javascript/jquery/jquery.tablehover.pack.js" type="text/javascript"></script>
<script src="/public/javascript/jquery/jquery.validate.js" type="text/javascript"></script>
<script src="/public/javascript/jquery/jquery.form.js" type="text/javascript"></script>
<script src="/public/javascript/jquery/application.js" type="text/javascript"></script>

Are there any libraries to compress, gzip and combine multiple js files? How about CSS files?

Answer 1

You can do this using an HTTP handler. Check out this blog post from Mads Kristensen:

Combine multiple stylesheets at runtime

Answer 2

Also have a look at this article on codeproject:
http://www.codeproject.com/KB/aspnet/HttpCombine.aspx

Answer 3

You can use a ScriptManager/ScriptManagerProxy control and define the scripts in the CompositeScript section/property. See MSDN reference.

<asp:ScriptManager runat="server">
    <CompositeScript>
        <Scripts>
            <asp:ScriptReference Path="~/public/javascript/jquery/jquery.js" />
            <asp:ScriptReference Path="~/public/javascript/jquery/jquery.tablesorter.js" />
            <asp:ScriptReference Path="~/public/javascript/jquery/jquery.tablehover.pack.js" />
            <asp:ScriptReference Path="~/public/javascript/jquery/jquery.validate.js" />
            <asp:ScriptReference Path="~/public/javascript/jquery/jquery.form.js" />
            <asp:ScriptReference Path="~/public/javascript/jquery/application.js" />
        </Scripts>
    </CompositeScript>
</asp:ScriptManager>

It doesn't necessarily clean up the markup any, but it does zip them together.

Answer 4

<%= javascript_include_tag "all_min" %>

That really has all the semantics of a classic asp function call, even if it's really ruby. In fact, not knowing any ruby I can still be pretty confident with the guess that this is just a function and "all_min" refers to a folder name that's being passed in as an argument.

Since the <%= %> bee-stings are just a short-cut for Response.Write in classic ASP, we can conclude that you ought to be able to build your own function that does essentially the same thing and returns a string with the relevant includes.

Answer 5

ScriptManager is under BSD licenece and this I dislike :(. You may see a very good alternative how this is implemented in KiGG's approach:KiGG

The idea behind is that the control allows you to join the files js from web config by separating them into categories(you enlist their names ) pretty simple yaeh. good luck.

Answer 6

A lot of solutions out there do this with an http handler that dynamically creates a crushed js or css file per a page is not a good idea. It is better to crush your entire sites js and css files into one file and rather serve that. This way the browser loads it once and its cached. All further requests just load from cache. Dynamically crushed js and css files create a file per page. So you might be re-serving the same css and js files for every page.

You can then let the web server serve the crushed css/js file. Most web server. IIS implements kernel mode caching, which is the fastest way to serve any static file.

If you want a performant, scalable solutions that works in web farms check out:

http://code.google.com/p/talifun-web/wiki/CrusherModule

Answer 7

That is a helper method in rails.

passing it :all will include the default protoype libaries.

ASP.net MVC tried to copy rails but you can never get the internal asthetics right.

My Advice:

Instead of copying everything good from open source just use the real stuff i.e. rails

Answer 8

Combres does bundling, versioning, minification and caching of JavaScript and CSS resources. It's very configurable and performant.

Answer 9

I recently found this tool SquishIt.

Grz, Kris.