JavaScript or jQuery

Topics: Administration, Core, General
Oct 16, 2014 at 5:02 AM
Can anyone please tell me that how can I implement any JavaScript or jQuery in any of my .csHtml pages?
Oct 16, 2014 at 5:29 AM
Hi!

You can use Javascript like on every html page. Only use the script - Tags
    <script language="javascript" type="text/javascript">
        //your script here
    </script>
If you want make sure jQuery is loaded and you want place your script on the end of the page simple use the Script.Foot and Script.Require.
@using (Script.Foot()) {
    Script.Require("jQuery").AtHead();
    <script language="javascript" type="text/javascript">
        //your script here
    </script>
}
The Code is not tested, but it should work.
Oct 16, 2014 at 5:32 AM
Where should we place our .js File? In the Orchard.jQuery Module or in our own module?
Oct 16, 2014 at 5:37 AM
Edited Oct 16, 2014 at 5:41 AM
You can place the *.js File in a Folder called Scripts in your own module and create/edit a ResourceManifest. That's a separate class derived from IResourceManifestProvider and collect your Script and Style Files. So you can later import than with Script.Require .

The ResourceManifest in my Theme looks like this.
using Orchard.UI.Resources;

namespace PJS.Bootstrap {
    public class ResourceManifest : IResourceManifestProvider {
        public void BuildManifests(ResourceManifestBuilder builder) {
            var manifest = builder.Add();

            manifest.DefineScript("Bootstrap").SetUrl("bootstrap-3.2.0/js/bootstrap.min.js", "bootstrap-3.2.0/js/bootstrap.js").SetVersion("3.2.0").SetDependencies("jQuery");
            manifest.DefineScript("HoverDropdown").SetUrl("hover-dropdown.js").SetDependencies("Bootstrap");

            manifest.DefineStyle("prettyPhoto").SetUrl("prettyPhoto/prettyPhoto.css");
            manifest.DefineStyle("Slider-Revolution-Settings").SetUrl("rs-plugin/css/settings.css").SetVersion("4.1.1");
            manifest.DefineStyle("Slider-Revolution-Dynamic-Captions").SetUrl("rs-plugin/css/dynamic-captions.css").SetVersion("4.1.1").SetDependencies("Slider-Revolution-Settings");
        }
    }
}
In your cshtml, where you need your script or the style simply add
// Add the BootStrap Style
Style.Require("Bootstrap");

// Add prettyPhoto Script
Script.Require("prettyPhoto").AtFoot();
edit: Removed some Code for easier reading
Marked as answer by sfmskywalker on 10/15/2014 at 10:58 PM
Oct 16, 2014 at 5:41 AM
Thank you sir!
Oct 16, 2014 at 5:43 AM
You are welcome :)

If you satisfied with my answer please mark it as answer - Thanks. :)
Oct 16, 2014 at 5:45 AM
Sure!