Documentation

Getting Started

PM> Install-Package Cassette.Aspnet

Add the Cassette.Aspnet nuget package to your ASP.NET 4.0 application. Cassette works with both WebForms and MVC projects. If using WebForms, please read the WebForms Set Up

The examples here will use Razor views, but aspx, spark, etc, will also work.

In your view page, reference scripts and stylesheets using Cassette's Bundles helper class.

@{
    Bundles.Reference("Scripts/jquery.js");
    Bundles.Reference("Scripts/page.js");
    Bundles.Reference("Styles/page.css");
}
<!DOCTYPE html>
    <html>
...

Reference paths are relative to the application root directory, not the page.

Next, we need say where to render the HTML required to include these scripts and stylesheets in the page. Use the Render methods to insert the HTML into the page.

@{
    Bundles.Reference("Scripts/jquery.js");
    Bundles.Reference("Scripts/page.js");
    Bundles.Reference("Styles/page.css");
}
<!DOCTYPE html>
<html>
<head>
    <title>Web App</title>
    @Bundles.RenderStylesheets()
</head>
<body>
    ...
    @Bundles.RenderScripts()
</body>
</html>

Debug vs Production mode

Run your application and try toggling debug mode in Web.config.

<configuration>
    ...
    <system.web>
        <compilation debug="false">
            ...
        </compilation>
    </system.web>
    ...
</configuration>

When debug is true, Cassette will use debug-friendly assets.

When debug is false, Cassette will use minified, compressed, cached, versioned assets.

Master/layout Pages

If you are using master/layout pages then references can be in the content page and render calls in the master/layout. You can even reference assets from a partial view and they will be rendered in the layout.

For example, here's a layout page that declares one reference:

@{
    Bundles.Reference("Scripts/jquery.js");
}
<!DOCTYPE html>
<html>
<head>
    <title>Web App</title>
    @Bundles.RenderStylesheets()
</head>
<body>
    @RenderBody()
    @Bundles.RenderScripts()
</body>
</html>

And then the content page adds some more:

@{
    Layout = "~/Views/Shared/Layout.cshtml";
    Bundles.Reference("Scripts/page.js");
    Bundles.Reference("Styles/page.css");
}
<p>My page</p>

All the required assets get included into the final page output, in the location of the Render calls.

<!DOCTYPE html>
<html>
<head>
    <title>Web App</title>
    <link href="/Styles/page.css?6df23ad2" type="text/css" rel="stylesheet"/>
</head>
<body>
    <p>My page</p>
    <script src="/Scripts/jquery.js?a4babad4b" type="text/javascript"></script>
    <script src="/Scripts/page.js?1b5f3ac80" type="text/javascript"></script>
</body>
</html>

Referencing between files

We've referenced both jquery.js and page.js. The order matters because page.js depends on jquery.js. So let's make this explicit. In page.js, we can add a reference comment:

/// <reference path="jquery.js"/>
$(function() {
    ...
});

Cassette parses the reference comments and then inserts all the required assets into the page. Therefore we can delete the explicit jQuery reference from the page.

@{
    Bundles.Reference("Scripts/jquery.js");
    Bundles.Reference("Scripts/page.js");
    Bundles.Reference("Styles/page.css");
}
<!DOCTYPE html>
    <html>
...

An added benefit of using reference comments is that Visual Studio will provide IntelliSense for the functions and objects exposed by the referenced files.

Enough with the basics!

This introduction has only scratched the surface of what Cassette can do. Including each script individually into a page is bad for production performance. Let's learn how to configure Cassette to concatenate related scripts...

Read about Assets and Bundles »

Questions?

Please visit the Cassette Google Group to ask for help.