Refer to resources inside views
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.
StyleSheet methods are part of the helper methods inside the
Throughout this article, you can refer to the following view that demonstrates how to add resources to your views:
Use HTML sections to refer to resources
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
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.StyleSheet helper methods have an overload for accepting a section name. So, regardless of the position of the resources, registered via the
@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
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:
Just before the closing head tag
Just after the opening body tag
Just before the closing body tag
IMPORTANT: We recommend not to remove these sections.
Use Sitefinity CMS built-in jQuery
You can use the Sitefinity CMS built-in jQuery library to further customize the default Sitefinity CMS functionality without the need to refer or register jQuery as an additional resource.
ReferToResourcesInsideViews.cshtml example above, you can see how to register the jQuery in the MVC view using the
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
To correctly include a version of jQuery that is different than the built-in version, perform the following:
- Use the
- Include a specific resource.
ReferToResourcesInsideViews.cshtml example, you can see how to include a specific script and stylesheet.
Take advantage of routing when registering resources
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 Bootstrap resource package, we recommend to add the script or stylesheet files nearer to the views.
ReferToResourcesInsideViews.cshtml example, in case you based your page on the Bootstrap package, Sitefinity CMS searches the
~/ResourcePackages/Bootstrap/js/sample.init.jswith biggest priority.
Next, Sitefinity CMS looks for the resource in the widget assembly folder and finally in the SitefinityWebApp folder.
ReferToResourcesInsideViews.cshtml example, you can see how to refer to a resource from the MVC folder -
Register scripts and stylesheets from another assembly
If you placed your script in another assembly, you can register it in the MVC view using the
@Url is an ASP.NET MVC helper method. For more information, see UrlHelper methods.
EmbeddedResource method is part of the helper methods inside 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.
The scripts and stylesheets also have to be added to the
AssemblyInfo.cs file of the external assembly. To do that in Visual Studio:
- Open your external assembly.
- Expand the Properties node.
- Open the
- Add your stylesheets and scripts following these examples.
- For scripts:
- For stylesheets:
[assembly: System.Web.UI.WebResource("Telerik.Sitefinity.Resources.Styles.all.css", "text/css", PerformSubstitution = true)]
Refer to resources in hybrid pages
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,
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:
- The location (section), for example, “top”
- The value of the parameter, for example, false
NOTE: By default, the value is set to
true. If you leave the value to
true, the scripts is added to the
Following are a few examples of how you can use the
@Html.Script helper method:
|@Html.Script(Url.WidgetContent("/Mvc/Views/Scripter/myscript.js"), true) |
|When you do not specify the
tryUseScriptManager value, it defaults to true and script will be placed in the page after the <form> tag.
@Html.Script(Url.EmbeddedResource("Telerik.Sitefinity.Resources.Reference", "Telerik.Sitefinity.Resources.Scripts.jquery.ba-outside-events.min.js"),false) |
|When you set the parameter to
false, the script is added to wherever you place the widget on the page.
@Html.Script(Url.WidgetContent("/Mvc/Views/Scripter/header.js"),"bottom",false, false) |
|When you specify the location and set the parameter to
false, the script is added to this specific section on the page.
Limitation : If you set tryUseScriptManager to ‘true ’, the attributes will not be added to your scripts, since they are handled by the page script manager. Here’s an example of each overload
Load minified scripts
By default, Sitefinity CMS serves a minified version of all built-in scripts that are referenced in the out of the box widgets. To make debugging easier, a source map is included alongside each minified script.
NOTE: If you have configured your project in debug mode from the web.config file, for example by specifying
<compilation debug="true"..., Sitefinity CMS automatically loads the non-minified version of the referenced scripts.
Load minified scripts in custom widgets
You can take advantage of Sitefinity's ability to automatically load minified scripts when developing your custom widgets. By default, if you provide a minified version of the script files you are referencing in your custom widgets, Sitefinity CMS will load it automatically.
For example, if in your custom MVC widget view you are loading a script to display the user's login status, like:
when Sitefinity CMS renders the widget on the page, it will search the respective folder, containing the scripts for your custom widget view, in this case Mvc/Scripts/LoginStatus for a login-status.min.js file. If a file is found, Sitefinity CMS loads it, instead of the non-minified version, that is referenced in the widget code.