Skip to main content
Home  › ... Razor

Settings in 2sxc

Tutorial Home
#3 Use PageService.Activate to enable features, Css and Js

Use PageService.Activate to enable Features and Load JS/CSS

2sxc 12.04 helps with many advanced challenges like these:

  1. Make sure that certain scripts are only loaded once (like jQuery or FancyBox)
  2. Make sure that all apps use the same version of these scripts
  3. Starting things in the right order

Simple Example

The following example will tell the page that fancybox4 is required - which will automatically apply a lightbox to the image below.
It uses the WebResources as configured in the Settings. By default, fancybox4 is already defined, but you can overide this or create your own WebResource definitions.

Output

@{
  Kit.Page.Activate("fancybox4");
  Kit.Page.Activate("fancybox4"); // even if called multiple times, it will only be activated once
  var imgUrl = App.Path + "/settings/demo-banner.png";
}
<a data-fancybox='gallery' href="@imgUrl">
  <img loading="lazy" src="@Link.Image(imgUrl, width: 200, height: 200)">
</a>
#3 Use PageService.Activate to enable features, Css and Js

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->

Use PageService.Activate to enable... <!-- unimportant stuff, hidden -->

  @{
    Kit.Page.Activate("fancybox4");
    Kit.Page.Activate("fancybox4"); // even if called multiple times, it will only be activated once
    var imgUrl = App.Path + "/settings/demo-banner.png";
  }
  <a data-fancybox='gallery' href="@imgUrl">
    <img loading="lazy" src="@Link.Image(imgUrl, width: 200, height: 200)">
  </a>