Oqtane Tutorials
Oqtane Tutorials

Advanced Settings and Automation

Tutorial Home › Settings and Automation
Settings in 2sxc
#2 Use PageService.Activate Features like JS/CSS
RazorBlade Tutorials - Introduction

Use PageService.Activate Features like 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
The samples can differ based on your Razor base class or if you're running an old version.
Switch to Typed (2sxc 16+) Switch to Dynamic (Razor14 or below)

Activate Feature with the Page.Activate (IPageService)

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.

⬇️ Result | Source ➡️

Click on the image to see Fancybox in action! 

@inherits Custom.Hybrid.RazorTyped

@{
  // Activate the feature Fancybox4
  // even if called multiple times, it will only be activated once
  Kit.Page.Activate("fancybox4");
  Kit.Page.Activate("fancybox4");
  var imgUrl = App.Folder.Url + "/tutorials/code-pageservice/demo-banner.png";
}
<p>
  Click on the image to see Fancybox in action!
</p>
<a data-fancybox='gallery' href="@imgUrl">
  <img loading="lazy" src="@Link.Image(imgUrl, width: 200, height: 200)">
</a>

 

 

Settings in 2sxc
#2 Use PageService.Activate Features like JS/CSS
RazorBlade Tutorials - Introduction