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’s 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.

When a page template uses a package all resource references that are referred with Url.WidgetContent helper are overridden by the existing files in the package folder.

EXAMPLE: You have a page template named My Package.My Template. A page based on this template has a widget on it that references a stylesheet in the following way: <link rel="stylesheet" href='@Url.WidgetContent("Mvc/Styles/Css/sitefinity-theme.css")'>. All default widgets reference their resources in this way. In this case, the site has files ~/Mvc/Styles/Css/sitefinity-theme.css and ~/ResourcePackages/My Template/Mvc/Styles/Css/sitefinity-theme.css. The WidgetContent helper ensures that the second file is retrieved and the first file is ignored.

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:

If your views are using a resource package - for example Bootstrap, we recommend to add the script or style sheet files nearer to the views. For example:  ~/ResourcePackages/Bootstrap/plugin.js

~/ResourcePackages/Bootstrap/css/plugin.css

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

In case you have based your page on the Bootstrap package, Feather searches folder ~ResourcePackages/Bootstrap 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:

The first parameter of the @Url.EmbeddedResource helper method (type) is the full namespace to the class and the second parameter is the full assembly name of the script.