turnOn Tutorials

Tutorial Home › turnOn

Passing module parameters with turnOn

#5 Passing anonymous objects as parameters with turnOn

Wait for multiple scripts

Requirements

2sxc 7.00

Resources

Pass function the Module Id as parameter with turnOn

This page creates a anonymous object and sets it on a div. turnOn then passes this attribute to a JavaScript function, which identifies the element with a queryselector and performs DOM manipulations.

In this tutorial you'll learn how to:

Create a anonymous object in c#
Pass it's data to a JavaScript function

Look at the text below to see the effect.

Output

turnOn hasn't started yet.

  @* Inject attribute into DIV, to make it accessible for query *@
<div id="turn-on-example">
  turnOn hasn't started yet.
</div>

@{
    
  // Create an anonymous object and define example settings 
  var data = new {
    domId = "turn-on-example",
    style = new {
      backgroundColor = "mediumpurple",
      height = 100,
      width = 400
    }
  };
}

@* Passes the exampleObject as parameter in a JSON format and executes the window.turnOnTutorial120.init function *@
@Kit.Page.TurnOn("window.turnOnTutorial120.init()", data: data)

<script src="@CmsContext.View.Path/120-anonymous-object.js" @Kit.Page.AssetAttributes()></script>

Source Code of 120-anonymous-object.js(() => {
  // Data gets passed as a single object, so we need to deconstruct it.
  function init({domId, style}) {
    // The element gets found in the DOM by a querySelector with the passed attribute
    const foundElement = document.querySelector(`#${domId}`)
  
    // apply passed settings on DOM element
    foundElement.style.backgroundColor = style.backgroundColor;
    foundElement.style.height = `${style.height}px`;
    foundElement.style.width = `${style.width}px`;
  
    // Parameters get displayed in the DOM
    foundElement.innerText = `turnOn has passed this data: ${JSON.stringify({domId, style})}`;
  }
  
  const tt = window.turnOnTutorial120 = window.turnOnTutorial120 || {};
  tt.init = tt.init || init;
})();

Passing module parameters with turnOn

#5 Passing anonymous objects as parameters with turnOn

Wait for multiple scripts

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

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


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h2>Pass function the Module Id as parameter with turnOn</h2>
      <p>This page creates a anonymous object and sets it on a div. turnOn then passes this attribute to a JavaScript function, which identifies the element with a queryselector and performs DOM manipulations.</p>
      <br>
      In this tutorial you'll learn how to:
      <ul>
        <li>
          Create a anonymous object in c#
        </li>
        <li>
          Pass it's data to a JavaScript function
        </li>
      </ul>
      Look at the text below to see the effect. 
    </div>
  </div>

    @* Inject attribute into DIV, to make it accessible for query *@
  <div id="turn-on-example">
    turnOn hasn't started yet.
  </div>

  @{
    
    // Create an anonymous object and define example settings 
    var data = new {
      domId = "turn-on-example",
      style = new {
        backgroundColor = "mediumpurple",
        height = 100,
        width = 400
      }
    };
  }

  @* Passes the exampleObject as parameter in a JSON format and executes the window.turnOnTutorial120.init function *@
  @Kit.Page.TurnOn("window.turnOnTutorial120.init()", data: data)

  <script src="@CmsContext.View.Path/120-anonymous-object.js" @Kit.Page.AssetAttributes()></script>



@* Footer *@
@Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })