Documentation

Scripts

To correctly sort your script files, Cassette looks for XML-style reference comments. (These are what Visual Studio uses to give you intellisense.) The idea is that if File-B references File-A then File-A is included the HTML before File-B, because File-B depends on File-A.

Here is an example JavaScript file with two references:

/// <reference path="tools.js"/>
/// <reference path="example.js"/>

function test() {
    return tools.otherFunction();
}

The path is relative to the current file. So path="tools.js" will look for a file called tools.js in the same directory as the file making the reference.

A script can also reference a file in another bundle. For example:

/// <reference path="../libs/jquery.js"/>

Alternatively, the path can be "absolute" from the application's root directory.

/// <reference path="~/scripts/libs/jquery.js"/>

Bundle Referencing Shortcut

You can reference an entire bundle, rather than a specific file from it. Just set the reference path to be the bundle's directory. For example:

/// <reference path="~/scripts/lib"/>

Using scripts in-page

Use the Bundles.Scripts helper in your view pages to reference. Paths are always relative to the application root directory.

@{
  // Reference path can be to a specific file
  Bundles.Reference("Scripts/app/page.js");
  // Or it can just be a bundle directory
  Bundles.Reference("Scripts/other");
  // An external URL can also be referenced
  Bundles.Reference("http://platform.twitter.com/widgets.js");
}
<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  @Bundles.RenderScripts()
</head>
<body>
  ...
</body>
</html>

The Bundles class is defined in the Cassette.Views namespace. So make sure you've referenced this in ~\Views\Web.config. The Cassette.Aspnet nuget package does this for you.

The call to Bundles.RenderScripts() generates <script> tags to include the referenced scripts.

Bundle render locations

Not all HTML <script> tags have to be generated in the same place. For example, some scripts only progressively enhance the page and can be left until the very end to be included. Others may need to be in the <head>.

The helper methods are overloaded to accept a location argument.

@{
  Bundles.Reference("Scripts/app");
  Bundles.Reference("http://platform.twitter.com/widgets.js", "body");
  Bundles.Reference("https://apis.google.com/js/plusone.js", "body");
}
<!DOCTYPE html>
<html>
<head>
  <title>Web App</title>
  @Bundles.RenderScripts()
</head>
<body>
  ...
  @Bundles.RenderScripts("body")
</body>
</html>

When location not given it defaults to the empty string. So in the above example, the Scripts/app scripts will be in <head>. The twitter and Google scripts are rendered just before </body>