Add client-side functionality to .NET Core widgets

How to reference the scripts

You can reference the scripts from the following:

In the page template

You can reference the scripts inside the template that your pages are based on.

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:

In the widget template

You can reference your scripts directly 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.

For example, the section-name=”Top” attribute instructs the Renderer to include your file either at the start of the body tag or, in case section-name=”Bottom”, before the closing body tag. For this attribute to work, you must include the tag helper references in your .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 .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.

Want to learn more?

Sign up for our free beginner training. Boost your credentials through advanced courses and certification.
Register for Sitefinity training and certification.

Was this article helpful?