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 for working with:
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.
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.
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:
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
Reference the script files in the
For example, add the following:
: Following is an example of the
script reference in the
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.