Add JavaScript resources
You have two options to add JavaScript to your application's widget, page, or template:
- Add JavaScript to the markup – you use tags and the script is added as an embedded resource
- Add JavaScript to the code-behind - you do this programmatically and the script is added as a content item
No matter which method you choose, as a result your script is loaded in the browser. The difference is the way the script is loaded – combined with other scripts in a single file or as a separate file. For more information, see Add resources to your application.
Add JavaScript to the markup
To include JavaScript resources, you register the Telerik.Sitefinity.Web.UI assembly in the markup of your widget, page, or master template. Thus, you have access to Sitefinity's ResourceLinks widget via the sf tag prefix. To do this:
- In Visual Studio, open your Sitefinity CMS project.
- Depending whether you are adding a script to a widget, page, or template, open the markup of the .ascx, .aspx, or .Master file, respectively, and add the following code:
In the code above, you register the Telerik.Sitefinity.Web.UI assembly with the following tags:
- In ResourceLinks tag, set the value of UseEmbeddedThemes to true or ommit it entirely.
- In ResourceFile tag, set value of Static to true.
- In ResourceFile tag, set the value of Name to be the assembly path to your embedded resource.
- In the AssemblyInfo tag, add the full name of any type in the assembly where the resource is embedded. In the example above, this a Program.cs file in the ExternalResources assembly.
- In the context menu of the JavaScript .js file, click Properties.
- Set Build Action to Embedded Resource.
- In the AssemblyInfo.cs class of the external library, add the following System.Web.UI.WebResource:
[assembly: WebResource("ExternalResources.Scripts.Library.js", "application/x-javascript")]
As a result, by using an embedded resource and passing the assembly path, your JavaScript file is combined together with other Sitefinity CMS resources into a single file on the client side.
Managing the scripts loading priority after adding the scripts using ResourceLinks
Scripts are not loaded in the same order as you have defined them using the ResourceLinks control.
NOTE: The priority the scripts are loaded in is important, not their order in the ResourceLinks widget.
The order in which the Script Manager loads the scripts is as follows:
- scripts that are coming from relative paths,
- scripts from embedded resources, and finally
- scripts from CDN or external resources.
All of the resource links widgets are processed and the scripts are set for loading. The embedded scripts are loaded by the SitefinityScriptManager. Scripts that are referenced using a relative path are loaded using the System.Web.UI ClientScriptManager RegisterClientScriptInclude method.
Sitefinity CMS recommends that you load your scripts from the same source: either using embedded resources, or by loading them using the relative path to the resource.
To edit the default ScriptManager settings, perform the following steps:
- In the menu at the upper part of the screen, click Administration » Settings » Advanced.
- In the tree view, select Pages.
- Search for the texbox labeled Enable in-line editing and set it to False.
- Go back to the tree view, select Pages, and then select ScriptManager under Pages.
- Edit the ScriptManager settings in the page that appears.
- Click Save changes.
Add JavaScript in the code-behind
You can also add JavaScript resources programmatically. To include JavaScript resources, open your project In Visual Studio. Depending on whether you are adding a script to a widget, page, or template, open the code-behind of the .ascx, .aspx, or .Master file, respectively, and add the following code:
The Page_PreRender method of your widget uses the ScriptManager class for the current page.
Using the Scripts property of the ScriptManager, you add a reference to your JavaScript resource by passing a new ScriptReference object with the resource's relative path.
As a result, your JavaScript file is loaded as a separate file.
For more information about including JavaSript code using Sitefinity CMS Java Script widget, see Java Script widget.