Client-side development

Overview

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.

Frontend frameworks

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.

CSS frameworks

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:

Reference scripts and styles in 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.

Reference scripts and styles in the widget template

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.

Where to place the scripts

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>

EXAMPLE: Following is an example of the call-to-action script reference in the Progress.Sitefinity.AspNetCore.Widgets assembly.

The reference is using the section-name attribute, but it also includes the assembly-ref attribute, which points to the name of the assembly, where this file is placed as an embedded resource.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Web Security for Sitefinity Administrators

The free standalone Web Security lesson teaches administrators how to protect your websites and Sitefinity instance from external threats. Learn to configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?