Client-side development

If you want to build a richer user interface with Sitefinity ASP.NET Core Renderer, you can do this by adding client-side functionality. 

Sitefinity GitHub repository provides samples that will help you use different JavaScript frameworks, such as Blazor or React, and will demonstrate you how to customize or change your CSS framework, according to your preferences.

Sitefinity ASP.NET Core Renderer does not reference any third-party JavaScript frameworks out-of-the-box. However. You can choose different frontend framework to write your custom JavaScript logic.

Sitefinity GitHub repository provides samples for working with:

• Blazor
  This sample demonstrates how to use your own Blazor components and how to integrate them with Sitefinity ASP.NET Core Renderer.
  It wraps the Blazor component into a view component that can be shown in the WYSIWYG editor as a widget.
• React
  This sample demonstrate how to use Sitefinity ASP.NET Core Renderer with React framework.
  React visualizes and binds the data fetched by the Renderer application, while the Renderer generates the widget designers and fetches the data from Sitefinity CMS.
• Angular
  This sample demonstrate how to use Sitefinity ASP.NET Core Renderer with Angular framework.
  Angular visualizes and binds the data fetched by the Renderer application, while the Renderer generates the widget designers and fetches the data from Sitefinity CMS.

Sitefinity ASP.NET Core Renderer uses the Bootstrap CSS framework for providing rich and responsive layout. However, you can switch to a different CSS framework, such as Tailwind.

Sitefinity GitHub repository provides samples for customizing Bootstrap or replacing it with different CSS framework:

• Customize Bootstrap framework
  This sample demonstrates how to customize Bootstrap variables.
• Replace Bootstrap with Tailwind
  This sample demonstrates how to change the grid system by overriding the layout file.

If you want to use your custom scripts and styles across all the pages in your site, it is recommended to place them in a single layout file, so that they are easily manageable.

For example, if the layout file that your pages are based on is named RootLayout.chtml, inside it you can reference a script in the following way:

EXAMPLE: If the layout file that your pages are based on is named _Layout.chtml, inside it, you can reference scripts and styles as demonstrated in Sitefinity GitHub repository » React sample » ReactIndexLayout.cshtml.

Reference scripts on a specific page

If you want to include scripts or other resources on specific pages, you can filter the required pages in your layout file.

For example, you can filter by page name or custom fields.
This is useful if, for example, you want to include performance tracking scripts only on specific pages of your site.

EXAMPLE: To learn how to filter by page name, see SitefinityTemplate.cshtml.

An alternative to reference these files is to reference them in the widget template.

For example, if your widget is named MyWidget, you can reference a script in its Default.cshtml file in the following way:

NOTE: If you do not add the TagHelper attribute to the widget template, the section-name attribute will not work.

You can control whether the scripts are placed on the top or at the bottom of the body file by using the attribute “section-name”. For example, the section-name=”Top” attribute instructs the Renderer to include your file either at the start of the body tag or, in this case, section-name=”Bottom”, before the closing body tag. For this attribute to work, you must include the tag helper references in your _ Layout.cshtml file.

EXAMPLE: You can see an example of how to reference files in the widget template on Sitefinity GitHub repository » Captcha sample » Default.cshtml.

You have the following options:

In the root folder

If you are building a standalone website, you can place the scripts in the standard wwwroot folder and you can reference them from there, as you would do in any standard ASP.NET Core application.
For more information, see Microsoft documentation for Static files in ASP.NET Core.

As embedded resource

If you are building a widget as a class library that must be self-contained in a single assembly, you must place these client-side resources in the assembly, as embedded resources.
Place the scripts in a separate folder in your project, called Scripts.
Reference the script files in the .csproj file.
For example, add the following: <embeddedresource include="Web\UI\Scripts\bootstrap.js"></embeddedresource>