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.