Resources (OrchardCore.Resources)Link

PurposeLink

The Resources module provides commonly used resources like JavaScript libraries and CSS files. It also enables the Resource Manager so any module can describe what resources are necessary on any page or component. When the full page is rendered all the required resources are computed and custom <script> and <link> tags are rendered accordingly. You can also regsiter custom <meta> tags.

Named ResourcesLink

Named resources are well-known scripts and stylesheets that are described in a module. They have a name, a type (script, stylesheet) and optionally a version. The OrchardCore.Resources modules provides some commonly used ones:

Name Type Versions Dependencies
jQuery Script 1.12.4 -
jQuery Script 2.2.4 -
jQuery Script 3.1.1 -
Bootstrap Script 3.3.7, 4.0.0 (4.0.0-alpha.5) jQuery
Bootstrap Style 3.3.7, 4.0.0 (4.0.0-alpha.5) -
jquery-ui Script 1.12.1 jQuery
font-awesome Style 4.7.0 -

UsageLink

There are two ways to invoke a resource: either by using the IResourceManager API or a Tag Helper. The API is necessary if you need to inject a resource from code. However it is recommended to use a Tag Helper when inside a view.

Using the APILink

From your module, add a reference to the OrchardCore.Resources.Abstractions project. From the class you want to use the API in, inject the OrchardCore.ResourceManagement.IResourceManager interface.

Register a named resourceLink

var settings = resourceManager.RegisterResource("script", "bootstrap")

The result of this call is an object of type RequireSettings that is used to pass more parameters to the required resource.

Place the resource at the beginning of the HTML documentLink
settings.AtHead();
Place the resource at the end of the HTML documentLink
settings.AtFoot();
Set the version to useLink
settings.UseVersion("3.3");

This will use the latest availabe version between 3.3 and 3.4. If the version is not available an exception is thrown.

Register custom scriptLink

At the beginning of the HTML document:

resourceManager.RegisterHeadScript("<script>alert('Hello')</script>');

At the end of the HTML document:

resourceManager.RegisterFootScript("<script>alert('Hello')</script>');

Add custom meta tagLink

resourceManager.RegisterMeta(new MetaEntry { Content = "Orchard", Name = "generator" });

You can also add more content to an existing tag like this:

resourceManager.AppendMeta(new MetaEntry { Name = "keywords", Content = "orchard" }, ",");

Using the Tag HelpersLink

From your module, in the _ViewImports.cshtml or your view, add @addTagHelper *, OrchardCore.ResourceManagement.

Register a named resourceLink

This example registers the script named bootstrap and all its dependencies (jquery).

<script asp-name="bootstrap"></script>

And for a stylesheet:

<style asp-name="bootstrap"></style>
Force the CDNLink

You can force a resource to be used from its CDN. By default the behavior is defined by configuration.

<script asp-name="bootstrap" use-cdn="true"></script>
Use specific versionLink

This example will use the latest available version with a Major version of 3, like 3.3.7. If the version is not specified the greatest one is always used.

<script asp-name="bootstrap" version="3"></script>
Specify locationLink

By default all scripts are rendered in the footer. You can override it like this:

<script asp-name="bootstrap" at="Head"></script>

Styles on the opposite are always injected in the header section of the HTML document.

Inline definitionLink

You can declare a new resource directly from a view, and it will be injected only once even if the view is called multiple time.

<script asp-name="foo" asp-src="foo.min.js?v=1.0" debug-src="foo.js?v=1.0" depends-on="baz:1.0" version="1.0"></script>

In this example we also define a dependency on the script named baz with the version 1.0. If the version was not set the one with the highest number would be used.

You can also do the same for a stylesheet:

<style asp-src="bar.min.css" debug-src="bar.css"></style>