Including Javascript and CSS files on Orchard Admin pages

Written by | Orchard

Recently while working on an Orchard module I needed to include some script and CSS files on a custom admin page.  I initially searched Google to see how to do this but the documentation/information out there seemed a little sparse.   I ended up just digging into other modules that used similar admin pages to see how they did it.  I thought I’d share my findings – it’s not that complicated but hopefully this post will save you a few minutes of searching or troubleshooting.  This method should also work for public facing pages as well.

To include scripts or styles from your plugin, add a ResourceManifest.cs class to the root of your module project.  Inside this plugin you define the scripts and styles you need.  In my case it was as simple as this:

using Orchard.UI.Resources;
 
namespace BSSIAdvertise {
    public class ResourceManifest : IResourceManifestProvider {
        public void BuildManifests(ResourceManifestBuilder builder)
        {
            var manifest = builder.Add();
            manifest.DefineScript("Advertise").SetUrl("Advertise.js").SetDependencies("jQuery");
        }
    }
}

jQuery is already registered as a script with Orchard, and by setting it as a depency here Orchard will guarantee that it is loaded before your script. To add a stylesheet, just use DefineStyle instead. Lastly you just have to include the script in one of your Razor views, like so:

@{
    Script.Require("Advertise");
}

You reference the script by the name you assigned it in the manifest rather than by its file name.

Hope this helps.

Last modified: June 24, 2014