Feather: Refer to resources inside views

Using CSS styling, JavaScript logic, and jQuery support is a part of the process of developing your MVC views. This way, your custom functionality is styled and presented according to your requirements. When developing your MVC views, you can add JavaScript, CSS, and Sitefinity built-in jQuery resources.

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 Feather helper methods inside the Telerik.Sitefinity.Frontend assembly.

You can use the Feather sections to specify where on your page you want to render the referenced resources. Both @Html.Script and @Html.StyleSheet helper methods have an overload for accepting a section name. The following code registers two scripts and a style sheet in sections top, bottom, and head:

NOTE: If you specify a section name and this section does not exist, an exception is thrown.

You can also use the third overload of the helper methods to suppress the exception throwing. The following code does not throw an exception:

If you use the standard Feather resource packages, the following sections are available out-of-the-box:

• head
  Just before the closing head tag
• top
  Just after the opening body tag
• bottom
  Just before the closing body tag

For more information, see Feather: Use sections for resources.

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.

The following code registers jQuery in the MVC view:

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:

1. Use the jQuery.noConflict() method to wrap your custom JavaScript logic.
2. Include a specific resource in the following way:
   @Html.Script("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")

   @Html.StyleSheet("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css")

If you want to reference out-of-the-box MVC controls resources that come with Feather, you can use the following code:

Feather first searches for the script or style sheet 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 style sheet files nearer to the views. For example: ~/ResourcePackages/Foundation/js/foundation.init.js ~/ResourcePackages/Foundation/css/foundation.css

To register the Foundation script and stylesheet in the view, you must use the following code:

In case you based your page on the Foundation package Feather searches folder ~ResourcePackages/Foundation with biggest priority. Next, Feather looks for the resource in the SitefinityWebApp, and, if it is not presented there, Feather searches the embedded resources for it.

To resolve resources from the MVC folder, you can use the following code:

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 Feather helper methods inside the Telerik.Sitefinity.Frontend assembly.
Use the following code to registers embedded script and style sheet from another assembly: