How to use javascript(js file) in Orchard CMS

Question

Can any one tell me please how to use js file in Orchard CMS? I added it to Layout.cshtml page as Script.include("jquery.js").

Glottal

Answer 1

You can do it twofold.

First approach is just like mdm described:

1. Create your own implementation of IResourceManifestProvider interface (take a look at Orchard source - it's been implemented in many modules), implement BuildManifests(ResourceManifestBuilder builder) method and create a named resource for a given .js file
2. Use @{ Script.Require("[your resource name]"); } in your Razor view file (.cshtml) to include that script.

This is a preferred solution if you have many script files, possibly with dependencies between them. It allows you to specify the dependencies for each script file and make Orchard take care of the rest (so when you reference a given resource, all dependent ones would also be automatically referenced in the proper order).

The second, simpler approach is to directly reference the .js script file in your .cshtml file, without creating a named resource. It's useful if you'd like to quickly add a reference to a single script. Like this (example taken from Orchard.Web\Core\Shapes\Views\Document.cshtml):

@{ Script.Include("html5.js").AtLocation(ResourceLocation.Head); }

Paralytic

You can see a good example in \Orchard.Web\Modules\Orchard.Tags\ResourceManifest.cs in which it defines both a style and a script. – Fricandeau

How would you do this if the page was created through the Orchard CMS admin function? In this case, there is no Razor view file (is there)? – Dharana

Answer 2

If you have the Orchard.jQuery module installed and enabled, then at the top of your view use:

Script.Require("jQuery")

Have a look at the ResourceManifest class in the Orchard.jQuery project (should be somewhere in your Orchard solution file), there you can see all the different jQuery modules you can include using this syntax (e.g. jQueryUI_Core, jQueryUI_Tabs, etc)

E.g.

 manifest.DefineScript("jQueryUI").SetUrl("jquery-ui.min.js", "jquery-ui.js").SetVersion("1.9.2").SetDependencies("jQuery")
                .SetCdn("//ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js", "//ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js", true);

Chrissy

Answer 3

It's kinda cheating but you can just add this to the layout or document file.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>

Lobe

cheating yes, but best to do it through Script.Include(""); as Orchard will only load one if many are referenced through different Views. – Getter

You can run into problems doing this type of thing. Say for example your test environment does not have access to the internet. You really should have everything you need included in your solution. – Murry

Answer 4

To have a good example look for the module ContentPicker. This comes with default Orchard source code. It shows how you can use Script.Require("MyScript"). JQuery module itself is a good example. This module also comes with default source code.

Note: I am referring to Orchard 1.7 and later versions

Krp