You must use the @Html.Script method to register scripts and @Html.StyleSheet in MVC views. @Html is an ASP.NET MVC helper method. For more information, see HTMLHelper methods. Script and StyleSheet methods are part of the helper methods inside the Telerik.Sitefinity.Frontend assembly.
Throughout this article, you can refer to the following view that demonstrates how to add resources to your views:
You can use HTML sections to specify where on your page you want to render the referenced resources. Placing your resources in the correct sections of the page is important. For example, a good practice is to place your stylesheets in the <head> tag and the scripts before the closing <body> tag.
Sitefinity CMS provides you with full control on where to place your resources. For this purpose, you can register sections in your layout files. Thus, when using the @Html.Section method, you can define where to insert your resource on the page. After you create a section, it is replaced by all referenced resources for that section. Both the @Html.Script and @Html.StyleSheet helper methods have an overload for accepting a section name. So, regardless of the position of the resources, registered via the @Html.Script and @Html.StyleSheet helper methods, they will be rendered inside this section. This means that you can register resources above the section and still have them in the correct place when the page is rendered. In the ReferToResourcesInsideViews.cshtml view, you can see how to register two scripts and a style sheet in the top, bottom, and head
NOTE: If you specify a section name and this section does not exist, or is renamed or deleted, an exception is thrown.
You can also use an overload of the helper method to suppress the exception throwing. To do this, set the value of the third parameter of the overload method to "false".
The following sections are available out-of-the-box with the Bootstrap resource package:
IMPORTANT: We recommend not to remove these sections.
You can use the Sitefinity CMS built-in jQuery library (version 1.8.3) to further customize the default Sitefinity CMS functionality without the need to refer or register jQuery as an additional resource.
In the ReferToResourcesInsideViews.cshtml example above, you can see how to register the jQuery in the MVC view using the ScriptRef enumerator.
ScriptRef is a special enumerator class, part of the Sitefinity CMS assembly with several predefined libraries. Some of the libraries that you can register are JQuery, MicrosoftAjax, KendoAll, JQueryCookie, JQueryFancyBox.
To correctly include a version of jQuery that is different than the built-in version, perform the following:
In the ReferToResourcesInsideViews.cshtml example, you can see how to include a specific script and stylesheet.
If you want to reference out-of-the-box MVC control resources, you need to provide the path to the script or stylesheet. Sitefinity CMS first searches for the script or stylesheet in the resource packages folder. If your views are using one of the resource packages - Bootstrap, Foundation, Semantic UI, we recommend to add the script or stylesheet files nearer to the views.
In the ReferToResourcesInsideViews.cshtml example, in case you based your page on the Bootstrap package, Sitefinity CMS searches the ~/ResourcePackages/Bootstrap/js/foundation.init.js with biggest priority.
Next, Sitefinity CMS looks for the resource in the widget assembly folder and finally in the SitefinityWebApp folder.
If you placed your script in another assembly, you can register it in the MVC view using the @Url.EmbeddedResource helper. @Url is an ASP.NET MVC helper method. For more information, see UrlHelper methods.
EmbeddedResource method is part of the helper methods inside the Telerik.Sitefinity.Frontend assembly.
In the ReferToResourcesInsideViews.cshtml example, you register the embedded script and stylesheet with two parameters for the script and stylesheet using the @UrlEmbeddedResource helper method (type) that provides the full namespace to the class and the full assembly name of the script.
In case your scenario requires both MVC and WebForms widgets on your page, you create a hybrid page and page template, based on the MVC Bootstrap template. For more information, see For developers: Hybrid MVC mode.
Your widgets may require scripts to be loaded on the page, so you use the @Html.Script helper method in the MVC view to call a specific script and place it in a specific section of the view. For example, @Html.Script(ScriptRef.JQuery, "bottom").
However, when working with hybrid pages, you need to use an additional parameter to the @Html.Script helper method that defines the location where the script is added to the page. This parameter is tryUseScriptManager, provided by the Telerik.Sitefinity.Frontend.Mvc.Helpers.ResourceHelper method. You need to explicitly state:
NOTE: By default, the value is set to true. If you leave the value to true, the scripts is added to the <form> section
Following are a few examples of how you can use the @Html.Script helper method:
Back To Top