How To Use Javascript(js File) In Orchard CMS

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').

Solution 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); }

Solution 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);

Solution 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>

Solution 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